Configuring Siebel Open UI > Customizing Styles, Applets, and Fields > Customizing Client Logo, Background, and Style >

Customizing the Sequence That Siebel Open UI Uses to Load Cascading Style Sheets

This topic describes how to replace the sequence that Siebel Open UI uses to load cascading style sheets. Siebel Open UI includes a set of cascading style sheets that it loads in a predefined sequence at run time, starting with Siebel CRM versions 8.1.1.11 and 8.2.2.4. It uses a companion Id for each style sheet immediately after it loads the main style sheet. For example, the structure cascading style sheet that Siebel Open UI loads for Siebel Mobile uses the companion sb_theme Id. Siebel Open UI loads this companion Id when it loads the theme-mb-structure.css file. The cascading style sheet that you can use to customize the structure uses the sbe_theme Id, which Siebel Open UI loads immediately after it loads sb_theme, even though it does not load a cascading style sheet file for this Id, by default. If you configure Siebel Open UI to use this Id to load a cascading style sheet file, then it loads the new cascading style sheet immediately after it loads the theme-mb-structure.css file. You can replace this sequence with your own custom sequence.

To replace the sequence that Siebel Open UI uses to load cascading style sheets

1. Navigate to the following folder, and then use a JavaScript editor to open the theme.js file:

   ORACLE_HOME\siebsrvr\WEBMASTER\siebel_build\scripts\siebel\custom

2. Add the following code:

   SiebelApp.ThemeManager.addResource(
     "GRAY_TAB",
     {
       css: {
         "sbe-theme":"files/custom.css"
       }
     }
   );

   where:

   • custom.css is a .css file that includes your custom sequence. You can use any file name. For example, my-layout.css.

How Siebel Mobile Loads Cascading Style Sheets That It Displays on Tablets

Table 11 describes the sequence that Siebel Open UI uses to load Ids and cascading style sheet files when it renders the client in a tablet. It uses the SBL-MOBILE theme, by default. It loads sb_theme first, and then sbe_theme, and so on.

How Siebel Mobile Loads Cascading Style Sheets That It Displays on Phones

Table 12 describes the sequence that Siebel Open UI uses to load Ids and cascading style sheet files when it renders the client on a phone. It uses the SBL-MOBILE theme, by default.

How Siebel Mobile Loads Cascading Style Sheets That It Displays on Desktops

Table 13 describes the sequence that Siebel Open UI uses to load Ids and cascading style sheet files when it renders the client on a desktop computer. You can use ThemeRoller swatches only with Siebel Mobile. However, you can use the files that Table 13 describes to customize how Siebel Open UI loads the cascading style sheets that it displays on desktop computers for the GRAY_TAB theme. it uses the same loading sequence and Ids for all themes. Only the file names are specific to a theme.