Cosmetic UI Changes

Cosmetics may be a weapon of women but it is always better to look over rather than over looked. Siebel OOB comes with a soothing look and feel but still it may not fit into coloring schemes. In this post we will discuss about some basic UI modifications.

Statutory Warning: Please take backup of existing files before you play around.

1 - Changing Oracle logo
This is the foremost change which should be done. lookout for the "CCFrameBanner.swt" template file and modify below code to suit your requirement.

<td align="right"><a href="http://www.oracle.com" target="_blank" ><swe:image name="POWERED_BY" category="HTML Control Icons"/></a></td>

Change this code to below code

<td align="right"><a href="http://YOURURL.com" TARGET="_blank"><img src = "images/YOURIMAGE.jpg" height ="30"></a></td>

2 - Changing login screen

In order to determine the positioning of the items on the login screen or change the graphics that appear on the login screen one has to modify web template file "SWELogin.swt". This web template file determines the layout of the web page items on the login screen.

3 - Changing Menubar color 

The menubar color can be changed by changing the jmenubar.js file.Background color of menubar is hard coded in the "jmenubar.js" file. Below attributes can be changed for desired appearance.

var MENUBAR_BGCOLOR = "#FF6633";

var MENUBAR_TEXTCOLOR = "#FFFFFF";

var MENUBAR_HIGHLIGHT_COLOR = "#FFFFFF";

var MENUBAR_SHADOW_COLOR = "yellow";

4 - Changing Screen Bar 

The screen tab are now implemented as java controls in Siebel 7.8. Their appearance is determined by the settings in the file jctrls.css. Below section controls the appearance of screen bar.

.clsScreenBar

{

   NC-TAB-BACKGROUND-COLOR: #333399;

   NC-TAB-BACKGROUND-COLOR-SELECTED: #F0F0F0;

   NC-TAB-BACKGROUND-COLOR-MOUSE: #F0F0F0;

   NC-TAB-FONT-COLOR: #FFFFFF;

   NC-TAB-FONT-COLOR-SELECTED: #333399;

   NC-TAB-FONT-FAMILY: Arial;

   NC-TAB-FONT-SIZE: 15;

   NC-LINK-FONT-FAMILY: Arial Black;

   NC-LINK-FONT-SIZE: 18;

   NC-LINK-FONT-COLOR: #333399;

   NC-LINK-FONT-COLOR-SELECTED: #333399;

}

5 - Changing view bar

Their appearance is determined by the settings in the file jctrls.css. Below section controls the appearance of view bar. 

.clsSubDetailView

{

   NC-TAB-BACKGROUND-COLOR: #466FB4;

   NC-TAB-BACKGROUND-COLOR-SELECTED: #F0F0F0;

   NC-TAB-BACKGROUND-COLOR-MOUSE: #000000;

   NC-TAB-FONT-COLOR: #FFFFFF;

   NC-TAB-FONT-COLOR-SELECTED: #333399;

   NC-TAB-FONT-FAMILY: Tahoma;

}

6 - Changing Background Color of selected row 

Again this could be easily achieved by changing settings in jctrls.css file. Below section controls it.

.clsJLCMain

{

JBACKGROUND-COLOR-ROW-ACTIVE: #FFFFFF;

}

One can definitely change applet and view layouts by changing underlying web templates.There is no second chance to create first impression so better have a good looking UI. 

Happy Beautification!!