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

Using Cascading Style Sheet Classes to Modify HTML Elements

The example in this topic configures Siebel Open UI to insert several classes that the cascading style sheet uses for HTML elements that do page layout and page composition. It attaches these classes to these elements according to the page layout and page composition that Siebel Open UI modifies. This topic describes how to modify these classes. For more information, see Cascading Style Sheet Classes.

To use cascading style sheet classes to modify HTML elements

1. Log in to the Siebel Open UI client using Google Chrome.
2. Navigate to the Account screen, and then click the Account List link.
3. Click anywhere in the Accounts List Applet.
4. Right-click just to the left of the My Accounts drop-down list, and then click Inspect Element.

   Siebel Open UI displays the HTML source code for the applet in a separate Developer Tools window. Notice that Siebel Open UI uses div elements in this code to define the user interface element. It does not use the frames that high interactivity uses.

5. Enter the following text in the search window:

   Selected siebui-applet-active

   The search window is located in the upper-right corner of the Developer Tools window. For assistance, see the screen capture in Step 6.

6. In the Matched CSS Rules pane, modify the border width and the color to the following value:

   border: 5px solid red

   Siebel Open UI dynamically modifies the applet while you modify the source HTML. For example:

   Note that this applet resides under the following s_S_A1_div div element:

   

   If you click the bottom applet, then Siebel Open UI highlights this applet and sets the class of the parent div element to s_S_A2_div. Siebel Open UI can also detach these classes in the same way.