Siebl Open UI - Theme Changes 8.1.1.11

The best thing in Siebel Open UI is, it supports Javascript and JQuery. In this particular post I will do few of the changes in the application UI.

To do the Theme Changes in 8.1.1.10 click here

Below is the screen shot showing the vanilla application.


After the changes the application would look something as below



Steps to be followed
1.  Create a css file Dashboard.css
(save the css file in files/custom/dashboard/ path)
this would help to easily maintain the CSS changes.

2. Include the theme.js file  as below
(note : OOTB would provide a theme.js file in custom folder)
a. Create a record in SiteMap->Application Administration->Manifest Files
        siebel/custom/theme.js                 



   b. Update the Manifest Administration Screen as below.



3. Open theme.js file and add the below piece of code
  SiebelApp.ThemeManager.addResource(
    "GRAY_TAB",
    {
       css : {
                  "DashboardCSS" : "files/Custom/DashboardCSS/Dashboard.css"
                   // Specify the full path that the file was created in step 1
             }
    }
  );

4. Now make the changes in the Dashboard.css, I did the below changes to achieve the look and feel
#_sweappmenu > div{
background: #FFFFFF;
}

.header-middle #logo{
height : 30px;

}

.bannerDiv a, .ui-menubar .ui-menubar-link{
color : #000000;
}

.PDQToolbarContainer
{
color: #000000;
}



Comments

Popular posts from this blog

Siebel - DeleteRecord Method in eScript

How to call a Business Service from a PM/PR file in Siebel Open UI

Siebel Business Service Part-4