Customize colors and graphics

You can change the interface colors and introduce customization that echoes your company's signature branding and color palette.

Service Request Catalog packages files that you can edit to change the basic application design and color palette. You can also redesign the backgrounds for the header, main, and footer areas. You do not need to be a designer or a programmer to make these changes. Obtain the required tools and follow the directions in this section.

Before you begin

Customization of most of the graphics and images of Service Request Catalog is performed by modifying the symbols in the panel.fla file and replacing the panel.swf used in . The symbols in the panel.fla file each correspond to a graphic, image, or text area in the .

You can find the panel.swf file and the panel.flain the following location:

<SRC_Root_Folder>\secure\configuration\default

Note

  • <SRC_Root_Folder> refers to the Web application server where you upgradeed .
  • Before you attempt to replace the panel.swf file, we recommend that you make a copy and store it in a convenient location. You should perform all your adjustments on the copy first.
  • You need to obtain Adobe® Flash® Professional CS5.x (or a later release) to edit the relevant files.You may also need an image editing application, such as Adobe® Illustrator® or Adobe® Photoshop®.
  • Make sure you have your corporate branding color values (expressed in hexadecimal numbers) handy.

Modifying panel.swf

To modify panel.swf and customize Service Request Catalog, follow these steps:

Note You cannot change the name of the panel.swf file. will search only for the name panel.swf.

  1. Open panel.fla in Flash Professional CS5.x, and note the various symbols. You should see symbols for the background, header, footer, logo, and other elements of the user interface.
  2. Select a symbol that you wish to modify.
  3. By default, Flash Professional CS 5.x provides numerous panels on the right side of the screen. These panels allow you to access the properties of the symbol that you selected. You can choose to adjust the color, gradient of the various symbols. For example, you may click on the symbol for the background, and use the color panel to specify a background that matches your organization's branding.
  4. When you have finished modifying the symbols, make sure that all symbols are under the "Illustrator Symbols" folder in the Library panel in Flash Professional. During the process of manipulating the symbols, Flash Professional may have moved the symbols from their original hierarchy in the Library Panel.
  5. Export the file as a panel.swf file.
  6. Stop any running instances of .
  7. Copy the panel.swf file that you exported in Step 4, and then navigate to where the current panel.swf is upgradeed. By default, this folder in the following location:
    <SRC_Root_Folder>\secure\configuration\default
  8. Rename the current panel.swf to panel.OLD to ensure that you maintain an original copy, and then paste your modified panel.swf into the same directory. Move the panel.OLD file to a safe location.
  9. Restart Service Request Catalog.  You should see the modifications you made to the user interface.

Note By manipulating the symbols in the panel.swf file, you can customize almost all of the graphical aspects of . This includes the your corporate logo, which you can adjust by replacing the current logo in panel.swf. However, you should be careful not to adjust the following:

  • Size: Adjusting the size of the symbols can lead to unpredictable results and may cause a poor user experience. is designed with most elements at specific sizes.
  • Nine scale slicing:  Manipulating Nine-scale slicing can cause some symbols to become distorted in unintended ways, so that the symbols may be too large or small, or distorted.
  • Names: Do not change the names of any of the symbols or their corresponding associations.

Handling empty symbols

Some symbols in panel.swf may be blank or empty by default. For example, the backgroundImage symbol contains no image by default. However, you may wish to add a picture to that will appear as the backdrop to your users' experience

Similarly, you may wish to remove some symbols. To do this, simply reset the symbol with a blank graphic.

Caution Do not delete any symbol.

Modifying the favorite icon

The favorite icon is displayed in the browser tab header. By default, this icon is the HPE logo. However, you can replace this logo with your organization's logo by replacing the favicon.ico file located in the Service Request Catalog root folder. Note that the size for this icon must be 16 x 16 pixels.

Note Make sure that the .ico file is an icon type file.