Basic Branding - Dashboard Header... Continued

In my last Blog… I outlined the steps necessary to update your header image and dashboard links. Here we will update the product link color, welcome bar background color, dashboard name color, the welcome text color.


Whenever you’re making additional color changes to the header, or anywhere else in the software, keep your company color palette in mind. Pull colors from the company logo or an already header image whenever possible. So without further ado… we begin:

1. Identify a desired color and HEX color code for the welcome bar. The welcome bar is the area directly under the dashboard header image and sits behind the page tabs. This color should complement the existing header image.

2. The welcome bar has two color settings… so first open the file “PortalContent.css” and find the entry “TabTable”. Replace the existing “background-color“ HEX code with the one you identified in step 1.

3. Now open the file “PortalBanner.css” and find the entry “PortalBottomTable”. Replace the existing background-color HEX code just like step 2.

4. To change the dashboard name text color, open the file “PortalBanner.css” and find the entry “PortalName”. Replace the HEX code for “color” with one of your choice.

5. Within the file “PortalBanner.css”, do the same thing for the entry “WelcomeTextCell” to change the color of the welcome message.

6. To update the product links, find the following entries within the file “PortalBanner.css”:

a. .DashBarProductCell A,
.DashBarProductCell A:visited,
.DashBarProductCell A:link

b. .DashBarActiveProductCell A,
.DashBarActiveProductCell A:visited,
.DashBarActiveProductCell A:link

c. .DashBarActionCell A,
.DashBarActionCell A:visited,
.DashBarActionCell A:link

d. .DashBarProductCell A:hover,
.DashBarActiveProductCell A:hover,
.DashBarActionCell A:hover,
.DashBarAlertCell A:hover

e. DashBarSep

7. For each of these entries, with the exception of “DashBarSep”, you will need to add an attribute named “color” between the “{…}”. It should look like the following with “XXXXXX” being your desired HEX color code.
color: #XXXXXX;

…for entries with the color attribute already existing, simply replace the HEX code.

8. Refresh your browser to see the changes… make adjustments if needed.


You are now one step further to achieving a completely customized OBIEE. A completely branded style would include customized colors and images for:

• each page tab
• welcome text
• product links
• section colors
• table and pivot table colors
• chart colors
• ...and the list goes on and on.

If you really feel ambitious… you can do the same to the 'Answers' and 'Delivers' areas of the software. Realistically, it isn’t feasible for a do-it-yourself-er to spend the time to identify each individual setting and redesign every detail. It would probably take months… or even years just to find everything.

Some consulting firms who implement OBIEE will do a certain level of branding, if requested. BI Consulting Group advertises a service specific to branding called IDENTITY. They have even developed a tool that pinpoints and links to each of the 20+ CSS files where the bulk of these changes are made.

Check back for future updates where I’ll cover steps on customizing other areas of OBIEE.