• You must have access to the file system of the application server, specifically to the “custom” directory of the RequestCenter.war archive and its subdirectories. You need both read and write access to this directory and to its subdirectories.
• You must have a user role which includes the Administration capability to “Manage Global Settings” in order to turn on or off the use of custom style sheets, headers, and footers.
• Browser page caching must be turned off in order for you to test style sheet changes.
• Ideally, you should have access to an application instance where you can test your changes without disturbing the work of other analysts or developers.
• A style sheet editor and other editing tools are highly recommended, but not required.

The procedure below gives the basic steps to follow in order to customize the appearance of styles used in the built-in modules, namely My Services, Service Catalog, Service Manager, and Reporting. Additional details on these styles are given in the following sections.

1. Create a directory on the application server, under the RequestCenter.war/custom directory, where the files required for the custom styles will reside. In a Linux deployment this directory would be, /opt/CiscoPrimeServiceCatalog/jboss-as-7.1.1.Final/ServiceCatalogServer/deployments/RequestCenter.war/custom. The directory will typically have an images subdirectory, for any custom images. The directory name should indicate the tenant/organization name to which the style will apply.
2. If you use the Service Catalog module as the end user module, copy all the files located in the custom/ServiceCatalogExamples directory into the new directory created in Step 1. In a Linux deployment this directory would be, /opt/CiscoPrimeServiceCatalog/jboss-as-7.1.1.Final/ServiceCatalogServer/deployments/RequestCenter.war/custom/SmallCompany. If you use My Services module, copy all the files located in the custom/CustomExamples instead. Location of this archive will vary, based on your application server and installation setting.
3. In the new directory, remove the "example_" prefix of files in the directory as well as in the application directory under it. Modify the css files and add image files as needed to tailor the look and feel of the user interface as needed.
4. Use the Custom Styles page in the Administration module to define the style, specify the directory on which required files reside, and assign the organizations to which the style name applies.
5. Use the Settings page in the Administration module to turn on custom stylesheets.
6. Restart the browser session of Service Catalog—the pages should appear with the customizations applicable to the logged in user. You must exit and restart the Service Catalog session when custom stylesheets are initially activated. To test subsequent changes to the styles, it is sufficient to copy the revised style sheet to the application server and refresh the current page. The new styles will be applied, provided page caching is not in effect.

Caution

Once you change the Administration Settings to use custom stylesheets, the custom.css file should be present on the specified directory. If the file is not present, Service Catalog will use its standard styles. Similarly, if the option to use a custom header or footer is turned on, the corresponding files must be present on the specified directory.

The appearance of customer-facing modules in the application can be customized using Cascading Style Sheets (CSS) and custom headers and footers.

Choose the Administration module, and go to the Settings tab. The Customizations page appears. The Common settings include parameters to “Enable Custom Header Footer” and “Enable Custom Style Sheets”.

The custom style sheets are enabled by default. You can change the corresponding parameter setting from “On” to “Off.” Save your changes by updating the page. Any specified in the custom.css file (in place on the application server) will be in effect.

To enable custom headers and footers, change the parameter setting for the “Enable Custom Header Footer” parameter to “On.”

Once you start a session with these parameters turned on, there is no need to exit from your session to view style changes. Once the definition of the style is changed and the file placed on the specified directory of the application server, refreshing the page will use the new style definitions. There is a directory under RequestCenter.war/custom named ServiceCatalogExamples which provides the base application CSS files that you can customize for your brand as well as the GUI design.

If the Browser Cache setting is enabled in the Administration Settings, changes made to custom style sheets, headers and footers will not take effect until the browser cache has been deleted. To prompt the application users to delete their browser cache, follow the instructions in the Browser Cache Setting to increment the browser cache version.

Files in the custom\ServiceCatalogExamples directory are available if you want to do more extensive customization of the UI. There are three main files to start with:

• before.html – The content of this file is prepended to the <body> of the HTML document. You can use this file to override product strings before they are displayed. For example, the product name in the header uses string ID 15162, so you can make the product show “Small Company” by inserting this block into before.html:

  <script>
  serviceCatalogMessage.putString("15162", 'Small Company');
  </script>
  

Use Firebug or other web developer tools to examine the HTML code of the Service Catalog module. You will see other strings that you can override.

• head.html – The content of this file is injected into the end of the (head) section of the HTML document. You can override the colors and styles specified by the various HTML classes and elements on the web page. For example, change the color settings for the Small Company "homeslider" to something different:

  <style>
  .homeslider .blocks.block1 {
  background-color: #9E6F9A; /*#2B6F9A;*/
  background-image: linear-gradient(to bottom, #985DC2, #B6115E); /*#258DC2, #04415E);*/
  background-repeat: repeat-x;
  }
  .homeslider .blocks.block2 {
  background-color: #9E6F9A; /*#2B6F9A;*/
  background-image: linear-gradient(to bottom, #D486C0, #B43557); /*#6486C0, #213557);*/
  background-repeat: repeat-x;
  }
  .homeslider .blocks.block3 {
  background-color: #9E6F9A; /*#2B6F9A;*/
  background-image: linear-gradient(to bottom, #EE86C0, #BE3157); /*#7B86C0, #2B3157);*/
  background-repeat: repeat-x;
  }
  </style>
  

• after.html – The content in this file is appended at the end of the html (body).

Here is a quick example on how to change the default Cisco Logo to some other company logo in the head.html file, as it is a style override:

• <style>
  .navbar-inner {
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /*disable gray header bar in IE*/
  }
  .navbar .nav {
  color: #333;
  text-shadow: none;
  }
  .navbar .nav ) li ) a {
  color: #333;
  text-shadow: none;
  }
  .psc-goto-cart {
  color: #333 !important;
  }
  .psc-top-icon {
  border:2px solid #333;
  background-color: #333;
  }
  /* Change company logo */
  .psc-header.navbar.brand {
  background-image: url("/RequestCenter/custom/SmallCo/images/SmallCo_logo92x33.gif");
  background-repeat: no-repeat;
  background-position: 0 .514em;
  background-size:75px auto;
  padding-left: 3em!important;
  padding-top: 0.25em!important;
  padding-right: 5em!important;
  font-size: 1.571em;
  line-height: 2.28em;
  color: #333; /* Small Company's website H1 color */
  text-shadow: none;
  }/* Change company logo */
  </style>
  <style>
  /* The following block changes the colors "Home", "Browse Categories" and magnifying glass
  (search) box to orange(!), including the search box hover state */
  .categories > .navbar li.menu.menu > a, .categories > .navbar li.menuHome.menu > a, .categories > .navbar li.search.menu > a {
  background: none repeat scroll 0 0 orange;
  }
  .categories > .navbar li.menu > a, .categories > .navbar li.menuHome > a, .categories > .navbar li.search > a {
  background: none repeat scroll 0 0 orange;
  }
  .categories > .navbar li.menu, .categories > .navbar li.menuHome, .categories > .navbar li.search {
  background: orange;
  }
  .categories > .navbar li.menu:hover, .categories > .navbar li.menuHome:hover, .categories > .navbar li.search:hover {
  background-color: orange;
  background-image: linear-gradient(to bottom, orange, orange);
  background-repeat: repeat-x;
  }
  /* This changes the navbar background color to the right of the Home, Browse Categories and magnifying glass box.*/
  .categories > .navbar {
  background-color: rgba(255, 255, 102, 0.75); /* this sets the color and transparency of the navbar*/
  }
  .page-heading { /* This overrides the default : background-image:*/ url("../../ngc/img/page_heading_bg.png"); 
  in the “Categories” view, so the color behind the “Categories” text is light green rather than the blue from the png.
  background-color: lightgreen;
  background-image: none;
  }
  </style>

Just like Service Catalog, My Services and other built-in modules, the Service Portal modules can be customized for different organizational units through style sheets. The custom styles are maintained in a different style sheet from the other built-in modules to give you greater flexibility in how you present the Portal Designer modules.

The Service Portal solution also offers different themes that affect the colors of portlets on a portal page. You can allow users to choose their own themes, or give this ability only to portal designers. See the Cisco Prime Service Catalog Designer Guide for more information regarding portal page themes.

The custom stylesheet for Service Portal module is located in the same custom/ServiceCatalogExamples or custom/CustomExamples directory as Service Catalog and is enabled/disabled along with it.

1. Obtain a copy of the file example_portal-custom-header.css from the custom directory of the Service Catalog web archive (RequestCenter.war).
2. Name the copied file as portal-custom-header.css. Change the styles in the file according to the guidelines given in the next section of this chapter.
3. Copy this file into the custom directory created for the tenant/organization (see Customizing Built-In Modules, Step 1) along with any images used.

The custom\CustomExamples directory includes files you can use as starting points for customizations of My Services module. Directory contents are summarized in the table below.

The CustomExamples/example.css and example_portal-custom-header.css files (the templates for your custom.css and portal-custom-header.css) are formatted as a standard cascading style sheet file and includes comments to guide you in choosing styles to modify. These comments include brief descriptions of where and how a particular style is used; however, some experimentation is required to fine tune customizations.

The original definitions for customized styles should be retained as comments in the style sheet. This practice is recommended, in case a customized change needs to be backed out and to maintain traceability to the original page appearance.

The online help files provided for Service Catalog cannot be customized.

It is possible that some styles used in Service Catalog pages are not included in the CustomExamples/example.css file. If you find such an omission, please report it to the Cisco Technical Assistance Center (TAC).

A temporary workaround may be possible. View the source for the generated page, noting the class or id of the sections to which the style is to be applied. If this class or id uniquely identified the object whose appearance you want to change, include an appropriate style in your custom stylesheet, or add an appropriate attribute to the style definition. Care should be taken if you elect to use this approach, as any additions to the custom stylesheet may not be supported in subsequent releases.

The styles used in this version of Service Catalog may have been modified from those used in previous versions. These changes not only update the appearance of the pages but also address performance and consistency issues that had been raised in previous releases.

The table below summarizes styles available in the custom.css.

The table below summarizes styles available in the portal-custom-header.css.

After cloning from the example.css to create the initial custom.css, the styles should have no effect on the user interface, and as the individual properties are changed, they should then be evident in the customizable modules.

Some styles used by the default user interface are implemented as background images, rather than color values. Some of these images are duplicated in the custom/CustomExamples/images subdirectory, ready for replacement. They should be replaced with images of the same type, size, shape and name in order to be correctly included in the user interface.

There are a number of places in the custom stylesheet where there is an alternative between using a background image and simply specifying a color value. In each of these places, there are alternate attributes that can be commented in or out to determine which of these is to be used. For example:

div.longHeader,
div.shortHeader
{	/* background: #FD2312; */
	background: url(./images/headerGradient.gif); 
	border-bottom:    2px solid #cc3333;
}

Here, the image providing a shaded header for the portlets is being used. To change that gradient, replace this image in the custom subdirectory. To switch to a simple solid background color, comment out the background that specifies the image using the /* */ pattern, and remove the comment from the background with the hex color.

You can also create new images and modify the custom.css file to point to them. For example:

#header
{
	background:	#ffffff url(./images/logo.gif) top left no-repeat;
	border-bottom: 1px solid #a7a7a7;
}

In this case, a new “logo.gif” could be created and the file replaced, or a completely new image generated such as “acme_logo.gif”. Then, the property declaration could be changed to read

	background:	#ffffff url(./images/acelogo.gif) top left no-repeat;

The same goes for any other image used in the look and feel.

For modules defined and maintained in Portal Designer, the portal page body is not affected by the custom stylesheets. Instead the portal page theme can be configured using “Page Settings” to match with the header styles.

This diagram is representative of the effect that the styles have. Although it does not include all styles, it does cover the most commonly customized ones.

Figure 3. Sample Screen

* Indicates that this is the first descriptor in the style grouping, and there are others.

Cisco supplies a template for customizing the page headers and footers that appear with Service Catalog web pages.

Custom page headers and footers appear in addition to, not instead of, the standard a page headers and footers. The header and footer html files may contain any html commands deemed appropriate, including use of default Service Catalog styles.

For example, using a footer.html file with the following contents:

<img src="/RequestCenter/images/eAdmin.gif"
     alt="eAdmin logo" align="top" name="eAdminLogo"/>

would result in a footer display like that shown below, where the “Technology by Cisco” logo is the standard page footer in My Services.

Figure 4. Footer logo