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

Customizing jQuery Color Swatches That Siebel Open UI Displays in Siebel Mobile Clients

This topic describes how to use ThemeRoller to customize the color swatch that Siebel Open UI displays in Siebel Mobile clients. A color swatch is a jQuery Mobile user interface element that includes a header bar, content body, and button states. ThemeRoller is a jQuery Mobile tool that allows you to create color swatches.

Siebel Open UI uses the following items to define the style in a Siebel Mobile client:

• Structure. Defines web page layout.
• Swatches. Defines the color swatches in ThemeRoller format.
• Style. Provides style refinement capabilities.

Siebel Open UI uses the following file to define the structure of the JQM style, starting with Siebel CRM versions 8.1.1.11 and 8.2.2.4:

jquery.mobile.structure-1.3.0.min.css

Siebel Open UI does not include the default JQM swatches. Instead, it uses the default Siebel Mobile swatches that the theme-mb-swatches.min.css file contains. These files replace the jquery.mobile-1.1.1.min.css file that Siebel Open UI uses in versions before Siebel CRM versions 8.1.1.11 and 8.2.2.4.

To customize color schemes that Siebel Open UI displays in Web pages

1. Open version 1.3.0 of the following jQuery Mobile ThemeRoller website:

   http://jquerymobile.com/themeroller/?ver=1.3.0

2. Create six swatches lettered A through F, each of which uses a different color scheme.

   For example:

   For an alternative to creating these swatches, see Importing Predefined Siebel Open UI Swatches to ThemeRoller.

3. Click Download.
4. In the Download Theme dialog box, enter in a name in the Theme Name field, and then click Download Zip.

   You can specify a name for the theme, such as my-swatches. Note that this name is different than the name of the zip file that you download. jQuery Mobile ThemeRoller automatically creates the name of the zip file and adds the following prefix to it:

   jquery-mobile-theme-

5. Unzip the file that you downloaded in Step 4.
6. Open the following folder of the file that you unzipped in Step 5:

   themes

7. Note the following items that reside in the themes folder:
   • images subfolder
   • my-swatches.css file
   • my-swatches.min.css file
8. Copy the CSS files that you noted in Step 7 to the folder that Siebel Open UI uses for cascading style sheets.

   For example, copy these items to the following folder that resides in the Mobile Web Client client:

   CLIENT_HOME\PUBLIC\language_code\files

   For more information about the folders that you can use to store your customizations, see Organizing Files That You Customize.

9. Copy the images that reside in the images folder to the image folder that your Siebel installation uses.

   For example, the Mobile Web Client uses the following folder:

   CLIENT_HOME\PUBLIC\language_code\images

10. Use an editor to open the my-swatches.min.css file.
11. Replace each occurrence of images with the following:

    ../images

12. Replace the theme-mb-swatches.min.css file with the my-swatches.min.css file:
    1. Open the folder that Siebel Open UI uses for cascading style sheets, and then make a backup copy of the theme-mb-swatches.min.css file.
    2. Rename the my-swatches.min.css file that you copied in Step 6 to theme-mb-swatches.min.css.

       If you prefer not to replace the theme-mb-swatches.min.css file, then do the following work:

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

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

    • Add the following code:

    SiebelApp.ThemeManager.addResource(
      "SBL-MOBILE",
      {
        css : {
          "ss-theme" : "files/my-swatches.min.css"
        }
      }
    );

13. Log in to the Siebel Open UI client, and then clear the browser cache.
14. Make sure Siebel Open UI displays the new color schemes.

Importing Predefined Siebel Open UI Swatches to ThemeRoller

This topic describes how to import the predefined swatches that Siebel Open UI uses to use ThemeRoller instead of creating them from scratch in Step 2.

To import predefined Siebel Open UI swatches to ThemeRoller

1. Use an editor to open the theme-mb-swatches.css file, and then copy the contents of this file to the clipboard.

   The theme-mb-swatches.css file is the compressed version of the theme-mb-swatches.min.css file. It resides in the following folder:

   CLIENT_HOME\PUBLIC\language_code\files

2. Use a web browser to navigate to the following website:

   http://jquerymobile.com/themeroller/?ver=1.3.0

3. Click Import.
4. Paste the contents of the clipboard into the window in the Import Theme dialog box.
5. Click Import.
6. Modify the results, as necessary.

Swatches That Siebel Open UI Displays in Siebel Mobile Clients

Table 22 describes the swatches that Siebel Open UI displays in Siebel Mobile clients.

Swatches That Siebel Open UI Displays in List Applets

Figure 40 includes an example of the swatches that Siebel Open UI displays in the Accounts list.

Figure 40. Swatches That Siebel Open UI Displays in List Applets

Swatches That Siebel Open UI Displays in Form Applets

Figure 41 includes an example of the swatches that Siebel Open UI displays in the Account form.

Figure 41. Swatches That Siebel Open UI Displays in Form Applets

Swatch That Siebel Open UI Displays in Grids

Figure 42 includes an example of the swatch that Siebel Open UI displays in a grid.

Figure 42. Swatch That Siebel Open UI Displays in Grids

Swatch That Siebel Open UI Displays in Pop-Up Objects

Figure 43 includes an example of the swatch that Siebel Open UI displays in a pop-up object.

Figure 43. Swatch That Siebel Open UI Displays in Pop-Up Objects