OBIEE 11g Portal Customization

In order to best deliver an intuitive and interactive end-user experience, architecture and UI elements have been redesigned from the ground-up in Oracle Business Intelligence Enterprise Edition 11g Release (Oracle BIEE). The 11g UI is dynamically generated using scripts which makes it highly customizable as per client’s needs and standards. This blog post illustrates the methodology and steps used to deploy custom styles, skins and messages in Oracle BIEE 11g.

The look and feel of Oracle BIEE are controlled by Skins, Styles and Messages. Skins define the UI chrome outside the home and dashboard area (e.g. toolbar). Styles control the appearance of a dashboard and various views (e.g. font in a pivot table view). Messages store the text for various UI elements (e.g. brand name). So for changing the login page, home page and dashboard page of OBIEE portal we need to make changes to the following locations/files:

Changes to be Made to the Login Screen

By default the OBIEE login screen looks like:

Let as assume, as per requirement we have to:

• Replace the Oracle logo at top left with Client logo
• Change the ‘Business Intelligence’ text beside the logo to black in color from blue
• Change the ‘Sign In’ text to black in color from blue
• Change the background shades from blue to grey

Step 1: Replace the Oracle logo at top left with Client logo

a. Go to the directory /u01/mw/instances/instance1/bifoundation/OracleBIPresentationServicesComponent/coreapplication_obips1/analyticsRes/sk_****/login in the BI server and replace the oracle_logo.png image with the client logo in same format. Make sure the dimension of the new logo is identical to that of the original logo (119*25 pixels).

b. Also go the directory /u01/mw/Oracle_BI1/bifoundation/web/msgdb/messages, take the back up of logoncontrolmessages.xml file and update the same as:

<td id=”logoCell” class=”logo” width=”125” valign=”middle” height=”30“><img alt=”@{system.productVersion}” title=

“@{system.productVersion}” src=”fmap:login/oracle_logo.png” width=”125” border=”0″ height=”30“/></td>

From

<td id=”logoCell” class=”logo” width=”119” valign=”middle” height=”25“><img alt=”@{system.productVersion}” title=”@{system.productVersion}”

src=”fmap:login/oracle_logo.png” width=”119” border=”0″ height=”25“/></td>

c. Make sure to place the updated xml to the custom messages directory:

/u01/mw/instances/instance1/bifoundation/OracleBIPresentationServicesComponent/coreapplication_obips1/analyticsRes/customMessages/l_en/messages

Step 2: Change the ‘Business Intelligence’ text beside the logo to black in color from blue

Go to the directory /u01/mw/instances/instance1/bifoundation/OracleBIPresentationServicesComponent/coreapplication_obips1/analyticsRes/sk_****/login open the login.css file and replace

.appname{font-family:tahoma,verdana,geneva,arial,helvetica,sans-serif;font-size:17px;font-weight:bold;color:#093E7D

by

.appname{font-family:tahoma,verdana,geneva,arial,helvetica,sans-serif;font-size:17px;font-weight:bold;color:#000000

Step 3: Change the ‘Sign In’ text to black in color from blue

Go to the directory /u01/mw/instances/instance1/bifoundation/OracleBIPresentationServicesComponent/coreapplication_obips1/analyticsRes/sk_****/login open the login.css file and replace

loginlabel{margin:0;padding:0 0 10px 0;font-family:tahoma,verdana,geneva,arial,helvetica,sans-serif;font-size:14px;font-weight:bold;color:#093E7D;}

by

loginlabel{margin:0;padding:0 0 10px 0;font-family:tahoma,verdana,geneva,arial,helvetica,sans-serif;font-size:14px;font-weight:bold;color:#000000;}

Step 4: Change the background shades from blue to grey

Go to directory /u01/mw/instances/instance1/bifoundation/OracleBIPresentationServicesComponent/coreapplication_obips1/analyticsRes/sk_****/login and edit the image file named background_blue_whitegradient_.png (edit the image and change the color of the image from blue-white to shades of grey)

Once these changes are done RESTART THE PRESENTATION SERVICES and CLEAR THE INTERNET CACHED. See the changes being applied.

 

Changes to the Signing in Screen

When the user logs in to the portal after entering his/her credentials the screen momentarily looks like this:

Here couple of changes are to be made

• Replace the Oracle logo ‘O’ with Client logo
• Change the ‘Signing in…’ text beside the logo to black in color from blue.

 

Step 1: Replace the Oracle logo ‘O’ with Client logo

Go to directory /u01/mw/instances/instance1/bifoundation/OracleBIPresentationServicesComponent/coreapplication_obips1/analyticsRes/sk_****/login and replace the signing_in.gif image with the new Client image (with identical dimension of course).

 

Step 2: Change the ‘Signing in…’ text beside the logo to black in color from light blue

Go the same directory i.e. /u01/mw/instances/instance1/bifoundation/OracleBIPresentationServicesComponent/coreapplication_obips1/analyticsRes/sk_****/login, open login.css and replace the part:

.signingin{margin:0;padding:15px 15px 15px 15px;font-family:tahoma,verdana,geneva,arial,helvetica,sans-serif;font-size:16px;font-weight:bold;color:#9cacc9;}

by

.signingin{margin:0;padding:15px 15px 15px 15px;font-family:tahoma,verdana,geneva,arial,helvetica,sans-serif;font-size:16px;font-weight:bold;color:#000000;}

Again restart the presentation services and clear the internet cache and try logging into the portal, the screen will look like:

Changes to be Made to the Home Page After Logging in

By default the OBIEE home page looks like:

Let’s say we have to:

• Replace the Oracle logo at top left with Client logo
• Change the ‘Business Intelligence’ text beside the logo to black in color from blue
• Change of background color in the homepage header from blue and white to black and white.
• Change the Header Separator color to grey from light blue
• Change the Header Spacer Background color from light blue to grey
• Replace the oracle status logo at top right beside sign out button disappear.

Step 1: Change the ‘Signing in…’ text beside the logo to black in color from light blue.

Go to /u01/mw/instances/instance1/bifoundation/OracleBIPresentationServicesComponent/coreapplication_obips1/analyticsRes/sk_****/b_mozilla_4 and replace the Oracle_logo.png image with the new Client logo. Sizes and dimension must remain the same.

 

Step 2: Change the ‘Business Intelligence’ text beside the logo to black in color from blue.

Go to /u01/mw/instances/instance1/bifoundation/OracleBIPresentationServicesComponent/coreapplication_obips1/analyticsRes/sk_****/b_mozilla_4, open the common.css file and put

.HeaderBrandName{font-size:14px;font-weight:bold;font-family:Tahoma;position:absolute;left:130px;top:2px;color:#000000

in place of

.HeaderBrandName{font-size:14px;font-weight:bold;font-family:Tahoma;position:absolute;left:130px;top:2px;color:# 093E7D

 

Step 3: Change of background color in the homepage header from blue and white to black and white.

Go to /u01/mw/instances/instance1/bifoundation/OracleBIPresentationServicesComponent/coreapplication_obips1/analyticsRes/sk_****/b_mozilla_4, open the common.css file and change the background color for, “.HeaderContainer”. Note the beginning period in the string.  Change the background color to black which is:  #000000. Also search and find “.HeaderMenuBarText”, below that find, “.HeaderSearchGo and change color to white which is:  #FFFFFF

 

Step 4: Change the Header Separator color to grey from light blue.

Go to /u01/mw/instances/instance1/bifoundation/OracleBIPresentationServicesComponent/coreapplication_obips1/analyticsRes/sk_****/b_mozilla_4, open the common.css file and replace

.HeaderBarSeparator{font-size:1px;height:1px;margin-bottom:2px;text-align:right;border-top:1px solid #61A1EF;margin-left:-5px;}

by

.HeaderBarSeparator{font-size:1px;height:1px;margin-bottom:2px;text-align:right;border-top:1px solid #A0A0A0;margin-left:-5px;}

 

Step 5: Change the Header Spacer Background color from light blue to grey.

Go to /u01/mw/instances/instance1/bifoundation/OracleBIPresentationServicesComponent/coreapplication_obips1/analyticsRes/sk_****/common, create a back up file of header_spacer_bg.gif and change the color of the image from blue to grey

Step 6: Replace the Oracle status logo at top right beside sign out button disappear.

Go to /u01/mw/instances/instance1/bifoundation/OracleBIPresentationServicesComponent/coreapplication_obips1/analyticsRes/sk_****/common and replace the page_lev_connected.gif with an image filled up with black color.