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

Using Cascading Style Sheets to Modify Position, Dimension, and Text Attributes of an Object

The example in this topic describes how to modify the cascading style sheet. You move the Predefined Query (PDQ) to a different location and you modify the text color of the Predefined Query.

To use cascading style sheets to modify position, dimension, and text attributes of an object

1. Log in to the Siebel Open UI client using Google Chrome.
2. Right-click the Saved Queries label on the menu bar, and then click Inspect Element.
3. Enter the following text in the search window:

   PDQToolbarContainer

   For assistance, see the screen capture in Step 6.

4. In the main window of the Developer Tools window, expand the form and div elements that occur immediately below the element you located in Step 3, if necessary. For example:
5. Move the div element that defines the Predefined Query to a different location:
   1. Click in the Styles pane that the Developer Tools displays to the right of the main window.
   2. Add the position, top, and left attributes to the element.style block that the Developer Tools displays in the Styles pane.

      To enter these attributes, click anywhere after the left brace ( { ), and then start typing.

      When you add these values, you modify the position, top and left properties of the PDQToolbarContainer class. Siebel Open UI applies any modification you make to a class to all elements that use the same class property.

      For example, add the following attributes:

   element.style {
     position: fixed;
     top: 38px;
     left: 270px;
   }

   Use the following screen capture for assistance:

   3. Verify that Siebel Open UI positions the Predefined Query drop-down list below and to the right of the application-level Help menu.
6. Modify the text color of the Predefined Query label:
   1. Enter the following text in the search window:

   PageItemLabel

   2. In the main window of the Developer Tools window, click the PageItemLabel code line.
   3. Click in the Matched CSS Rules section of the Styles pane.
   4. Modify the color to red.