16 Nov 2017 Configuring custom skin & style for OBIEE 12C

Each version of OBIEE has a set of styles and skins designed to make the displaying of data visually appealing. This gives the end user the ability to select styles as per their need. Generally, each OBIEE version has a default style. For example, in OBIEE 12c, the default UI Skin and Style is called ‘Alta’. In 11g, it is ‘blafp’.

Clients often want to see their organization’s BI data with their company logo, colours, styles etc. Not surprisingly, customizing the OBIEE user interface is one of the most frequent activities undertaken while implementing OBIEE in an organization.

In this article, we will describe how to customize the Skin/Style in OBIEE 12c as per the customer requirements below:

1. Unarchiving the Analytics EAR File

OBIEE analytics components and configuration files are bundled together as an .ear file named ‘analytic.ear’ and are deployed in weblogic services as part of the installation and configuration. We are going to create our own customization under this file and then deploy it back in weblogic services.

It is always a best practise to make a back-up copy of the files and folders before starting any customization. This would help us to revert back to before the changes if anything goes wrong. The recommended files to be backed up are:

To begin the unarchiving process, please follow the below steps:

1	Navigate to C:\Oracle\Middleware\Oracle_Home\bi\bifoundation\jee to find the analytics.ear file, which is already deployed in weblogic.
2	Copy analytics.ear and paste it in your local folder D:\OBIEE.
3	Unzip the analytics.ear from D:\OBIEE\analytics ear with your preferred zip tool.
4	Further unzip the analytics.war file in another folder to avoid conflicts, D:\OBIEE\analytics ear\analytic war.

Note: Don’t touch/modify the folders META-INF & WEB_INF.

2. Replacing the Oracle Logo

To Replace the Oracle logo with the client logo in the analytics home page:

•	Navigate to ‘res’ in D:\OBIEE\analytics ear\analytic war\res.
•	In this folder, we can find separate folders for each Skin and Style:
	»  Folders starts with ‘s_’ refers for style
	»  Folders starts with ‘sk_’ refers for skin
•	Decide on which out-of-the-box style we are going to extend with our new customization. We can either add our customization in an existing style or make a copy of any folder for customizing the style & skin and then rename it, like s_CPcustom, sk_CPcustom.
•	Navigate to ‘D:\OBIEE\analytics ear\analytic war\res’ and open the filemap.xml file and do the below change only if you have created the custom folder (s_CPcustom). Otherwise skip this step if you are customizing the existing style(for s_Alta). Change the code as below to extend the Alta style to the new custom skin and style ‘s_CPcustom’ and ‘sk_CPcustom’.
•	Here I’m doing my customization under s_Alta folder after backing up the original folder, so I just skipped the above step.
•	Move to the location ‘D:\OBIEE\analytics ear\analytic war\res\s_Alta\master’.
•	Rename the oracle_logo to some other name(ex: oracle_bkp) and paste the custom picture with the same dimensions the as oracle logo has. Name the custom picture as oracle_logo.

3. Changing the Header Bar Color in the Analytics Home Page

By default, the header bar of the OBIEE Analytics web page is grey. To customize this color :

•	Navigate to D:\OBIEE\analytics ear\analytic war\res\s_Alta\master.
•	Find and open the file ‘custom.css’.
•	The custom.css file is an empty file that is imported by the master.css file. You can use the custom.css file to add your own CSS classes, which will override the classes in the master.css file.
•	Keeping the custom code in custom.css file enables you to take advantage of future improvements to the master.css file that are applied by patches and upgrades.
•	To get the class/ id’s, login to analytics through Chrome, right-click and choose “inspect” to inspect the elements whose styles you want.
•	Override the code with your custom code as below in custom.css file.
•	Save and close the file.

4. Customizing the Default Color Pallete

In OBIEE 12c, the initial colors of default color pallete are blue and green, therefore, the graphs and charts are generated in those colors by default. To modify the color pallete and use the standard colors of your organization, follow the steps below.

•	Navigate to D:\OBIEE\analytics ear\analytic war\res\s_Alta\master.
•	Open ‘graph.xml’ file with the text editor. Here you will find the list of SeriesItems just below the SliceLable tag.
•	Change the color code as per your need and save the file.

5. Set OBIEE Default Style & Skin

The default Skin and Style for each version of OBIEE is set in the file named ‘instanceconfig.xml’. The default style for OBIEE 12c is ‘Alta’. Since I made my customizations under s_Alta, I don’t need to modify the style name in instanceconfig.xml.

In case you are doing the customization under your own custom folders (s_CPcustom/sk_CPcustom) then follow the below steps.

•	Navigate to C:\Oracle\Middleware\Oracle_Home\user_projects\domains\bi\config\fmwconfig\biconfig\OBIPS.
•	Open & Edit the instanceconfig.xml file with text editor.
•	Change the DefaultSkin and DefaultStyle as CPcustom as per the screenshot below.

6. Archiving the Analytics EAR file

Now we are done with the customization part. So bundle the files back in analytics.war and then analytics.ear as before.

•	Analytics.war should be archived with the below files.
•	Analytics.ear should contain the below files.
•	Copy and paste the ‘analytics.ear’ file into the source location. C:\Oracle\Middleware\Oracle_Home\bi\bifoundation\jee.

Now ‘analytics.ear’ file is ready to deploy with the custom styles.

7. Deploy the analytics.ear File

To deploy the analytics.ear file with custom styles:

•	Login to Weblogic Server Administration Console with Administrator credentials.
•	Navigate to Domain Structure -> Deployments -> control tab.
•	Select analytics from the deployment list and click on Stop -> Force Stop now.
•	Click on ‘Lock & Edit’ from the left side panel.
•	Go to the Configuration tab, there you can see the status of anlytics has been changed.
•	Now select ‘analytics’ and click on ‘Update’ to update the new changes from analytics.ear file.
•	Browse the source path where the analytics.ear file is saved and click on ‘Finish’.
•	Once the deployment is successfully updated, click on the ‘Activate the Changes’ tab.
•	Now move to the ‘Control’ tab and start the analytics by servicing all requests.
•	Now the status should be Active as per the below sceenshot.

To reflect all changes made in the analytics deployment, perform a Full Restart in OBIEE by using the stop.sh and start.sh script files or by restarting the services from Oracle Enterprise Manager(EM).

8. Restarting the Services From Enterprise Manager

•	Login to Oracle Enterprise Manager with administrator credentials.
•	Navigate to Target Navigation tree -> Business Intelligence -> biinstance -> Availability.
•	Click on the ‘Restart All’ button to restart all the services.

Note: As a best practise, Clear the browser cache files before login to OBIEE analytics.

9. Testing the Customization

•	Login to OBIEE Analytics and check the default style and logo in OBIEE analytics home.
•	Navigate to any report that is saved under the catalog and see if the default color palette for OBIEE graph has been changed in the report.

Conclusion

Every organization likes to have their business reports and charts aligned to their standards with respect to skin and styles. OBIEE offers us the flexibility here to modify the text fonts for the reports and to have a custom color palatte for the graphs, logos and skin as per the standards of the organization.

Further customization can be made on the css files referred in this article to improve the look and feel of the OBI analytics home page, reports and charts.

If you want to know more about how to customize your reports and charts and enhance your visualizations you can always contact us!