Cisco Cisco Prime Service Catalog 10.0 Technical References

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 Manager 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.

Obtain a copy of the file example_portal-custom-header.css from the custom directory of the Service 
Catalog web archive (RequestCenter.war). 

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.

Copy this file into the custom directory created for the tenant/organization (see 

, Step 1) along with any images used.

The following example describes how to modify the logo, product name and background color in the 
portal header:

.reboot2 .xwtBackgroundSimplified {

background: transparent !important;

}

/*style to modify logo image*/

.reboot2 .applicationHeader17 .applicationLogoImage {

background: url("images/MyCo_logo92x33.gif") no-repeat transparent !important;

/*background-repeat: no-repeat;

background-position: 0 .514em;

background-size:75px auto;

padding-left: 3em!important;

padding-right: 5em!important;*/

height: 33px !important;

width:92px !important;

/* Note: un-comment display property to hide the Product Logo if needed */

/*display:none !important;*/

}

/* This style is used to display or hide the Product Title in Portal modules

See Also: .applicationHeaderAppSubTitle, .applicationLogoImage, .applicationHeaderLogoText 

style - which will be the new style used to display branding logo

*/

.reboot2 .applicationHeader17 .applicationHeaderAppName {

visibility: hidden;

}

To start using custom style sheets or headers and footers:

Log in to Service Catalog, choose the Administration module, and go to the Settings tab. 

The Customizations page appears.