Cisco Cisco Prime Service Catalog 10.0 Technical References
4-5
Cisco Prime Service Catalog 10.0 Configuration Guide
OL-31034-01
Chapter 4 Custom Style Sheets
Custom Style Sheets
To enable custom stylesheets, change the corresponding parameter setting from “Off” to the left “On”
button. Save your changes by updating the page. When you start a new Service Catalog session, any
custom styles specified in the custom.css file (in place on the application server) will be in effect.
button. Save your changes by updating the page. When you start a new Service Catalog session, any
custom styles specified in the custom.css file (in place on the application server) will be in effect.
Similarly, to enable custom headers and footers, change the parameter setting for the “Enable Custom
Header Footer” parameter to “On”.
Header Footer” parameter to “On”.
Once you start a Service Catalog 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.
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.
Modifying Customizations with Browser Cache Enabled
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
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
to increment the browser cache version.
Customizing Styles for Service Catalog Module
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:
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:
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", 'My 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.
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 My Company "homeslider"
to something different:
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 My 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);