Tutorial: Branding and Theming of BI launch pad

former_member184471 · ‎2013 Jun 01

In my previous tutorial I already talked about how to change the name and URL of BI launch pad. Often this is not enough and partners as well as customers would like to change the logo or even color scheme of BI launch pad. The SAP BI 4.0 SP4 release introduced a branding and theming mechanism that will be maintained over patches. Detailed documentation about how to customize BI launch pad, Cyrstal reports or OpenDocument can be found in the SAP BusinessObjects BI Customization Guide (see Web Application Customization section). For this tutorial I like to focus on BI launch pad customization only. Please note that knowledge of cascaring style sheets (css) is needed for this customization. You can make changes as small as changing the logo files or as big as changing the entire color scheme of BI launch pad, it all depends on how many styles you override.

Retrieve sample files

As this customization can be quite complex, we provide you with a sample customization as part of the installation package. The template.zip file is located in the Collaterals\CustomizationTemplate folder of your installation package, and contains the branding bundles (JAR files) to customize. This file is the starting point for customizing your web applications.

Copy template.zip from the Collaterals\CustomizationTemplate folder of your installation package to a directory on your local drive.
Extract the template.zip file
Once extracted navigate to the sub-folder SAP BusinessObjects Enterprise XI 4.0\warfiles\webapps\BOE\WEB-INF\eclipse\plugins of the extracted package
In that folder there is a com.businessobjects.webpath.InfoViewBranding.jar bundle, which contains a sample customization. Using winrar, extract the com.businessobjects.webpath.InfoViewBranding.jar bundle
The sample files are located in web\sample folder. The sample contains sample images as well as a sample css file to override the BI launch pad style as guidance. You can customize as little or as much as you like!
Open the customize.css file located in \web\sample\css folder using Notepad++ (or any other text editor)

Create customization files

It is recommended to start with a blank customize.css and add customized styles to the blank file using the sample as guidance rather than modifying the sample customize.css file itself.

You can customize the favicon, logo, backgrounds, styles, and more. Most of these customizations involve changing the CSS rules in the customize.css
file. All customizations must be made available in the web folder of com.businessobjects.webpath.InfoViewBranding.jar to take effect. The web folder has to have the following sub-folder structure:

\web

\css

customize.css

\images

favicon.ico

\theme

*.png, *.gif

Under the com.businessobjects.webpath.InfoViewBranding folder created from the extraction of the com.businessobjects.webpath.InfoViewBranding.jar bundle, create the folder structure mentioned above
BI launch pad uses a few images as background for its UI, for this tutorial I have created a customized sub-set of these images. Download the "BI launch pad background images in light red.zip". Extract the file and drop the images the theme folder.
Create a new customize.css file in the css folder using Notepad++ (or any other text editor)

Customize BI launch pad logon page

The following diagram show the elements customized in this activity, for reference purposes. The numbers in the boxes refer to sections in the sample customize.css file. Our official documentation contains more detailed diagrams if you like to customize more parts. For the cases that the color is defined as hex color, I have suggested a new color value; feel free to use any value you like.

By using the sample customize.css file and the diagram below, add the new css styles to the new customize.css file.