Configuring Siebel Open UI > Customizing Siebel Open UI for Siebel Mobile > Customizing Transitions, Themes, Styles, and Colors >

Customizing List Applet Styles

This topic describes how to customize the style that Siebel Open UI uses for each control that it displays in a list applet.

To customize list applet styles

1. Modify the applet:
   1. Open Siebel Tools.

      For more information, see Using Siebel Tools.

   2. In the Object Explorer, click Applet.
   3. In the Applets list, query the Name property for the list applet that you must modify.
   4. In the Object Explorer, expand the Applet tree, expand the List tree, and then click List Column.
   5. In the List Columns list, query the Name property for the list column that you must modify.
   6. Specify the following property.

      Property	Description
      HTML Attribute	Enter the name of a class. For example, enter the following value: Class = "account-location" You can enter any value that is unique within the HTML code that Siebel Open UI uses to render this list column. The value must be unique so that the client can correctly identify this attribute.

      The HTML Attribute object type adds an HTML tag attribute to an HTML tag that the client creates when it displays the list column. In this example, the client creates an HTML tag attribute named account-location.

   7. Compile your modifications.
2. Specify the styling, and then test your modifications:
   1. Use a CSS editor to open the CSS file that Siebel Open UI uses to render the list applet.

      For example, open the theme-mb-structure-ext.css file.

   2. Specify the styling.

      In this example, you add the following code to specify the color, font, justification, and so on, for the account-location class that you specified in Step f:

   .account-location{
     color:Olive;
     font-style:italic;
     float: right;
     width: 45%;
     text-align: right;
     margin: -2.2em 0;
     color:Fuchsia;
     font-weight: bold;
   }

   3. Save, and then close the CSS file.
   4. Refresh your browser, and then make sure Siebel Open UI displays the styles that you specified.