Friday 1 February 2013

How to change the Dashboard Header background colour





This is the first of a number of posts I'll be making about altering the look and feel of OBIEE 11g.

The official method is to create new skins, however this is quite complex if you only want to make a few tweaks, so below is the first example of workarounds to make minor changes. This requires changing original OBIEE installed files, so be sure to make a backup of any files before altering them.
 

This tutorial will show how to change the background colour of the header section of the dashboard from the default blue:              


 To another colour:



This is just a minor change to a single file – common.css.  The catch is there are four copies of this file so you need to repeat the change in all four.

The four files are located in the following directories:

OBIEE_HOME\Oracle_BI1\bifoundation\web\app\res\sk_blafp\b_mozilla_4


OBIEE_HOME\Oracle_BI1\bifoundation\web\app\res\sk_blafp\b_mozilla_4\rtl


OBIEE_HOME\user_projects\domains\bifoundation_domain\servers\bi_server1\tmp\_WL_user\analytics_11.1.1\7dezjl\war\res\sk_blafp\b_mozilla_4


OBIEE_HOME\user_projects\domains\bifoundation_domain\servers\bi_server1\tmp\_WL_user\analytics_11.1.1\7dezjl\war\res\sk_blafp\b_mozilla_4\rtl

Note it’s actually the common.css file in the third of these directories which immediately affects the dashboard, so test different colours and shades with this file first before altering the others.

Take a backup copy of these files before you begin.

Edit the common.css file from the first directory in a text editor.

Unfortunately these files have their entire contents on one line, so it’s a little difficult to read.



Search for the text           .HeaderContainer



The first parameter in the .HeaderContainer section is the background colour. You just need to change this to the colour you require.

#0D4988 is the default blue colour.

You can use any hex colour code. e.g. #980C13 for dark red or #008040 for green

Finally once the files are saved refresh the browser cache by using control-F5 to reload the files and the colour should change.


6 comments:

  1. Hi,

    Good Post..when i am try to change colors in my dashboards i can't find the common.css files in both locations.

    OBIEE_HOME\user_projects\domains\bifoundation_domain\servers\bi_server1\tmp\_WL_user\analytics_11.1.1\7dezjl\war\res\sk_blafp\b_mozilla_4


    OBIEE_HOME\user_projects\domains\bifoundation_domain\servers\bi_server1\tmp\_WL_user\analytics_11.1.1\7dezjl\war\res\sk_blafp\b_mozilla_4\rtl


    In my system i found this path only.
    OBIEE_HOME\user_projects\domains\bifoundation_domain\servers\bi_server1\tmp

    After that no floders...

    Any help....

    ReplyDelete
  2. Abhi,

    first thing to check...are the sub-folders hidden? - check you can see hidden folders in explorer.

    if still no joy perform a search for the common.css file - perhaps the _WL_user directory is located somewhere different in your installation.

    Paul.

    ReplyDelete
  3. Hello Paul,
    I followed all the steps you mentioned, but i couldn't see any changes. Its still the default blue color.

    can you please let me know if I am missing something.

    Thanks,
    Kumar

    ReplyDelete
  4. HI Paul,

    Above steps are not worked for me also.plz let me know if there are any changes.

    Many Thanks,
    Chaitanya.A

    ReplyDelete
  5. I think its home.css in the newer version?

    ReplyDelete
  6. do you know how to change dashboard logo?please reply to my email sumbzz@gmail.com..thank you^^

    ReplyDelete