Skins   and   Styles     
       
          Customizing Skins and Styles  

 

 

 

Introduction

 

Oracle’s default user interface, with its varying shades of pastel blue, is certainly attractive, but most businesses will have their own livery, and many will expect the visual appearance of OBIEE applications to conform to the corporate standard.

 

Customization of user interface appearance, rather than user interface content, is based on customizing “skins” and “styles”, both of which make use of CSS styles and images.  The difference between the two is that a style is used to customize a dashboard – if required, different dashboards can have different styles – whereas a skin is used to customize everything else, Answers, Delivers, and the Administration screens.

 

Oracle discusses customization in chapter 10 of the “Oracle Business Intelligence Presentation Services Administration Guide”.  Unfortunately, the instructions given are there incomplete, and, for example, won’t work for a J2EE implementation.

 

 

Skins and Styles – Usage

 

The starting point, particularly if you’re taking over the development of an existing OBIEE application, is to determine what customization, if any, is already present in the application.  There are three areas within OBIEE that merit examination:

 

*  Dashboard Properties

*  Configuration File

*  Resource Directories

 

Dashboard Properties

 

Log into the Presentation Services and navigate to “Settings => Administration => Manage Interactive Dashboards”.  When the “Manage Dashboards” window appears, click on the “Properties” icon for one of the dashboards to display the “Dashboard Properties” window, and then expand the “Style” drop-down box.  With a default installation, it will look like this:

*
Available Dashboard Styles

 

Different styles can be applied to different dashboards, and by default there are three available styles, “oracle10”, “hyperion”, and “Siebel77”, of which “oracle10” is the default.

 

If you see any other styles listed in the “Style” drop-down, then OBIEE has already been customized, even if the style is not currently in use (you’ll need to check all the dashboards to determine if the custom style is in use).

 

Configuration File

 

Edit the Presentation Services configuration file, “instanceconfig.xml”, in directory “<OracleBI Data Home>\web\config”.  If you find any tag sets beginning with:

 

*  <DefaultStyle>

*  <DefaultSkin>

 

then the application has been customized (the value of the “DefaultStyle” tag set should match the default value that you found in the dashboard “Style” drop-down box).

 

With a default installation these tag sets will be absent from “instanceconfig.xml”.

 

Resource Directories

 

Three directories are involved in customizing OBIEE skins and styles:

 

*  <OracleBI Home>\web\app\res

*  <OracleBI Home>\oc4j_bi\j2ee\home\applications\analytics\analytics\res

*  <OracleBI Data Home>\web\res

 

Now, this is where it can get complicated.  Which directories are present and which directories are used will depend on your OBIEE configuration – for example, J2EE is different from IIS.  Even for a single configuration, directory usage may not be consistent, which could lead to intermittent problems.

 

For a default J2EE installation, the first two directories contain the same set of files, while the third is empty:

*
Master Resource Directory
*
J2EE Resource Directory
*
Data Resource Directory

 

In these directories, files that begin with “s_” are dashboard style directories, while those that begin with “sk_” are skin directories.  Any custom directories that you create should follow the same naming conventions.  Directory names are case sensitive and cannot contain an underscore, apart from the underscore that is part of the directory name prefix.  When directories are referenced within tags pairs in the “instanceconfig.xml” file or when they are displayed in the dashboard properties “Style” drop-down, the prefix is omitted.

 

 

Setting Up Custom Skins and Styles

 

The first step is to backup the contents of the “res” directories, as a disaster prevention measure.

 

Then take a copy of the “s_oracle” and “sk_oracle” directories, rename them as appropriate, and place them under version control according to whatever development methodology that you use.  In the present case, we’ll call the renamed directories “s_custom” and “sk_custom”.

 

Use your version control software or write a simple batch script to copy both custom directories as subdirectories in all the “res” directories that exist for your OBIEE configuration.  You may get away with less, but by doing so you’ll cover all configuration options and ensure that the correct files can be picked up from any of the resource directories.  In the case of our example, after copying the custom files directory

 

*  <OracleBI Home>\oc4j_bi\j2ee\home\applications\analytics\analytics\res

 

appears as follows:

*
Customized J2EE Resource Directory

 

Now edit the Presentation Services configuration file, “instanceconfig.xml”, in directory “<OracleBI Data Home>\web\config”.  Add lines for the “DefaultStyle” and “DefaultSkin” tags as follows (note the absence of the “s_” and “sk_” directory name prefixes):

*
Instanceconfig.xml with Skin and Style Tags

 

With these changes in place the custom skin and style will be used by default.

 

When you make changes to the custom directories you’ll need to restart various OBIEE services for the changes to become visible.  What you need to restart will depend on your configuration.  Rebooting the entire server is the best option, but restarting one or more of “Oracle BI Presentation Server”, “Oracle BI Java Host”, and “OC4J” may also work.

 

To confirm that OBIEE has picked up the new defaults, log into the Presentation Services and navigate to “Settings => Administration => Manage Interactive Dashboards.  When the “Manage Dashboards” window appears, click on the “Properties” icon for one of the dashboards to display the “Dashboard Properties” window, and then expand the “Style” drop-down box.  With the customization in place it will look like this:

*
Customized Dashboard Style - Default

 

If you didn’t want the custom style to be the default, but simply to be added to the “Style” drop-down list, then you would omit the “DefaultStyle” tag line from “instanceconfig.xml”, and the “Style” drop-down list would look like this:

*
Customized Dashboard Style - Non-Default

 

 

Testing

 

Now we want to make a change to a CSS file and verify that the change is being picked up by OBIEE.  Logon to the Presentation Services and display a dashboard:

*
Default Dashboard Livery

 

For example, let’s change the background colour from white to “Financial Times” pink.  In the case of a J2EE implementation, OBIEE reads its CSS files from directory:

 

*  <OracleBI Home>\oc4j_bi\j2ee\home\applications\analytics\analytics\res

 

Navigate to subdirectory “s_custom => b_mozilla_4”, and edit the contents of file “portalcontent.css”.  On line 10 you’ll see an entry for the “PortalBody” class.  By default, the background colour is set to “FFFFFF”, which is white.  Change this to “FFCCCC”, which is pink, and save the file:

*
Customized PortalBody Class

 

Refresh the browser page (F5) and press the “Retry” button when you are asked if you wish to resubmit the information:

*
Customized Dashboard Livery

 

Certainly not the most elegant of colour combinations!  Clearly, if you were to produce a consistent set of colours, you’d need to change many more of the CSS classes as well as colorizing a number of images.  But that’s another day.