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

Customizing the Logo

Starting with Siebel CRM versions 8.1.1.11 and 8.2.2.4, Siebel Open UI defines the logo that it displays in the client in CSS files instead of coding the logo in a web template. It uses the following predefined code to display the logo in the Gray and Tangerine themes:

.siebui-logo {
  margin-top: 8px;
  margin-left: 2px;
  background-image: url('../images/ebus.gif');
  width: 106px;
  height: 16px;
}

You can configure Siebel Open UI to override this code, or you can create your own custom theme so that you can display a custom logo. You can configure Siebel Open UI to display a separate logo in each theme. For more information about overriding an existing theme, or adding a new theme, see Customizing Transitions, Themes, Styles, and Colors and Open UI Deployment Guide (Article ID 1499842.1) on My Oracle Support.

To customize the logo

1. Create a JPG file that includes your custom logo.

   For example, my-logo.jpg.

2. Copy the file you created in Step 1 to the following folders:

   ORACLE_HOME\ses\siebsrvr\WEBMASTER\images\language_code\custom
   CLIENT_HOME\eappweb\PUBLIC\language_code\images\custom

3. Use an editor to open your custom CSS file that resides in one of the following folders:

   ORACLE_HOME\ses\siebsrvr\WEBMASTER\build_number\scripts\siebel\custom
   CLIENT_HOME\eappweb\PUBLIC\language_code\build_number\scripts\siebel\custom

   For example, open the my-style.css file.

4. Add the following code:

   .siebui-logo {
     background-image: url('../../images/custom/my-logo.jpg')
   }

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

   scripts\siebel\custom\

   If you are customizing a Siebel Mobile application, then open the mobiletheme.js instead of the theme.js file.

6. Add the following code:

   SiebelApp.ThemeManager.addResource (
     "GRAY_TAB",
     {
       css: {
         "sce-theme": "files/custom/my-style.css"
       }
     }
   );

   If you are customizing a Siebel Mobile application, then replace GRAY_TAB with SBL-MOBILE in this code.

7. (Optional) Modify the logo attributes, as necessary:
   1. Use an editor to open your custom structure CSS file.

      For example, my-structure.css.

   2. Add you custom code.

      Siebel Open UI uses the following predefined code to specify the logo attributes:

   .siebui-logo {
     float: left;
     white-space: nowrap;
     width: 50px;
     height: 50px;
   }

   You can modify each of these attributes, as necessary. For example, you can modify the following width and height attributes to decrease the width and height of the logo to accommodate your custom logo image:

   .siebui-logo {
     width: 25px;
     height: 25px;
   }

   3. Add the following code to the JavaScript file that you edited in Step 5:

   SiebelApp.ThemeManager.addResource (
     "GRAY_TAB",
     {
       css: {
         "sbe-theme": "files/custom/my-structure.css"
       }
     }
   );

   If you are customizing a Siebel Mobile application, then replace GRAY_TAB with SBL-MOBILE in this code.

8. Log in to the client and verify that Siebel Open UI replaces the Oracle logo.