Siebel Analytics Web Administration Guide > Customizing the User Interface >

Modifying UI Styles

Web developers with Administrator rights can modify the existing Siebel Cascading Style Sheets (CSS) to create a custom user interface.

Web administrators can modify the Siebel CSS files or the images stored in the default installation directory. The default images and style sheets are located in the installation directory at \\SiebelAnalytics\Web\App\Res\s_Siebel7. 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.

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:

To see an example default Siebel 7 style sheet, right-click the dashboard and select View Source to view the Web page within the Notepad text editor. Note that the three CSS files are referenced within the header of the Web page (<HEAD>. . .</HEAD>).

Next, perform a Find within the Notepad document and search for the keyword "class." There will be 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 will 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;
}

To modify the background color of the dashboard page, change the hexadecimal color from #FFFFFF (white) to the color of your choice.

To make the background color of the dashboard yellow, change the hexadecimal color from #FFFFFF to #FFFF00, and save the change. Go back to the Web browser and click the Refresh button to see the changes.

Continue making changes to 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.

CSS 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 visit a resource such as MSDN at http://msdn.microsoft.com/library/default.asp?url=/workshop/author/css/reference/attributes.asp.

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 Web server must be restarted before you can see the new style sheet from the dashboard's Properties link.

To create a new style

  1. Copy the s_Siebel7 directory.
  2. Paste it to the Res directory in the SiebelAnalyticsData directory.
  3. Make your modifications.

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.


 Siebel Analytics Web Administration Guide 
 Published: 18 April 2003