Administer > Service Request Catalog Customization Guide > Appendix D: Styling the interface

Appendix D: Styling the interface

You can style Service Request Catalog to show your Company logo, change the application name, or set text formatting and the background as needed.

There are two methods you can use to style the interface. The first method is to modify the .swf files. This method is the original method for Service Request Catalog, and supports only desktop clients. However, this implementation was unsuitable for use on tablets, because of its reliance on Adobe Flash. In addition, this method supports all font changes. If you intend to use both the desktop and tablet clients of Service Request Catalog experience on tablets, you can modify the .zip files. However, this method does not support all font changes. The following table summarizes this information:

Required elements in manifest.xml Desktop support Tablet support Comments
<swfStyles>style.swf</swfStyles>
<swfResources>panel.swf</swfResources>
Yes No

These two elements were present from Service Request Catalog 1.40 and are still available for compatibility. No changes are required to them due to the introduction of the .zip method.

  • The <swfStyles> and <swfResources> elements have priority over the <cssStyles> and <imageResources> elements.
  • The <swfStyles>style(modified).swf</swfStyles> file is present from Service Request Catalog 9.34 and enables you to customize the current fonts to Service Request Catalog 1.40. For more information, see Customize the font family.
<cssStyles>font.css</cssStyles>
<imageResources>image.zip</imageResources>
Yes Yes

These two elements were newly added in Service Request Catalog 9.33 to support tablets, although your regular desktop browser will apply them as well.

Note The desktop browser will apply the <cssStyles> and <imageResources> elements only if the <swfStyles> and <swfResources> elements are not defined in the manifest.xml file.

Note You should specify the following images as follows, regardless of which customization method you use:

  1. backgroundImag: height < 600px, width < 1600px,
  2. companyLogo: height < 40px, width < 120px;
  3. footerLogo: height < 40px, width < 120px;
  4. headerSeperator: height < 10px;
  5. footerSeperator: height < 10px;

All other graphics should be kept at their original size.