Branding - Dashboard Page Tabs

One of the most dramatic changes you can make to the dashboard design is the Page Tab color. In my opinion, this is where you really start geting the impression you’re working with a truly customized version of the software. I say this assuming there has already been a significant amount of customization done on the dashboard header. There has to be some level of congruence maintained. Modifying the page tabs, without a previously customizing the header to match would make it seem awkward and out of place.


Unfortunately, it’s not a simple process. There are multiple image files that need to be changed, consistencies that need to be maintained between these image files, and a handful of HTML modifications to go with it.
Fortunately, I know exactly what needs to be done… and plan to share it with you now.

Before you begin, you’ll need to choose a color for your “selected” an “not-selected” tabs. I suggest sticking with the “out of the box” theme of having your selected tab the same tone, but a slightly darker shade than the unselected tabs. Each tab (selected and not-selected) is made up of 2 images each, making a total of 4 image modification necessary to complete this task. Be sure to make copies of the original image files so you can revert back in the event of a mistake.

1. Open the file “bg_tab.gif” using an image editing software like Photoshop, or Fireworks.

2. Adjust the Hue, Contrast, and Lightness settings until you achieve your desired “Selected” tab color (be sure to document the exact setting adjustments as you’ll need them in the next step. Save the file.

3. Open the file “subtabr.gif” and apply the EXACT same setting adjustments made in step 2. Save the file.

4. Repeat steps 1-3 with the files “bg_dim_tab.gif” and “subdimtabr.gif” using the “Not-Selected” tab color you’ve already chosen.

5. To change the text color within the Selected tab, you’ll need to adjust the HEX color code (“color: #XXXXXX;”) within the file “PortalContent.css”, for the label - TabHiFont

6. To change the text color within the Not-Selected tabs, you’ll need to adjust the HEX color code (color: #XXXXXX;) within the file “PortalContent.css”, for the following labels:

TabDimFont:link

TabDimFont:visited

TabDimFont:hover

I suggest choosing a text color slightly less bold than the “Selected” tab text color. I also recommend choosing a different color to utilize the hover functionality. Choose either Black (#000000) or white (#ffffff) for the label “TabDimFont:hover”

The final task is to set the color of the Tab Line to match the darkest color of the “Selected” tab. The goal here is to make the bottom color of the “Selected” tab seamlessly blend into the tab line.

7. Open the file “bg_tab.gif” you modified in step 2. Identify the HEX color code of tab at its bottom most point. Remember this code.

8. Open the file “PortalContent.css”, and find the entry “TabLineCell”. Edit the entry to look just like the example shown here, with “XXXXXX” being the HEX color code you identified in step 5.

.TabLineCell {background-color: #XXXXXX;}

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

You may need to repeat steps 1 – 6 a few times until you achieve the exact feel you’re looking for. Just for fun, play around with making the “Selected” tabs a completely different color than your “Not-selected” tabs, or vice versa. You’ll be amazed at the difference it’ll make.


If you really feel ambitious… you can do the same to the 'Answers' and 'Delivers' Page Tabs and style settings. 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.