Branding - LESS is MORE

Experience has shown me that, when people start learning how to change skins and style attributes in OBIEE, they tend to go overboard. There are literally thousands of Cascading Style Sheet elements that make OBIEE look and feel the way it does.

Additionally, it’s extremely difficult to locate certain elements, and many times you end up resorting to a trial and error strategy. I think once someone discovers an element where they can change a text font, or modify a background color, they do it.

Eventually, someone really digging into these skins and style sheets are going to come across a whole list of changes they can make… and they will probably make them. My thought is that, just because something can be changed, doesn’t mean that it should be changed.

With that said, here are some guidelines to follow when attempting to brand OBIEE:

• Identify an inspiration source (company website, intranet, presentation template, etc…)


• Create a color scheme before starting the branding process… stick with it (or as close as you can)


• Follow the leader. There is no need to re-invent the wheel. Try to change existing colors verses introducing colors where they don’t belong.


• Keep a neutral backdrop. It’s ok to leave white space on the screen… Google is a great example.


• Many skins/style changes will effect more than one element in OBIEE… beware!


• Periodically save a copy of the skins/styles folders as you go. Keep multiple versions on file so you can revert back to them any point in the design process. (ex. s_ver1, s_ver2, s_ver3, etc…)


• Be creative and experiment… just don’t go overboard

These are simply guidelines and not meant to be rules since branding is a creative process. Just keep in mind that this is something everyone in your organization has to look at and use on a daily basis. It’s probably a good idea to get a second opinion at checkpoints during the design process. But try to limit the amount of input, as too many ideas can become overwhelming.

For additional assistance with branding, visit BI Consulting Group’s website. There is an entire service offering dedicated specifically to Branding OBIEE called Identity. They have even developed a tool to help identify certain style elements, and where to change each setting.

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.

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.

Basic Branding - Dashboard Header

There’s a lot of talk… and confusion... surrounding the topic of branding OBIEE. There obviously isn’t much in regards to documentation as Oracle doesn’t make it a priority to show companies how to erase the Oracle name from their own product. But since I don’t really care about any of that… I’ll share some of what I know.

I’m going to outline a few simple steps you can use to change your OBIEE dashboard header. Keep in mind that this is just one of many steps required to achieve a completely branded environment. The following is a step by step guide designed to get you started:



1. Open the image file bg_header.jpg using an image editing software like Photoshop, or Fireworks. In 10.1.3.3, the location is within \OracleBI\web\app\res\s_oracle10\b_mozilla_4.

2. Modify the image as desired, but be sure to maintain the image size. I also recommend using a similar layout as the original image, as the dashboard links tend to get lost if the logo or background image is too busy. You can also crop screenshots from your company website to capture certain designs or themes.

3. Save or export this file with the same name (bg_header.jpg). Save a copy of the orginial file under a different name to revert back to if needed.

4. Depending on the color of you new header, you may need to change the color of the dashboard links located at the top center of the header. Using the Image editing software, identify the HEX code for your desired color. (white = FFFFFF, Black = 000000)

5. Open the file PortalBanner.css, and find the following entries:

• PortalLink:visited
• PortalLink:hover
• PortalLink:link
• PortalLink:active
• CurrentPortal:link/visited/hover

6. Each of these 5 entries will have an attribute listed under names “color”. Each entry is displayed depending on the link status (visited, hover, current…etc.). The default color is the same for each situation, but you can play with these setting if you want. All you need to do is insert your new color code in place of the existing one.

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


You have now completed the most basic tasks needed to brand your version of 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.