IBM Cognos Proven Practices: Branding the IBM Cognos 10.1.1 Business Insight User Interface

Product(s): IBM Cognos 10; Area of Interest: Infrastructure

This document provides an overview of the concepts, color schemes, and files used for skinning in IBM Cognos Business Insight.

Michael McGeein, Product Manager, IBM

Michael McGeein is a Product Manager on the Business Intelligence team and has been part of IBM Cognos for 6 years. During that time Michael has been involved in Financial Applications, as well as Dashboarding and Reporting in Product Management. Current product management responsibilities include Desktop, Web and Mobile strategies.



29 June 2012

Also available in Chinese

Introduction

Purpose

This document provides an overview of the concepts, color schemes, and files used for skinning in IBM Cognos Business Insight. It also explains the Dojo theme-based skinning method used for the default skin of the product. Information on how to replace texts and logos is also provided to allow you to further customize the User Interface (UI). An example is given to illustrate all the changes required to rebrand IBM Cognos Business Insight for an imaginary company.

Applicability

The skinning method described in this document only applies to IBM Cognos Business Insight version 10.1.1. Any skinning work done for this version may need to be re-done for future releases.

Exclusions and Exceptions

This document assumes that the reader has some knowledge of HTML, DOM and IBM Cognos 10 server. A good knowledge of CSS properties and rules priorities is also assumed.


Background

The UI of IBM Cognos Business Insight has been developed using Dojo toolkit. Therefore, having a basic understanding of Dojo themes and CSS classes is very helpful in the skinning process. In this section, a basic introduction to these concepts is given. For more background on Dojo, please take a look at the following link
http://dojotoolkit.org/documentation

Dojo themes

Dojo libraries support four themes out of the box: Claro, Tundra, Soria, and Nihilo. A Dojo-based application can choose to use one of the themes as-is for its skin, or they can customize one of the given themes, or they can develop their own skin from scratch. IBM Cognos Business Insight uses a customized version of the Claro theme. This is done by setting the class attribute of the <body> HTML element to claro as shown in Figure 1.

Figure 1. HTML code showing the class attribute of the <body> element set to claro
Figure 1. HTML code showing the class attribute of the <body> element set to claro

CSS inheritance

Dojo uses CSS inheritance to skin its UI components (i.e. dijit components). Since IBM Cognos Business Insight uses Dojo UI components, you need to understand CSS inheritance in order to customize the styles and skin of IBM Cognos Business Insight. The following examples illustrate how CSS inheritance works.

Example 1

.claro .dijitDialogTitleBar {
	 Background-color: #ABD6FF; 
}

The class claro .dijitDialogTitleBar defines the background color of the dialog titles in the claro theme. Note the order of class names, that .dijitDialogTitleBar is after .claro. This means that the background color, #ABD6FF, will be applied to any DOM node with .dijitDialogTitleBar class and is the descendant of another DOM node with .claro class.

In the HTML fragment shown below in Figure 2, this background color style will be applied to a <div> class by specifying dijitDialogTitleBar as the value for the class attribute. Note that the <div> class is a descendant of <body> that uses claro class.

Figure 2. HTML code with a div class highlighted
Figure 2 - HTML code with a div class highlighted

In IBM Cognos Business Insight, this particular definition means that any DOM node in the page that uses dijitDialogTitleBar class will use #ABD6FF as its background color since the class for its <body> element is claro.

Example 2

.tundra .dijitDialogTitleBar {
		Background-color: #FAFAFA; 
}

This example also defines CSS background color for dialog titles but only works when the tundra theme is used for an application. In other words, it only applies to node with .dijitDialogTitleBar class if its ancestors include a node that uses .tundra class.

Override default Dojo styles

Dojo loads the CSS files and classes required for the specified theme by default. In IBM Cognos Business Insight, the custom CSS files are loaded on top of the default Dojo CSS files to override the default style definitions for the theme.

To override a default rule, you have to duplicate the rule in a custom CSS file and change its values. The following example shows how this is done.

The DOM tree depicted in Figure 3 shows a page, <Body class = “claro”/>, that is divided into two sections, left and right, using <div> elements, <div class = “left”/> and <div class = “right”/>. From there the left and right sections then define other node classes. In this example both the left and right sections define the node <span class = “dijitButton”/> which in turn defines the node <span Class = “dijitButtonNode”/>.

Figure 3. A DOM tree consisting of two sections that contain their own nodes
Figure 3. A DOM tree consisting of two sections that contain their own nodes

To change the background color of all the buttons on the page, find the default CSS class used to set the background color of the buttons. In this case, it is .claro .dijitButton .dijitButtonNode. Duplicate the class and add to the custom CSS file with new value #2D5C3D.

.claro .dijitButton .dijitButtonNode { 
	Background-color: #2D5C3D; 
}

To change the background color of the buttons on the left side of the page, duplicate the following class and add to the custom CSS file with new value, #2D5C3D.

.claro .left .dijitButton .dijitButtonNode { 	
Background-color: #2D5C3D;
}

Note that the order of the class names in both of the examples above is in the same order as the nodes in the DOM tree hierarchy. This is important to ensure that the styles are applied or overridden correctly.


Tips and Techniques

This section describes the files used for skinning IBM Cognos Business Insight, the naming convention used for the file names and the location of these files. These files include CSS, images, and string files.

IBM Cognos Business Insight is installed with IBM Cognos 10 BI server. All the files needed for branding can be found in <C10 install>/webcontent/icd. The following table shows the types of files used in skinning, their locations on the filesystem and the shorthand name convention that will be used in the remainder of this document to refer to the various locations.

File locations
File TypeFile LocationNaming Convention
Root directory<C10 install>/webcontent/icd<ICD location>
CSS<C10 install>/webcontent/icd/themes/default<CSS location>
Images for UI controls<C10 install>/webcontent/icd/themes/default/images<UI image location>
UI strings<C10 install>/webcontent/icd/bux/js/bux/nls<UI strings location>

General CSS files information

All the CSS files in the <CSS location> have been compressed into one file, bux.css. If you are making a minor change to the skin and styles (such as modifying or adding a couple of rules), you can modify bux.css directly. If you are changing the look and feel of IBM Cognos Business Insight, you will need to modify other CSS files and then generate a new bux.css. See the sections titled “Generate optimized CSS” and “Add your own CSS files” for info on how to do this.

The table below describes the files in the <CSS location> and what they are used for.

File name formatFile content
bux_*_skin_claro.cssFiles with this name format contain the skin-related CSS rules such as colors, background images and styles.
bux_*_a11y.cssFiles with this name format contain the CSS rules related to high contrast mode for the visually impaired. There is no need to change these files if you are only changing images and colors.
bux_*_layout.cssFiles with this name format contain the CSS rules used for positioning and sizing the UI controls. We strongly recommend that you do not edit the files with this name format. You risk making the UI unusable by changing these files.

To figure out which file you need to make the changes in, you need to,

  • Identify the component you want to skin.
  • Look for a relevant CSS file with the abovementioned file name format.

For example,

  • To change the dialog skin, the file to modify is bux_dialog_skin_claro.css.
  • To change the banner skin, modify the file bux_banner_skin_claro.css.

Before starting the skinning process

It is highly recommended that you backup the folder <CSS location> before you start modifying the CSS files. This is in case you run into issues during skinning and need to restore the original files.

Generate optimized CSS

In IBM Cognos Business Insight, all the CSS files are compressed into one file named bux.css to minimize HTTP traffic. If you have modified CSS files, you need to regenerate bux.css. This section describes how this is done.

If the platform is Windows,

  1. In a Command Prompt window, go to the <CSS location> folder.
  2. Enter the command copy dojo_*.css + bux_*.css bux.css.

If the platform is Linux/Unix,

  1. In a shell prompt, go to the <CSS location> folder.
  2. Enter the command cat dojo_*.css bux_*.css > bux.css.

Add your own CSS files

It is easier to manage your customization if you create your own CSS files and apply the files on top of IBM Cognos Business Insight's CSS rule. To do this, you need to make sure that these files are appended to the end of bux.css.

For example, to add mybank.css or a series of files like mybank_dialog.css, mybank_button.css to the end of bux.css,

If the platform is Windows,

  1. In a Command Prompt window, go to the <CSS location> folder.
  2. Enter the command copy dojo_*.css + bux_*.css + mybank*.css bux.css.

If the platform is Linux/Unix,

  1. In a shell prompt, go to the <CSS location> folder.
  2. Enter the command cat dojo_*.css bux_*.css mybank*.css > bux.css.

Rebranding IBM Cognos Business Insight

IBM Cognos Business Insight Default Skin Colors

The following table shows all the default colors used for the skin of IBM Cognos Business Insight. The use of limited set of colors in the skin was intentional so as to keep the UI clean and uncluttered. The table also shows the mapping of the default colors to the ones used in the custom skin examples in the following sections.

Tip: When going through the skinning practice, it is a good idea to come up with mapping table between the default colors and the target colors. This will help you to follow the same design principles to keep the UI clean. This helps to make the colors consistent with the corporate colors and also helps to simplify the colors used for the skin.

Default ColorUseTarget Color
529ECECommand button background2D5C3D
008AFFHyperlink text
0075BFText - dialog header
005489Text - dialog message, form labels
000000Content text color333333
333333Data grid column text
454545Data grid text
626262Hint text
828282Text disabled
98B1C1Borders for dialog widgets, list box, text box, pull down menus8BB093
F3C983Data grid cell background - selected
769DC0Getting started page buttons borders
F6E3BEHover - menus, icons
71ADD5Splitter handles
DFEDFBBackground - dialog footerC8DDCA
E8F3FDBackground - dialog header
F2F5FABackground - dashboard canvas
8CCBF7Command button background hover state
CFE5F4Command button text disabled
DBEBF9Content panel background
BED7E1Dialog group divider line
E4F2FFGetting started page buttons backgrounds
E2E2E2Data grid bordersE2E2E2
E7E5E5Data grid column header background
EFF3F5Background - getting started pageE5FAE7
FFFFFFCommand button text enabledFFFFFF
FFFFFFNavigation pane background for Content panel and open/save dialog

In the following section below, image files are being replace are the same file except that they were modified to have a more green color to it. The files were then saved with the prefix “mb_”. The prefix “mb_” files do not exists in the product.

Getting Started page

This section describes the steps taken to re-brand the Getting Started page. The default Getting Started page is shown in Figure 4.

Figure 4. The default IBM Cognos Business Insight Getting Started page
Figure 4. The default IBM Cognos Business Insight Getting Started page

After rebranding, the hue of the entire page will change from blue to green and the text IBM Cognos Business Insight will be customized to read My Bank Business Insight.

Figure 5. A modified IBM Cognos Business Insight Getting Started page that uses customized text and a green hue
Figure 5. A modified IBM Cognos Business Insight Getting Started page that uses customized text and a green hue

General information

In this document, we prefix all the original image names with mb_ when we change the images because the name of our imaginary company is My Bank. We will not discuss how to create the images used in the examples. It is assumed that the images are ready to be used in the CSS rules.

Getting Started background color

This section will show how to change the Getting Started page with new background color and image. This is the background behind the working pane.

  • The .CSS file to be modified is:
    • <CSS location>/bux_guidancePage_skin_claro.css
  • The selector that will be modified is:
    • .bux-guidancePageContainer-outer
  • Change the following from this:
    .bux-guidancePageContainer-outer {
    	background-color: #EFF3F5;
    	background-image: url(images/guidancePage/startpage_bg.png);
    	background-repeat: repeat-x;
    	background-position: left center;
    }

    to this:
    .bux-guidancePageContainer-outer {
    	background-color: #E5fAE7;
    	background-image: url(images/guidancePage/mb_startpage_bg.png);
    }

Getting Started background image

This section will show how to change the Getting Started page’s background image.

Figure 6. The default background image on the Getting Started page
Figure 6. The default background image on the Getting Started page
  • The .CSS file to be modified is:
    • <CSS location>/bux_guidancePage_skin_claro.css
  • The selector that will be modified is:
    • .bux-guidancePage
  • Change the following from this:
    .bux-guidancePage {
    	height: 615px;
    	width: 944px;
    	background-image: url(images/guidancePage/startpage_main.png);
    	background-repeat: no-repeat;
    }

    to this:
    .bux-guidancePage {
    	background-image: 
    url(images/guidancePage/mb_startpage_main.png);
    }

In this example, we added an overlay color to the image but you can use your own image or a simple background without any image.

Create New and Open Existing buttons

This section will show how to change the button color and button label color of the Create New and Open Existing buttons on the Getting Started page.

Figure 7. Large buttons for the Create New and Open Existing functions
Figure 7. Large buttons for the Create New and Open Existing functions
  • The .CSS file to be modified is:
    • <CSS location>/bux_guidancePage_skin_claro.css
  • The following selectors will need to be modified:
    • For button color - .claro .dijitButton .dijitButtonNode
    • For button label color - .icdGettingStartedLargeButton .dijitButtonText
  • To change the color of the two buttons, add the following new rule to the bottom of the file bux_guidancePage_skin_claro.css
    .claro .bux-guidancePage-createDashboard-button-container
     .dijitButton .dijitButtonNode {
    	background-color: #C8DDCA;
    	background-image: url("images/form/mb_button.png");
    	border: 1px solid #8BB093;
    }

The Create New and Open Existing buttons use the default Dojo style for defining the button color. If you were to change the default style, all the buttons that use this default style will be changed as well. To change the style of only these two buttons, you have to restrict the override rule by specifying a class that only appears on the container of these two buttons. In this case, the container is .claro .bux-guidancePage-createDashboard-button-container .dijitButton.

To change the color of the two button labels, update the following class from this:

.icdGettingStartedLargeButton .dijitButtonText{
	color: #2D5C3D;
}

More button

This section will show how to change the Getting Started page’s More button.

Figure 8. More button on the Getting Started Page
Figure 8 - More button on the Getting Started Page
  • The .CSS file to be modified is:
    • <CSS location>/bux_guidancePage_skin_claro.css
  • The selector that will need to be modified is:
    • .bux-guidancePage-more-icon
  • Change the following from this:
    .bux-guidancePage-more-icon {
    	background-image: url(images/guidancePage/more_button.png);
    	background-repeat: no-repeat;
    	background-position: top;
    	width: 20px;
    	height: 20px;
    	cursor: pointer;
    }

    to this:
    .bux-guidancePage-more-icon {
    	background-image: url(images/guidancePage/mb-more_button.png);
    	background-repeat: no-repeat;
    	background-position: top;
    	width: 20px;
    	height: 20px;
    	cursor: pointer;
    }

Application Name

This section will show how to change the name of the application from “IBM Cognos Business Insight” to “My Bank Business Insight”.

  • There is no .CSS to modify. Instead, the JavaScript file to be modified is,
    • <UI Strings Location>/buxuimsg_en.js
  • In the buxuimsg.js file, look for "IDS_GEN_APPLICATION_NAME": "IBM Cognos Business Insight" and change it to "IDS_GEN_APPLICATION_NAME": "My Bank Business Insight"

This change is only for English language. If you want to change the application name for other languages, you need to make the change in the files specific to those languages. The format of the file name is buxuimsg_<lang>.js. So if you wish to change the application name for French, you need to change the string in buxuimsg_fr.js.

It is important that you do not change the format of the .js file. Otherwise, the application may not load. To be safe, make a backup of the .js file you are going to modify.

Favourites thumbnails

This section will show how to change the border property of the Favorites item thumbnail.

Figure 9. Favorites item thumbnail
Figure 9 - Favorites item thumbnail
  • The .CSS file to be modified is:
    • <CSS location>/bux_guidancePage_skin_claro.css
  • The selector that will be modified is:
    • .bux-guidancePage-thumbnail-span .bux-thumbnail-frame
  • The border of a Favorites item’s thumbnail uses images, so you have to set the display of the existing image to none by adding the following at the bottom of the file.
    .bux-guidancePage-thumbnail-span .bux-thumbnail-frame {
    	display: none;
    }
  • You have two options for adding your own custom borders. The first option uses images and the second option uses CSS borders and CSS3 properties to create rounded borders. If you use the second option, the rounded corners will not show up in Internet Explorer browsers.
    • Option 1
      .bux-guidancePage-thumbnail-span .buxThumbnail {
      	background-image: url(images/guidancePage/mb_startpage_favorite.png)
      	 !important;
      	background-repeat: no-repeat;
      	background-position: top;
      }
    • Option 2
      .bux-guidancePage-thumbnail-span .buxThumbnail{
      	border: 3px double #8BB093;
      	-moz-border-radius: 5px;
      	border-radius: 5px;
      }

Titles

This section will show how to change the Getting Started windows Favorite and How-To Video title colours.

  • The .CSS file to be modified is:
    • <CSS location>/bux_guidancePage_skin_claro.css
  • The following selectors will need to be modified:
    • For the Favorites title - .bux-guidancePage-section-title
    • For the How-to Videos title - .bux-guidancePage-CBT-item-title
  • Change the following from this:
    .icdGettingStartedLargeButton .dijitButtonContents,
    .bux-guidancePage-section-title {
    	font-size: 1.5em;
    	color: #396EA3;
    }

    to this:
    .icdGettingStartedLargeButton .dijitButtonContents,
    .bux-guidancePage-section-title {
    	font-size: 1.5em;
    	color: #2D5C3D;
    }
  • Change th
    .bux-guidancePage-CBT-item-title {
    	color: #365F8C;
    	font-weight: bold;
    }

    to this:
    .bux-guidancePage-CBT-item-title {
    	color: #2D5C3D;
    	font-weight: bold;
    }

Application bar

This section describes the steps taken to re-brand the Application bar. The default application bar is shown in Figure 10.

Figure 10. The default Application bar in IBM Cognos Business Insight
Figure 10. The default Application bar in IBM Cognos Business Insight

After performing the re-branding, the Application bar will have the new green hue as shown in Figure 11.

Figure 11. The Application bar that has been modified to use the new green format
Figure 11. The Application bar that has been modified to use the new green format

General information

The .CSS files that will be needed for this modification are:

  • <CSS location>/bux_banner_skin_claro.css
  • <CSS location>/bux_controls_skin_claro.css

The locations of the image files are:

  • <UI image location>/banner
  • <UI image location>/icons

Background image

This section will show how to change the background image for the Application bar. Instead of multiple small image files, all of the images are contained in one image file (see Figure 12) and referenced by coordinate.

Figure 12. The background images for the default Application bar
Figure 12. The background images for the default Application bar
  • The .CSS file to be modified is:
    • <CSS location>/bux_banner_skin_claro.css
  • The selector that will be modified is:
    • .buxBannerbar .buxBannerSection.
  • Change the following from this:
    .buxBannerbar .buxBannerSection {
    	background-image: url(images/banner/bar_strip.png);
    	background-repeat: repeat-x;
    	background-color: transparent;
    	background-attachment: scroll;
    	border: none;
    }

    to this:
    .buxBannerbar .buxBannerSection {
    	background-image: url(images/banner/mb_bar_strip.png);
    	background-repeat: repeat-x;
    	background-color: transparent;
    	background-attachment: scroll;
    	border: none;
    }

Icons

This section will show how to change the icons for the Application bar. All the icons reference the same image sprite. Each icon has its own class defined because they need different background-position values. Here, only the image sprite gets updated, so you need to make sure you keep the exact same positions and sizes if using a different image sprite.

Figure 13. The icons for the default Application bar
Figure 13. The icons for the default Application bar
  • The .CSS file to be modified is:
    • <CSS location>/bux_banner_skin_claro.css
  • To change the icons used on the Application bar, the CSS class specific to each of the icons has to be updated. This update can be done for all the classes at once as shown below. Change the following from this:
    .buxBannerButtonNewImage,
    .buxBannerButtonOpenImage,
    .buxBannerButtonSaveImage,
    .buxBannerButtonDashboardViewImage,
    .buxBannerButtonHomeImage,
    .buxBannerButtonCollaboration,
    .buxBannerButtonCollaborationUpdate,
    .buxBannerButtonHelpImage,
    .buxBannerMarkAsFavoriteButton,
    .buxBannerRemoveFromFavoritesButton,
    .buxBannerButtonMailtoURL,
    .buxBannerMenuRefreshBlue,
    .buxBannerButtonAddImage{
    	 background-image: url('images/icons/mb_blue_bar_strip.png');
    }

    to this:
    .buxBannerButtonNewImage,
    .buxBannerButtonOpenImage,
    .buxBannerButtonSaveImage,
    .buxBannerButtonDashboardViewImage,
    .buxBannerButtonHomeImage,
    .buxBannerButtonCollaboration,
    .buxBannerButtonCollaborationUpdate,
    .buxBannerButtonHelpImage,
    .buxBannerMarkAsFavoriteButton,
    .buxBannerRemoveFromFavoritesButton,
    .buxBannerButtonMailtoURL,
    .buxBannerMenuRefreshBlue,
    .buxBannerButtonAddImage{
    	 background-image: url('images/icons/blue_bar_strip.png');
    }

Control labels

This section will show how to change the color of the control labels such as Layout and Style.

Figure 14. The Layout and Style control label
Figure 14. The Layout and Style control label
  • The .CSS file to be modified is:
    • <CSS location>/bux_banner_skin_claro.css
  • This update can be done for all the CSS classes at once using the rule shown below. Change the following from this:
    .buxBannerButton button,
    .buxBannerButton,
    .buxBannerDropDownButton,
    .buxBannerComboButton .dijitButtonText,
    .buxBannerComboButton
    {
    	font-weight: normal;
    	color: #0075BF;
    }

    to this:
    .buxBannerButton button,
    .buxBannerButton,
    .buxBannerDropDownButton,
    .buxBannerComboButton .dijitButtonText,
    .buxBannerComboButton {
    		font-weight: normal;
    		color: #2D5C3D;
    }

Drop-down menu indicators

This section will show how to change the the drop-down menu indicators on the Application bar. It is important to note that this change will update all the drop-down menu indicators in IBM Cognos Business Insight.

Figure 15. Drop-down menu indicator
Figure 15. Drop-down menu indicator
  • The .CSS file to be modified is:
    • <CSS location>/bux_control_skin_claro.css
  • The selector that will be modified is:
    • .claro .dijitArrowButtonInner
  • Change the following from this:
    .claro .dijitArrowButtonInner{
    	background-image: url("images/icons/blue_bar_strip.png");
    	background-position:-192px;
    }

    to this:
    .claro .dijitArrowButtonInner{
    	 background-image: url("images/icons/mb_blue_bar_strip.png");
    	 background-position:-192px;
    }

Content Pane

This section describes the steps taken to re-brand the Content Pane. The default Content Pane appears in Figure 16.

Figure 16. The default Content Pane
Figure 16. The default Content Pane

After performing the re-branding, the Content Pane will have the new green hue and appears as shown in Figure 17.

Figure 17. The Content Pane modified to use the new green hue
Figure 17. The Content Pane modified to use the new green hue

General information

The .CSS files that will be needed for this modification is:

  • <CSS location>/bux_contentPane_skin_claro.css
  • <CSS location>/bux_bordercontainer_skin_claro.css

The locations of image files for the Content Pane are:

  • <UI image location>/images/icons
  • <UI image location>/form/icons
  • <UI image location>/collapsablepane

Mouse over and selection highlights

This section will show how to change the background color for the highlighted items in the tree.

Figure 18. The My Folders item in the Content Pane with a blue highlight
Figure 18. The My Folders item in the Content Pane with a blue highlight
  • The .CSS file to be modified is:
    • <CSS location>/bux_tree_skin_claro.css
  • The selectors that need to be modified are:
    • .claro .dijitTreeRowSelected
    • .claro .dijitTreeRowActive
    • .claro .dijitTreeRowHover
  • To update the border color and background colors, add the following to the bottom of the file.
    .claro .dijitTreeRowSelected, .claro .dijitTreeRowActive {
    		border-color: #8BB093;
    		background-color: #C8DDCA;
    }
    
    .claro .dijitTreeRowHover {
    		background-color: #E5FAE7;
    }

Background and divider

This section will show how to change the new background color, new background color for the Content Pane divider and new background color for the open\close Content Pane button.

  • The .CSS files to be modified are:
    • <CSS location>/bux_contentPane_skin_claro.css
    • <CSS location>/bux_bordercontainer_skin_claro.css
  • The following selectors will need to be modified:
    • For the main background color:
      • .bux-contentpane-controls-section
      • .icdContentpaneToolbarContainer
      • .bux-contentpane-border-container
    • For the divider:
      • .icdUI .dijitSplitterV
      • .icdUI .dijitSplitterVHover
      • .icdUI .dijitSplitterH
      • .icdUI .dijitSplitterHHover
    • For the open/close button:
      • .icdUI .dijitSplitterV .dijitSplitterThumb
  • To update the background color, in the file bux_contentPane_skin_claro.css change the following from this:
    .bux-contentpane-controls-section,
    .icdContentpaneToolbarContainer,
    .bux-contentpane-border-container {
    	background-color:#E8F3FD !important;
    	background-image: none !important;
    }

    to this:
    .bux-contentpane-controls-section, .icdContentpaneToolbarContainer, 
    .bux-contentpane-border-container {
    	background-color: #C8DDCA !important;
    }
  • To update the background of the Content Pane divider, in the file bux_bordercontainer_skin_claro.css change the following from this:
    .icdUI .dijitSplitterV, .icdUI .dijitSplitterVHover,
    .icdUI .dijitSplitterH, .icdUI .dijitSplitterHHover
     {
    	background-image: none !important;
    	background-color: #E8F3FD;
    	-moz-box-shadow: 0 0 11px #CECECE
    }

    to this:
    .icdUI .dijitSplitterV, .icdUI .dijitSplitterVHover,
      .icdUI .dijitSplitterH, .icdUI .dijitSplitterHHover {
    	background-image: none !important;
    	background-color: #C8DDCA;
    }
  • To update the Content Pane divider open/close button, in the file bux_bordercontainer_skin_claro.css change the following from this:
    .icdUI .dijitSplitterV .dijitSplitterThumb {
    	left: 0;
    	width: 5px;
    	height: 51px !important;
    	background-image: url('images/collapsablepane/border_button.png') !important;
    }

    to this:
    .icdUI .dijitSplitterV .dijitSplitterThumb {
    	background-image: url("images/collapsablepane/mb_border_button.png") !important;
    }

Tabs

This section will show how to change the background color of tabs on mouse over. Please note that this will also change the tabs in the properties dialogs.

Figure 19. Tabs Menu
Figure 19 - Tabs Menu
  • The .CSS file to be modified is:
    • <CSS location>/bux_contentPane_skin_claro.css
  • The following selectors will need to be modified:
    • For normal state - .claro .dijitTab .dijitTabContent
    • For mouse over state - .claro .dijitTabHover .dijitTabContent
    • For active (clicked-on) state - .claro . dijitTabActive.dijitTabContent
  • To update the background color for normal state add the following to the bottom of the file:
    .claro .dijitTab .dijitTabContent {
    		color: #8BB093;
    }
  • To update the background color for mouse over and active state add the following to the bottom of the file:
    .claro .dijitTabHover .dijitTabContent,
    .claro .dijitTabActive .dijitTabContent {
    		background-color: #C8DDCA;
    		border-color: #8BB093; 
    }

Icons

This section will show how to change the icons for the view controls in the Content Pane. All the icons reference the same image sprite. Each icon has its own class defined because they need different background-position values. Here, we are just updating the image sprite, so you need to make sure you keep the exact same positions and sizes when using a different image sprite.

Figure 20. Sample of icons on the Content Pane
Figure 20 - Sample of icons on the Content Pane
  • The .CSS file to be modified is:
    • <CSS location>/ bux_contentPane_skin_claro.css
  • To change the icons used for the view controls in the Content Pane, the CSS class specific to each of the icons has to be updated. This update can be done for all the classes at once using the rule shown below. Change the following from this:
    .bux-search-results-icon, 
    .bux-my-favorite-icon, .contentPaneContextMenuViewThumbnail, 
    .contentPaneContextMenuViewList, .contentPaneContextMenuViewTree, 
    .bux-views-item-image-thumbnail, 
    .bux-views-item-image-list, 
    .bux-views-item-image-tree, 
    .bux-refresh-button, 
    .bux-businesscard-icon, 
    .bux-upOneLevel-icon, 
    .bux-tools-icon, 
    .bux-content-icon, 
    .bux-myFolders-icon {
    	background-image: 
    url("images/icons/mb_content_pane_toolbar_strip.png");
    }

    to this:
    .bux-search-results-icon, 
    .bux-my-favorite-icon, .contentPaneContextMenuViewThumbnail, 
    .contentPaneContextMenuViewList, .contentPaneContextMenuViewTree, 
    .bux-views-item-image-thumbnail, 
    .bux-views-item-image-list, 
    .bux-views-item-image-tree, 
    .bux-refresh-button, 
    .bux-businesscard-icon, 
    .bux-upOneLevel-icon, 
    .bux-tools-icon, 
    .bux-content-icon, 
    .bux-myFolders-icon {
    	background-image: 
    url("images/icons/mb_content_pane_toolbar_strip.png");
    }

Drop-down menu

This section will show how to change the style of the drop-down menu in the Content Pane.

Figure 21. Drop-down menu in the Content Pane
Figure 21. Drop-down menu in the Content Pane
  • The .CSS file to be modified is:
    • <CSS location>/bux_contentPane_skin_claro.css
  • The selector that will need to be modified is:
    • .icdContentpaneTabContainer .dijitDropDownButton .dijitButtonNode
  • To update the background color and the border for the drop-down menu, add the following to the end of the file.
    .icdContentpaneTabContainer .bux-contentpane-category-section .dijitButtonNode {
    	background-color: #E5FAE7;
    	border-color: #8BB093;
    	background-image: url(images/form/mb_button.png);
    }

Dialogs

This section describes how to re-brand the dialogs. It will change all dialogs at the same time. A default Email Link dialog is shown is Figure 22.

Figure 22. The default Email Link dialog box
Figure 22. The default Email Link dialog box

After performing the re-branding, the Email Link dialog will have the new green hue and appears as shown in Figure 23.

Figure 23. The Email Link dialog box modified to use the new green hue
Figure 23. The Email Link dialog box modified to use the new green hue

General information

The .CSS file that will be needed for this modification is:

  • <CSS location>/bux_dialog_skin_claro.css

The location of image files for the dialogs is:

  • <UI image location>/dialogs

Border

This section will show how to change the color for the border line and the shadow. Note that the shadow is not supported in Internet Explorer.

  • The .CSS file to be modified is:
    • <CSS location>/bux_dialog_skin_claro.css
  • The following selectors will need to be modified:
    • .icdUI .dijitDialog
    • .icdBorder
    • .icdBorderPopup
  • To update the border color and shadow add the following at the bottom of the file. Note that the box-shadow needs an RGB color. The color is the same as #8BB093. This change will also apply to popup menu borders.
    .icdUI .dijitDialog, .icdBorder, .icdBorderPopup { 
    		border-color: #8BB093; 
    		box-shadow:0 0 3px 3px rgba(139,176,147,0.6) !important;
    }

Title and dialog text

This section will show how to change the color of the title text and color of the dialog text.

  • The .CSS file to be modified is:
    • <CSS location>/bux_dialog_skin_claro.css
  • The following selectors will need to be modified:
    • .bux-InformationDialog-mainMessage
    • .claro .dijitDialogTitle
  • Change the following from this:
    .icdUI .bux-InformationDialog-detail-section .dijitTitlePaneTextNode,
    .bux-InformationDialog-mainMessage,
    .bux-InformationDialog-controlLabel
    {
    	color: #005489;
    }

    to this:
    .icdUI .bux-InformationDialog-detail-section .dijitTitlePaneTextNode,
    .bux-InformationDialog-mainMessage,
    .bux-InformationDialog-controlLabel
    {
    	Color: 2D5C3D;
    }

    Also, change the following from this:
    .claro .dijitDialogTitle {
        color: #0075BF;
        font-size: 1.18em;
        font-weight: bold;
    }

    to this:
    .claro .dijitDialogTitle {
        color: #2D5C3D;
        font-size: 1.18em;
        font-weight: bold;
    }

Buttons

This section will show how to change the background color for buttons, the background color for the buttons on mouse over and the border color of the buttons.

Figure 24. Sample of buttons in a dialog
Figure 24 - Sample of buttons in a dialog
  • The .CSS file to be modified is:
    • <CSS location>/bux_dialog_skin_claro.css
  • The selector to be modified is:
    • .claro .icdDialogButtonBar .dijitButtonNode
  • Change the following from this:
    claro .icdDialogButtonBar .dijitButtonNode{
    	background-image:url(images/dialog/button.png);
    	background-position: 0 -25px;
    	background-color: #529ECE;
    	color: #FFFFFF;
    	font-size: 1em;
    	font-weight: bold;
    	min-width: 50px;
    	padding-bottom: 3px;
    }

    to this:
    claro .icdDialogButtonBar .dijitButtonNode{
    	background-image:url(images/dialog/mb_button.png);
    	background-position: 0 -25px;
    	background-color: #529ECE;
    	color: #2D5C3D;
    	font-size: 1em;
    	font-weight: bold;
    	min-width: 50px;
    	padding-bottom: 3px;
    	border-color: #8BB093
    }

Note that the background color of the buttons on mouse over is set using the background-image property.

Header and Footer

This section will show how to change the background color and the border line for the header and footer sections of the dialogs.

  • The .CSS file to be modified is:
    • <CSS location>/bux_dialog_skin_claro.css
  • The following selectors will need to be modified:
    • .claro .dijitDialogTitleBar
    • .claro .dijitDialogPaneActionBar
  • To update the background color and the bottom border for the header change the following from this:
    .claro .dijitDialogTitleBar{
    	background-color:#DFEDFB;
    	border: none;
    }

    to this:
    	.claro .dijitDialogTitleBar {
    		background-color: #C8DDCA;
    		border-color-bottom: #8BB093;
    }
  • To update the background color and the top border for the footer change the following from this:
    .claro .dijitDialogPaneActionBar{
    	background-color: #E0EBF7;
    	border-top: 1px solid #B6CFD9;
    }

    to this:
    .claro .dijitDialogPaneActionBar {
    		background-color: #C8DDCA;
    		border-color-top: #8BB093;
    }

Close icon

This section will show how to change the style of the Close icon in dialogs.

Figure 25. The Close icon used in dialogs
Figure 25. The Close icon used in dialogs
  • The .CSS file to be modified is:
    • <CSS location>/bux_dialog_skin_claro.css
  • The selector to be modified is:
    • .claro .dijitDialogCloseIcon
  • Change the following from this:
    .claro .dijitDialogCloseIcon{
    	background-image:url(images/dialog/dialog_icon_close_strip.png);
    	background-position: 0px 0px;
    	width: 16px;
    	height: 16px;
    
    }

    to this:
    .claro .dijitDialogCloseIcon{
    	background-image:url(images/dialog/mb_dialog_icon_close_strip.png);
    	background-position: 0px 0px;
    	width: 16px;
    	height: 16px;
    
    }

Widgets

This section describes the steps taken to re-brand the on-demand toolbar on top of widgets. A sample default widget box is shown is Figure 26.

Figure 26. The default widget box
Figure 26. The default widget box

After performing the re-branding, the widget box will have the new green hue and appears as shown in Figure 27.

Figure 27. The widget box modified to use the new green format
Figure 27. The widget box modified to use the new green format

General Information

The .CSS file that will be needed for this modification is:

  • <CSS location>/bux_widget _skin_claro.css

The locations of image files for the widget box:

  • <UI image location>/images/widgets

Background

This section will show how to change the background color of the on-demand toolbar.

  • The .CSS file to be modified is:
    • <CSS location>/bux_toolbar_skin_claro.css
  • The selector that will be modified is:
    • .bux-toolbar
  • Change the following from this:
    .icdUI .bux-toolbar .dijitToolbar {
    	background-color: #EBF4FD;
    }

    to this:
    .icdUI .bux-toolbar .dijitToolbar {
    	background-color: #C8DDCA;
    }

Dot Menu

This section will show how to change the image for the blue dot menu button shown in Figure 28.

Figure 28. The default dot menu button
Figure 28. The default dot menu button

After performing the re-branding, the dot menu button will have the new green hue as illustrated in Figure 29.

Figure 29. The dot menu button in the new green hue
Figure 29 - The dot menu button in the new green hue
  • The .CSS file to be modified is:
    • <CSS location>/bux_toolbar_skin_claro.css
  • The selector that will be modified is:
    • .bux-toolbar-dropdown-section .dijitArrowButtonInner
  • Change the following from this:
    .claro .bux-toolbar-dropdown-section .dijitArrowButtonInner {
    	background-image: url("images/widget_toolbar/odtb.png");
    	background-position: 0 0;
    	background-repeat: no-repeat;
    	height: 25px;
    	width: 25px
    }

    to this:
    .claro .bux-toolbar-dropdown-section .dijitArrowButtonInner {
    	background-image: url("images/widget_toolbar/mb_odtb.png");
    	background-position: 0 0;
    	background-repeat: no-repeat;
    	height: 25px;
    	width: 25px
    }

Border

This section will show how to change the border color and shadow.

  • The . CSS file to be modified is:
    • <CSS location>/bux_widget_skin_claro.css
  • The following selectors will need to be modified,
    • .widget-border
    • .bux-toolbar-inner
  • Add the following to the end of the file:
    .widget-border {
    	border-color: #C8DDCA!important; 
    }
    
    .bux-toolbar-inner {
    	box-shadow: 0 1px 3px #C8DDCA inset;
    }

Tooltips

This section describes the steps taken to re-brand the tooltips. The Email link tooltip in the default blue hue is shown in Figure 30.

Figure 30. The default tooltip box
Figure 30. The default tooltip box

After re-branding, the tooltip box and text will have the new green hue and appears as shown in Figure 31.

Figure 31. The modified tooltip box in the new green hue
Figure 31. The modified tooltip box in the new green hue

General Information

The .CSS file that will be needed for this modification is:

  • <CSS location>/bux_tooltip _skin_claro.css

Background

This section will show how to change the background color of the tooltip.

  • The .CSS file to be modified is:
    • <CSS location>/bux_widget_skin_claro.css
  • The selector that will be modified is:
    • .claro .dijitTooltip .dijitToolbar
  • To update the background color and the bottom border, add the following to the bottom of the file:
    .claro .dijitTooltip .dijitToolbar {
    	background-color: #C8DDCA;
    	border-bottom: 1px solid #8BB093;
    }

Text

This section will show how to change the color of the tooltip title and the color of the description text.

  • The .CSS file to be modified is:
    • <CSS location>/bux_tooltip_skin_claro.css.
  • The following selectors will need to be modified:
    • .bux-tooltip-title
    • .bux-tooltip-text
  • Change the following from this:
    .bux-tooltip-title{
    	font-size: 100%;
    }
    .bux-tooltip-text {
    	font-weight: normal;
    	font-size: 100%;
    	color: #01568D;
    }

    to this
    .bux-tooltip-title{
    	font-size: 100%;
    	color: #2D5C3D;
    }
    .bux-tooltip-text {
    	font-weight: normal;
    	font-size: 100%;
    	color: #2D5C3D;
    }

Border

This section will show how to change the color for the border.

  • The .CSS file to be modified is:
    • <CSS location>/bux_widget_skin_claro.css
  • The selector that will be modified is:
    • .claro .dijitTooltipContainer
  • To update the background color and the top/bottom border add, the following to the bottom of the file:
    .claro .dijitTooltipContainer {
    	border-color: #8BB093;
    }

Menus

This section describes the steps taken to re-brand the menus. The default main menu for IBM Cognos Business Insight is shown in Figure 32.

Figure 32. The default IBM Cognos Business Insight main menu
Figure 32. The default IBM Cognos Business Insight main menu

After re-branding, the main menu will have the new green hue and appears as shown in Figure 33.

Figure 33. The IBM Cognos Business Insight main menu modified to use the new green hue
Figure 33. The IBM Cognos Business Insight main menu modified to use the new green hue

General information

The .CSS file that will be needed for this modification is:

  • <CSS location>/bux_menu.css

The locations of image files for the menus:

  • <UI image location>/menu

Menu items mouse over effect

This section will show how to change the color of mouse over on menu item.

  • The .CSS file to be modified is:
    • <CSS location>/bux_menu.css
  • The following selectors will need to be modified:
    • .claro .dijitMenuActive .dijitMenuItemHover
    • .claro .dijitMenuActive .dijitMenuItemSelected
  • Change the following from this:
    .claro .dijitMenuActive .dijitMenuItemHover,
      .claro .dijitMenuActive .dijitMenuItemSelected{
    	background-color: #F6E3BE;
    	border-color: #F6E3BE;
    }

    to this:
    .claro .dijitMenuActive .dijitMenuItemHover,
      .claro .dijitMenuActive .dijitMenuItemSelected{
    	background-color: #C8DDCA;
    	border-color: #C8DDCA;
    }

Sub-menus indicator

This section will show how to change the color of the sub-menu indicator

  • The .CSS file to be modified is:
    • <CSS location>/bux_menu.css
  • The selector that will be modified is:
    • .claro .dijitMenuExpand>
  • Change the following from this:
    .claro .dijitMenuExpand{
    	background-image:url(images/menu/menu_icon_arrow.png);
    	background-position: center center;
        height: 10px;
        width: 10px;
    }

    to this:
    .claro .dijitMenuExpand{
    	background-image:url(images/menu/mb_menu_icon_arrow.png);
    	background-position: center center;
        height: 10px;
        width: 10px;
    }

Appendix A - Sample

The sample used in this document is available for use as a guideline or as a starting point.

To deploy the sample, extract the files to <C10 install location>/webcontent.

There should be a number of mb_*.css files under <CSS location> and the images referenced in this document should be in their respective folders.

To apply the MyBank skin, you need to regenerate the optimized CSS file as described in section labeled Generate optimized CSS.

An easy way to get started would be to create your own color table and update our MyBank sample by doing a search and replace of the old colors with the new colors.

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Information management on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Information Management
ArticleID=823592
ArticleTitle=IBM Cognos Proven Practices: Branding the IBM Cognos 10.1.1 Business Insight User Interface
publish-date=06292012