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_Siebel77 folder in the Siebel Analytics installation directory. The relevant subdirectories are contained in this directory (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 to Modify Default Siebel Analytics Web Styles

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 display an example default Siebel 7 style sheet

  1. 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>).

  2. Perform a Find within the document and search for the keyword class.

    There is a class variable for each available attribute in one of the CSS files.

    The first class that appears is the PortalBody class (<body class="PortalBody">). If you open the PortalContent.css file, you get 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 display the change by clicking Refresh.

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 and Siebel Analytics Web

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 for Siebel Analytics Web

The easiest way to create a new style is to copy the s_Siebel77 style folder \\SiebelAnalytics\Web\App\Res\s_Siebel77 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_Siebel77 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 Analytics Web Server service must be restarted before you can display the new style sheet from the Dashboard Properties screen.

To create a new style

  1. Copy the s_Siebel77 directory.
  2. Paste it to the Res directory in the SiebelAnalyticsData directory and give it a meaningful name.
  3. Make and save your modifications.

    The style sheet becomes available in the Dashboard Properties screen when the Analytics Web Server service is restarted.

Example: Customizing the Dashboard Banner Image in Siebel Analytics Web

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.

Siebel Analytics Web Administration Guide