Bookshelf Home | Contents | Index | Search | PDF | ![]() ![]() ![]() ![]() |
Siebel Analytics Web Administration Guide > Customizing the Siebel Analytics Web User Interface >
Modifying Siebel Analytics Web User Interface Styles
You can modify the Siebel Cascading Style Sheets (CSS) files and the images stored in the default installation directory to create a custom user interface. The default images and style sheets are located the in the Web\App\Res\s_Siebel7 folder in the Siebel Analytics installation directory. Contained within this directory are of the relevant subdirectories (b_mozilla_4.0, b_nscp, Charts, Images, Maps, Meters, PopBin, Portal, and Views) for the current Siebel style.
Web developers who work with and understand style sheets can modify the default Siebel styles.
NOTE: Modifications to the PopChart appearance files used in charting are not supported by Siebel Systems.
This section contains the following topics:
- Working with Cascading Style Sheets
- About Cascading Style Sheet Attributes
- Creating a New Dashboard Style
- Example: Customizing the Dashboard Banner Image
Working with Cascading Style Sheets
Web developers who work with and understand style sheets can modify the default Siebel styles. There are three files that affect most of the dashboard user interface:
- PortalBanner.css. Influences the overall appearance of a dashboard's top section. This includes the dashboard's names, links, and so on.
- PortalContent.css. Influences the overall appearance of a dashboard's main content area.
- Views.css. Corresponds to each of the Siebel Analytics request views (Title, Table, Pivot Table, Chart, Narrative, Ticker, and so on).
To see an example default Siebel 7 style sheet
- Right-click the dashboard and select View Source to view the Web page within a text editor.
There are several CSS files referenced within the header of the Web page (<HEAD>. . .</HEAD>).
- Perform a Find within the document and search for the keyword "class."
There is a class variable for each available attribute from within one of the CSS files.
The first class that appears is the PortalBody class (<body class="PortalBody">). If you open up the PortalContent.css file, you see a corresponding section for PortalBody. For example:
.PortalBody {
font-family: Verdana, Arial, Sans-serif;
font-size: 9pt;
background-color: #FFFFFF;
margin: 0 0 2 0;
}You could modify the background color of the dashboard page by changing, for example, the hexadecimal color from #FFFFFF (white) to the color of your choice. If you were to save this change, you could go back to the Web browser and click the Refresh button to see the change.
You can change the various CSS classes to adjust the overall look of any Siebel Analytics application. This can be a tedious process, but after you have a good understanding of the available or most commonly used classes, you can perform a find and replace within the text editor to make mass changes to a style.
About Cascading Style Sheet Attributes
Cascading style sheets allow Web developers to have control over any object within Siebel Analytics. You can change images, backgrounds, font colors and sizes, table cell gridlines and cell padding, and so on.
For more information about cascading style sheets, you can consult a resource such as the Microsoft Developer Network (MSDN).
Creating a New Dashboard Style
The easiest way to create a new style is to copy the s_Siebel7 style folder \\SiebelAnalytics\Web\App\Res\s_Siebel7 and paste it into the data directory at the location \\SiebelAnalyticsData\Web\Res. Copying to the data directory rather than to the main installation directory prevents any customized CSS files and images from being overwritten during a software upgrade.
After the style has been copied, rename the directory from s_Siebel7 to a name that has meaning to you (such as s_ProspectName).
The b_mozilla_4.0 directory contains the important files for making quick changes to the dashboards.
NOTE: The Siebel Analytics Web service must be restarted before you can see the new style sheet from the Dashboard Properties screen.
- Copy the s_Siebel7 directory.
- Paste it to the Res directory in the SiebelAnalyticsData directory and give it a meaningful name.
- Make and save your modifications.
The style sheet becomes available in the Dashboard Properties screen when the Siebel Analytics Web service is restarted.
Example: Customizing the Dashboard Banner Image
The image bg_Banner.gif image is referenced on the top section of dashboards. Developers can open the bg_Banner.gif file and make changes, or delete and recreate a new bg_Banner.gif file.
Bookshelf Home | Contents | Index | Search | PDF | ![]() ![]() ![]() ![]() |
Siebel Analytics Web Administration Guide Published: 11 March 2004 |