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

Customizing Themes That Siebel Open UI Displays in Siebel Mobile Clients

The User Preferences - Behavior screen in the Siebel Mobile client allows the user to choose the theme that this client displays. Siebel Open UI comes predefined with one theme for the tablet and one theme for the phone, by default. It constrains the theme that the user can choose depending on whether the user uses a phone, tablet, or desktop computer. You can add a custom theme. The example in this topic describes how to add a custom theme named Mobile Theme Gold that Siebel Open UI displays on a tablet.

To customize themes that Siebel Open UI displays in Siebel Mobile clients

1. Create a new style sheet named theme-gold.css. Save this new file in the following folder:

   CLIENT_HOME\eappweb\PUBLIC\language_code\files\custom

   You can use any .css file that includes your custom theme. For this example, use theme-gold.css.

2. Use a JavaScript editor to open the tablettheme.js file that resides in the following folder:

   CLIENT_HOME\eappweb\PUBLIC\enu\release_number\scripts\siebel\custom

   If you must add a theme to a phone, then open the mobiletheme.js file instead of the tablettheme.js file.

3. Add the following custom theme to the file that you opened in Step 2:

   /* Adding a new custom theme */
   siebelApp.ThemeManager.addTheme(
     "theme_name",
     {
       CSS : {
         "css_id" : "files/custom/your_custom_file.css"
       }
     }
   );

   where:

   • theme_name identifies the name of your custom theme.
   • your_custom_file is a .css file that includes your custom color theme.

     For this example, use the following code:

   /* Adding a new custom theme */
   siebelApp.ThemeManager.addTheme(
     "MOBILE_THEME_GOLD",
     {
       CSS : {
         "css_id" : "files/custom/theme-gold.css"
       }
     }
   );

4. Add the new theme to the OUI_THEME_SELECTION list of values:
   1. Open Siebel Tools. Connect to the database that your Siebel Mobile application uses.

      For more information, see Using Siebel Tools.

   2. Click the Screens application-level menu, click System Administration, and then click List of Values.
   3. Right-click in the List of Values list, and then click New Record.
   4. Add the following value to the OUI_THEME_SELECTION list of values.

      Property	Value
      Type	OUI_THEME_SELECTION
      Display Value	Mobile Theme Gold
      Language-Independent Code	MOBILE_THEME_GOLD The value that you specify must match the theme name that you defined in Step 3 in the tablettheme.js file. In this example, this name is MOBILE_THEME_GOLD.
      Parent LIC	NAVIGATION_BUTTON_TABLET If you are configuring for a phone, then use NAVIGATION_BUTTON_PHONE instead of NAVIGATION_BUTTON_TABLET.

5. Test your modifications:
   1. Use a tablet to log in to the Siebel Mobile client.
   2. Click User Preferences, click Behavior, and then click Edit.
   3. Verify that the Theme field includes the following Mobile Theme Gold value:
   4. Click Mobile Theme Gold, and then click Save.
   5. Log out of the Siebel Mobile client, and then log back in to this client.
   6. Verify that the Siebel Mobile client displays a theme that is similar to the following: