IBM Cognos Proven Practices: Customising the IBM Cognos 8.4.x UI

Nature of Document: Tip or Technique; Product(s): IBM Cognos 8.4.1; Area of Interest: Infrastructure

This document provides some tips and techniques when creating a custom style (or "skin") in IBM Cognos 8.4.x.

Share:

Introduction

Develop skills on this topic

This content is part of a progressive knowledge path for advancing your skills. See Introduction to IBM Cognos Business Intelligence V10.01

This document provides some tips and techniques when creating a custom style (or "skin") in IBM Cognos 8. This document provides an overview of the concepts, colors schemes, and files used for skinning in IBM Cognos 8. It also provides some task-related examples to better illustrate all of the changes necessary to create your own custom style.

IBM Cognos Connection customization example

Understanding the Color Scheme used in Styles

Default Colors used with the "Corporate" Style

Knowing the default color scheme allows you to match these default colors to your desired style. All IBM Cognos components follow the same color scheme very closely. The figure below provides a list of most of the colors used with the predefined "Corporate" styles. Some IBM Cognos components may periodically use a color that is not listed in the figure below.

Colour palette with hex colour

Understanding Hexadecimal Colors

The best way to pick your colors is to go into your web site, snapshot the screen and take it into Paint Shop Pro (PSP). Then use the paint dropper tool to find out the colors HEX values by clicking on the color and double-clicking on the color on the right panel.

Mapping Colors to Sections of the User Interface

The diagrams below provide examples of the color scheme used with the default "corporate" style. It can be used as a guide to determine how to match your color scheme with the predefined one.

IBM Cognos Connection

Screenshots of the IBM Cognos Connection UI with the colour palette it uses

Query Studio

SScreenshots of the IBM Query Studio UI with the colour palette it uses

Analysis Studio

Screenshots of the IBM Analysis Studio UI with the colour palette it uses

Customizing the IBM Cognos 8 UI

IBM Cognos 8 provides CSS files that control the colors for all IBM Cognos 8 UIs. You can customize the UI by modifying parameters within the appropriate CSS files.

Importing New Styles

Before creating a new style, you must first import a style.

To import a new style:

  1. Copy an existing style to use as a template. All of the styles reside in the <install location>/c8/webcontent/skins directory. Make a copy of the "Corporate" folder and place it in the same directory. Rename it accordingly.
  2. Login to Cognos Connection, and launch IBM Cognos Administration
  3. Click on the "Configuration" tab then 'Styles'
    IBM Cognos Administration showing content of the configuration tab
  4. In this page, you will see a list of all of your existing styles. Click on "New Style" icon
    Styles window
  5. This will now open up a "New Style Wizard". Give the style a name. Click Next.
    Specify a name and description - New style wizard
  6. Under "Style Resource Location" provide the exact folder name. A preview page can be used if you want to preview the style. The location for this preview page is shown below. Click Finish.
    Specify style location and preview resource - New style wizard
  7. The new style will now be in the list.
    Style window with new style added
  8. Once the style has been imported, you can view the style in the drop-down list in 'My Preferences'.
    Set preferance window with new style being selected

Files Used with IBM Cognos 8 Styles

All of the files required to modify styles across all IBM Cognos components can be found our newly created "my_style" folder; <install location>/c8/webcontent/skins/my_style.

IBM Cognos ComponentsFile and LocationImages
IBM Cognos Connectionskins/my_style/portal/default.css
/skins/my_style/shared/banner.css
/c8/template/ps/portal/system.xml
/skins/my_style/portal/images
/skins/my_style/branding
Report Studio/skins/my_style/pat/skin.css
/skins/my_style/pat/hal_skin_corportate.css
/skins/mystyle/hal/images
Analysis Studio/skins/my_style/ans/background.css
/skins/my_style/ans/explore.css
/skins/my_style/ans/images
Query Studio/skins/my_style/qs/crn.css
/skins/my_style/portal/default.css
/skins/my_style/qs/QSRVCommonUI.css
/skins/my_style/shared/banner.css
/skins/my_style/prompting/QSReport.css
/skins/my_style/qs/images
Event Studio/skins/my_style/portal/default.css
/skins/my_style/prompting/promptCommon.css
/skins/my_style/ags/ags.css
/skins/my_style/ags/crn.css
/skins/my_style/ags/images
IBM Cognos Administration<install location>/c8/webapps/p2pd/WEB-INF/fragments/styles/cogadmin.xml

System.xml – The system.xml file (<install location>\c8\templates\ps\portal directory) is used to modify functionality or hide certain sections of the user interface. Most of the parameters in this file apply for all users.

Changing Text, Font Types, and Images

Changing Component Names and Text Messages – You can change the names of IBM Cognos 8 components and modify the accompanying text messages by opening the relevant message file in a text editor and performing a search-and-replace on the text strings and calls you want to change. The message files are located in the <install-location>/c8/msgsdk directory. For changes to take effect, you must run the Localization Development Kit (LDK) in accordance with the LDK Installation and User Guide.

Changing IBM Cognos 8 Fonts – You can change the fonts used in IBM Cognos 8 by modifying the font-family list in the file <install-location>/c8/webcontent/skins/my_style/fonts.css. Modify the fonts.css file associated with the style you want. For example, we can change the default font used on all HTML interfaces, except Report Studio, to one more suited to rendering special Asian characters. Open the file fonts.css in a text editor, comment out the section that shows Tahoma as the first item in the font-family list, and then remove the comment from an entry that better meets your Unicode requirements.

Changing IBM Cognos Images – All images are located with the style directory. The table above shows the location of all of the images by component. You can easily change the image location by placing your own custom image in this directory and using the same file name.


Re-branding IBM Cognos 8

You can quickly re-brand IBM Cognos 8 by matching the default colors to your desired colors and then replacing all of the instances of these colors in the appropriate CSS files. For example, suppose that you have the following web site.

Sample Custom web page

You may wish to re-brand IBM Cognos to match this same color scheme. To do this, you can first map the default colors in the "corporate" style to that our desired colors.

The following HTML page predominantly uses the following three colors:

Colours in hex - #2d5c3d, c8ddca, 8bb093

Using this color scheme, you will replace the default colors with the following colors, with a few exceptions.

Note: when picking out a color scheme, try to keep the same color accents, i.e. match dark colors with dark colors and light colors with light colors.

Colour groupings

The following sections shows what parts of the UI are being modified and what file(s) needs to be changed in order to complete the modification. This section does not show all the parameters but it give a good sense of the most commonly changed items.

Re-branding IBM Cognos Connection

Files Used

  • <install location>/c8/webcontent/skins/my_style/portal/default.css
  • <install location>/c8/webcontent/skins/my_style/shared/banner.css
  • <install location>/c8/templates/ps/portal/system.xml

Modify the Main Header: banner.css

IBM Cognos Connection Banner

background colour

.mainHeader1 
{	
	padding: 1px;
	background-color: #2d5d3d; 
	border-bottom: #2d5d3d 3px solid; 
	height:28px;
	width:100%;
}

colour of the title in the bar

.headerTitle 
{
	padding-left: 5px;
	font-weight: bold; 
	background-color: #2d5d3d;
	font-size: 75%;
	color: #ffffff;
	vertical-align: middle;
	white-space:nowrap;
}

blank area between the title and the buttons

.mainHeader1Middle
{
	width:100%;
	/* background-image: url(../shared/images/banner_middle.gif) */
	background-repeat: repeat-y;
}

Modify the Portal Tabs: default.css

IBM Cognos Connection portal tabs

inside of the unselected tab

.tabNormal 
{
	padding-right: 20px; 
	padding-left: 20px; 
	font-size: 70%;
	text-align: center;
	background-color: #c8ddca;
	border-bottom:#999999 1px solid;
	border-top:#c8ddca 1px solid;
}

inside of the selected tab

.tabSelected
{
	padding-right: 20px;	 
	padding-left: 20px; 
	border-top:#999999 1px solid;
	font-weight: bold; 
	font-size: 70%;	 
	color: #ffffff;
	text-align: center;
	background-color:#8bb093;
}

space behind the tabs

.tabBarContainer
{
	width: 100%;
	height: 20px;
	background-color:#c8ddca;
}

back background of the tabs

.mainHeader3 
{
	padding-top: 5px; 
	background-color: #c8ddca;
}

sides of the tabs (In the corporate skin, the sides are images. In the example we are removing them.)

.tabLeftSelected 	
{	
	height:100%; 
	width:7px; 
	background-image:/* url(../shared/images/tab_selected_l.gif) */ ; 
	background-repeat: no-repeat; 
}
.tabRightSelected	
{	
	height:100%; 
	width:7px; 
	background-image:/* url(../shared/images/tab_selected_r.gif) */ ; 
	background-repeat: no-repeat;
}
.tabLeftNormal 		
{	
	height:95%; 
	width:6px; 
	background-image:/* url(../shared/images/tab_normal_l.gif) */ ; 
	background-repeat: no-repeat;	
	border-bottom:#999999 1px solid; 
}
.tabRightNormal		
{	
	height:95%; 
	width:6px; 
	background-image:/* url(../shared/images/tab_normal_r.gif) */ ; 
	background-repeat: no-repeat;	
	border-bottom:#999999 1px solid;
}

buttons

.tabMenuButtonNormal 
{
	border: #c8ddca 1px solid;
	padding:1px;
	cursor:pointer;
	background-color:#c8ddca;
}
.tabMenuButtonOver 
{
	border: #8bb093 1px solid;
	padding:1px;
	cursor:pointer;
	background-color:#8bb093;
}

un-selected tab font colour.

.tabAnchor
{
	color: #2d5d3d;
}

Modifying the Path: default.css

IBM Cognos Connection bread crumbs

Changing the colour of the parent node. (This changes all text that is underlined.)

a 
{
	color: #2d5d3d;
}

colour of the child node

.pathLeafNode 
{
	font-weight: bold; 
	color: #2d5d3d;
}

Changing the table colour: default.css

IBM Cognos Connection package and report list

table header background colour

.tableHeader 
{
	background-color: #8bb093;
}

header titles (.tableSortTitle change all header name that are able to sort.)

.tableTitle 
{
	font-weight: bold; 
	font-size: 70%; 
	color: #2d5d3d;
}
.tableSortTitle
{
	font-weight: bold; 
	color: #2d5d3d;
	text-decoration: none;
}

selectable text in the table

a 
{
	color: #2d5d3d;
}

non-selectable text in the table

.tableText 
{
	font-size: 70%; 
	color: #2d5d3d;
}

Fly-out Menus: default.css

IBM Cognos Connection Flyout Menus

text

.text 
{
	font-size: 70%; 
	color: #2d5d3d;
}

background of the menu and borders

.flyOutMenu 
{
	border: #2d5d3d 1px solid; 
	font-weight: normal; 
	font-size: 100%; 
	overflow-x: hidden; 
	overflow: auto;
	background-color: #c8ddca;
}

hover colour

.menuItemOver 
{ 
	text-decoration:underline;
	cursor:pointer;
	color: #000000;
	height: 20px; 
	background-color: #8bb093;
}

normal display colour of the link.

.menuItemNormal 
{ 
	text-decoration:underline;
	cursor:pointer;
	color: #000000;
	height: 20px; 
	background-color: #c8ddca;
}

Replacing the IBM Cognos Connection text with a corporate logo

To add your own corporate logo:

  1. Place image in the folder <install location>/c8\webcontent\skins\my_style\branding
  2. In the /c8/template/ps/portal, edit the system.xml file using Notepad or an XML editor.
  3. Search for "<!-- Custom OEM headers -->".
  4. You will notice that this section is commented out. Un-comment out this section and add the following section for your new style:
<style styleFolderName="your_new_skin_name_here">
	<table style="background-color:#2d5d3d">
		<tr>
			<td><img src="../skins/classic/branding/my_logo.gif"/></td>
			<td class="headerTitle"
			  style="padding-right:2px;white-space:nowrap"></td>
		</tr>
	</table>				
</style>

Note: This is the image used for my_logo.gif.

Custom Logo

You must restart the IBM Cognos 8 service for these changes to take effect.

End Result

IBM Cognos Connection Final look

Re-branding Query Studio

Files used

  • <install location>/c8/webcontent/skins/my_style/qs/ crn.css
  • <install location>/c8/webcontent /skins/my_style/portal/default.css
  • <install location>/c8/webcontent /skins/my_style/qs/QSRVCommonUI.css
  • <install location>/c8/webcontent /skins/my_style /shared/banner.css
  • <install location>/c8/webcontent /skins/my_style/prompting/QSReport.css

Modify the Header: banner.css

Query Studio banner

display title

.headerTitle 
{
	background-color: #2d5d3d;
	padding-left: 5px;
	font-weight: bold;
	font-size: 75%;
	color: #ffffff;
	vertical-align: middle;
	white-space:nowrap;
}

middle section between the Studio name and solid colour bar

.mainHeader1Middle
{
	width:100%;
	background-image: /* url(../shared/images/banner_middle.gif) */ ;
	background-repeat: repeat-y;
}

solid colour bar

.mainHeader1
{	
	padding: 1px;
	background-color: #2d5d3d;
	border-bottom: #2d5d3d 3px solid; 
	height:28px;
	width:100%;
}

Modifies the Header buttons: CRN.css

Query Studio banner buttons

background and border of an un-selected button

.headerButton
{
	border: #2d5d3d 1px solid;
	background-color: #2d5d3d;
	cursor:pointer;
	width: 22px;
}

background and board when hovering

.headerButtonRollover
{
	border: 1px solid #ffffff;
	background-color: #2d5d3d;
	cursor:pointer;
	width: 22px;
}

background and hover properties of the more help button

.headerButtonDropDown
{
	border: #2d5d3d 1px solid;
	background-color: #2d5d3d;
	cursor: pointer;
	width: 3px;
}
.headerButtonDropDownRollover
{
	border: #ffffff 1px solid;
	background-color: #2d5d3d;
	cursor: pointer;
	width: 3px;
}

Modify the side menu: QSRVCommonUI.css

Query Studio left side menu

Menu title

.menuHeader {
	font-size: 70%;
	color: #2d5d3d;
	border-collapse: collapse;
	vertical-align: bottom;
	font-weight: bold;
	width:100%;
}

menu options

.menuItem,
.menuItemSpacer,
.menuItemSpacerTop {
	background-color: #8bb093;
	border: solid #2D5D3D;
	border-width: 0px 1px;
	border-collapse: collapse;
}

.menuItem
.menuAction {
	font-size: 70%;
	color: #2d5d3d;
	text-decoration: underline;
	cursor: pointer;
	cursor: hand;
}
.menuItemSelected {
	color: #2d5d3d;
	border-collapse: collapse;
	cursor: default;
	padding: 3px 10px;
	border: 1px solid #8bb093;
	height:20px;
	font-size: 70%;
	font-weight: bold;
}

Controls the Data Tree Window

.menuContent,
.menuContentCollapsed {
	color: #336699;
	border: 1px solid #2d5d3d;
	padding: 3px;
}

Information window

.informationTitleHeader
{
	color: #2D5D3D;
	font-weight: bold;
	font-size: 70%;
}
.metaContent {
	background-color: #c8ddca;
	border: solid #2d5d3d;
	border-width: 0px 1px 1px;
	border-collapse: collapse;
	padding: 3px;
}

Information window header: default.css

.dialogHeader
{
	border: #2D5D3D 1px solid;
	height: 24px;
	background-color: #8bb093;
}

Modify the "Select and insert item…" image: QSReport.ccs

Query Studio Select and insert item image
.startPageListColumnTitle
{
	padding: 3px 5px;
	border: 1px solid #2d5d3d;
	line-break: strict;
	background-color: #8bb093;
}
.startPageListColumn
{
	padding: 3px 5px;
	border-color: #2d5d3d;
	border-width: 0px 1px 1px;
	border-style: solid;
	line-break: strict;
	background-color: none;
}

Modify fly-out windows: CRN.css

Query Studio flyout menu
text container
.menuItem_normal
{
	font-size: 70%;
	border-right: #ffffff 1px solid;
	padding-right: 1px;
	border-top: #ffffff 1px solid;
	padding-left: 1px;
	padding-bottom: 1px;
	border-left: #ffffff 1px solid;
	color: #2d5d3d;
	padding-top: 1px;
	border-bottom: #ffffff 1px solid;
	font-family: Tahoma;
	background-color: #ffffff;
	text-decoration: underline;
	cursor: pointer;
	cursor: hand;
}

hover over Text Container

.menuItem_hover
{
	font-size: 70%;
	border-right: #99aacc 1px solid;
	padding-right: 1px;
	border-top: #99aacc 1px solid;
	padding-left: 1px;
	padding-bottom: 1px;
	border-left: #99aacc 1px solid;
	color: 2d5d3d;
	padding-top: 1px;
	border-bottom: #99aacc 1px solid;
	font-family: Tahoma;
	background-color: #c8ddca;
	text-decoration: underline;
	cursor: pointer;
	cursor: hand;
}
Query Studio final results

Re-branding Analysis Studio

Files used

  • <install location>/c8/webcontent/skins/my_style/ans/background.css
  • <install location>/c8/webcontent/skins/my_style/ans/explore.css

Modify the menu bar: background.css

Analysis Studio Menu bar

background, border

.menubar
{
	position: absolute;
	overflow: hidden;
	padding: 0px;
	background-color: #2d5d3d;
	border-bottom: 3px solid #2d5d3d;
	border-top: 1px solid #2d5d3d;
	border-right: 1px solid #2d5d3d;
}
.menubar_content_div
{
	background-image: url
		(../../../skins/corporate/ans/images/title_bar_graphic_studios.gif);
	padding: 2px;
	border: 0px;
	width: 582px;	
}

Modify menu items hover and pressed settings

.menu_hover
{
	background-color: #8bb093;
	border: 1px solid #2d5d3d;
	color:#ffffff;
	padding: 2px;
	padding-left: 5px;
	padding-right: 5px;

}
.menu_pressed
{
	padding: 2px;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #8cc092;
	border: 1px solid #2d5d3d;
	color:#ffffff;
}

Modify the button bar: background.css

Analysis Studio button bar

background colour

.main_toolbar
{
	position: absolute;
	white-space: nowrap;
	padding: 2px;
	background-color: #8bb093;
	border-bottom: 1px solid #2d5d3d;
	border-right: 1px solid #2d5d3d;
	overflow: hidden;
}

buttons

.toolbar_dropdown_button_pressed
{
	border : 1px solid #8bb093;
	background-color: #8bb093;
	padding : 1px;	
	/* pointer for standards compliant browsers, hand for ie 5.5*/
	cursor: pointer;
	cursor: hand;	
	display: inline;
}
toolbar_arrow_combo_pressed
{
	background-color: #8bb092;
	border : 1px solid #8bb092;
	display: inline-block;
	padding: 1px;
	cursor: pointer;
	cursor: hand;
}
toolbar_arrow_combo_hover
{
	border : 1px solid #2d5d3d;
	background-color: #c8ddca;
}
toolbar_arrow_combo_pressed
{
	border : 1px solid #2d5d3d;
	background-color: #c8ddca;
}

Controlling the tabs: background.css

Analysis Studio tabs

Borders, font

.tab_dummy_td_none_selected
{
	text-align: left;
	color: #0000CC;
	padding: 3px 15px 3px 15px;
	white-space: nowrap;
	border-collapse : collapse;	
	text-decoration: underline;
	font-family: Tahoma;
	font-size: 70%;
	font-weight: normal;
	text-decoration: underline;
	border-top: 1px solid #2d5d3d;
	border-bottom: 1px solid #2d5d3d;
	border-left: 1px solid #2d5d3d;
	border-right: 1px solid #2d5d3d;
}
.tab_td_none_selected
{
	border-top : 1px solid #2d5d3d;
}
.top_tab_td_none_selected
{
	border-bottom : 1px solid #2d5d3d;
}
.tab_right_border
{
	border-right: 1px solid #2d5d3d;
}
.tab_left_border
{
	border-left: 1px solid #2d5d3d;
}

Controls selected tab

.tab_td_selected, .top_tab_td_selected
{
	text-align: left;
	white-space: nowrap;
	border-collapse : collapse;	
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;		
	color: #336699;	
	background-color: #c8ddca;
	padding: 3px 15px 3px 15px;
	border : 1px solid #2d5d3d;

non-selected tab (this controls the very back background of the Insertable Objects pane)

.pane
{
	text-align: left;
	position:absolute;
	padding: 3px;
	margin: 0px 0px 0px 0px;
	background-color: #c8ddca;
	border: 1px solid;
	border-color: #2d5d3d #2d5d3d #2d5d3d #2d5d3d;		
}

Controlling the property pane: Multiple .css files

buttons: explore.css

.dialogbuttons,.blockproppanebutton
{
	border-top: 1px solid #2d5d3d;
	border-right: 1px solid #2d5d3d;
	border-left: 1px solid #2d5d3d;
	border-bottom: 1px solid #2d5d3d;
	background-color: #8bb093;
	width: 100%;
	padding: 2px 3px 2px 3px;
}
.dialogButton_hover
{
	background-color: #2d5d3d;
}

container header: background.css

.ToggleBar,.DlgTitleBar
{
	overflow: hidden;
	table-layout: fixed;
	white-space:nowrap;
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;		
	color: #2d5d3d;	
	background-color: #8bb093;
	padding: 3px;
	border : 1px solid;
	border-color : #2d5d3d;
}

Properties container: background.css

.BlockPropertiesContainer
{
	border-left: 1px solid #2d5d3d;
	border-right: 1px solid #2d5d3d;
	background-color: #c8ddca;
	overflow: auto;
}

Information pane: background.css

.InfoContainer
{
	background-color: #c8ddca;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color : #2d5d3d; 	
	overflow: auto;
	overflow-x: hidden;
}

Information pane: background.css

Analysis Studio information box
.InfoContainer
{
	background-color: #c8ddca;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color : #2d5d3d; 	
	overflow: auto;
	overflow-x: hidden;
}

Context Menus: background.css

background

.contextMenu_body, .contextMenu_body_NS
{
	background-color: #c8ddca;
	padding: 3px;
	border: 1px solid #2d5d3d;
	font-size: 8pt;
	position: absolute;

	visibility: visible;
	left: -1000px;
	cursor: default;
	display: block;
	overflow-y: auto;
}

non-highlighted link

contextMenu_item_default 
{
	font-size: 8pt;
	padding: 1px 0px 1px 3px;
	border: 1px solid #c8ddca;
	white-space: nowrap;
	text-align: left;
	cursor: default;
	text-decoration: underline;
	background-color: c8ddca;
	color: #2d5d3d;	
}

Hover Menu

contextMenu_item_with_submenu_over 
{
	cursor: pointer;
	cursor: hand;
	background-color: #8bb093;
	border: 1px solid #;
}

Control the Insertable Objects window: multiple css files

Analysis Studio Insertable objects

header: background.css

.ins_obj_title_bar{
	overflow: hidden;
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;		
	color: #2d5d3d;	
	background-color: #c8ddca;
	padding: 3px;
	border : 1px solid;
	border-color : #2d5d3d;
}

borders: explore.css

.mdmetadata, .analysis_item
{
	color: #0000CC;
	left: 0px;
	position:absolute;
	font-size: 70%;
	font-family: Tahoma;
	padding: 3px 3px 3px 3px;
	overflow: auto;
	white-space: nowrap;
	vertical-align : middle;
	border-left: 1px solid #2d5d3d;
	border-right: 1px solid #2d5d3d;
}

Show/Hide button: explore.css

Analysis Studio Show hide button
.hide_show		
{	
	background-color: #c8ddca;
	border : 1px solid;
	border-color : #2d5d3d #2d5d3d #2d5d3d #2d5d3d;		
	position: absolute;
}
.hide_show_hover
{
	background-color: #8bb093;
}

Control the axis bar: explore.css

axis labels

.axis_label, .rules_label
{
	padding-left: 4px;
	white-space: nowrap;
	color: #2d5d3d;
	font-size: 60%;
}

Controls the crosstab drag areas: explore.css

Analysis Studio crostab drag area

column cell

.ColMemberCellTemplate
{
	border-collapse: collapse;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #2d5d3d;
	text-align: center;
	font-weight: bold;
	color: #2d5d3d;
	background-color: #c8ddca;
	white-space: nowrap;
	cursor: default;
	padding: 5px 7px 5px 5px;
}

row cell

.RowMemberCellTemplate
{
	border-collapse: collapse;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color: #2d5d3d;
	text-align: center;
	font-weight: bold;
	color: #2d5d3d;
	background-color: #c8ddca;
	white-space: nowrap;
	cursor: default;
	padding: 5px 7px 5px 5px;
}

End result

Analysis Studio final result

Re-branding Report Studio

Files used

  • <install location>/c8/webcontent/skins/my_style/pat/skin.css
  • <install location>/c8/webcontent/skins/my_style/hal/hal_skin_corportate.css

Note: In these css file, a lot of section have been grouped together for a lot of the style entries.

Controls most of the background pane: skin.css

Report Studio showing areas of where the back ground will change
#idToolboxTabPanels_Pane,
#idToolboxTabBox_Pane,
#idProperties_Pane,
#idDescription_Pane,
.clsPane_Toolbox_active,
.clsPane_Toolbox_inactive,
.clsPane_Properties_inactive,
.clsPane_Workarea_inactive,
#idExplorerBar,
.clsBigButtonBar,
.clsQueryViewListViewHeader,
.clsQueryTabBackground,
DIV.clsFontComboBoxGroupListItem,
TD.clsGridHeader
{
	background-color: #c8ddca;
}

Controls the welcome, all buttons, selected tab colour and page Explorer column: hal_skin_corporate.css

BODY,
BUTTON,
DIV.clsMenubar,
DIV.clsToolbar,
DIV.clsDlgToolbar,
TD.clsMenubarItem,
TD.clsToolbarButton,
.clsMenuPopup,
.clsPopupDialog,
.clsMenuItem,
TABLE.clsModalDlg,
BUTTON.clsDlgButton,
BUTTON.clsXButton_active,
BUTTON.clsXButton_inactive,
TD.clsExplorerButton,
.clsBigButtonBar,
BUTTON.clsBigCoolButton,
TD.clsToolbarButton,
TD.clsTabBox_inactive,
TD.clsTabBox_active,
TD.clsTabBox_inactive_hover,
TD.clsTabBox_active_hover,
TD.clsBottomTabBox_inactive,
TD.clsBottomTabBox_active,
TD.clsBottomTabBox_inactive_hover,
TD.clsBottomTabBox_active_hover,
DIV.clsTabPanels,
DIV.clsBottomTabPanels,
TD.clsComboBoxArrow,
TD.clsComboBoxArrow_disabled,
DIV.clsListViewColumnHeader
{
	background-color: #8bb093;
}

Controls headers, button hover colour: hal_skin_corporate.css

Report Studio pane header
BUTTON.clsCoolButton_hover,
TD.clsMenubarItem_up,
TD.clsToolbarButton_up,
BUTTON.clsCoolButton_pressed,
TD.clsMenubarItem_down,
TD.clsToolbarButton_down,
TD.clsToolbarButton_stuck,
.clsMenuItem_selected,
DIV.clsPaneHeader_inactive,
.clsListItem_hover,
.clsListItem_tb_selected,
.clsTreeNode_hover,
TD.clsPropertySheetLabel_active,
.clsModalDlgHeader_inactive,
BUTTON.clsXButton_inactive,
TD.clsTabBox_active_hover,
TD.clsBottomTabBox_active_hover,
BUTTON.clsBigCoolButton_hover,
TD.clsMenubarItem_up,
TD.clsToolbarButton_up,
BUTTON.clsBigCoolButton_pressed,
TD.clsMenubarItem_down,
TD.clsToolbarButton_down,
TD.clsComboBoxArrow_down
{
	background-color: #2d5d3d;
}

Controls inactive tabs and hover: hal_skin_corporate.css

Report Studio tabs
TD.clsTabBox_inactive,
TD.clsBottomTabBox_inactive,
TD.clsTabBox_inactive_hover,
TD.clsBottomTabBox_inactive_hover
{
	color: #0000CC;
	text-decoration: underline;
	background-color: #c8ddca;
}

Controls toolbar items: hal_skin_corporate.css

Report Studio toolbar button
BUTTON.clsCoolButton_hover,
TD.clsMenubarItem_up,
TD.clsToolbarButton_up,
BUTTON.clsCoolButton_pressed,
TD.clsMenubarItem_down,
TD.clsToolbarButton_down,
TD.clsToolbarButton_stuck,
BUTTON.clsBigCoolButton_hover,
TD.clsMenubarItem_up,
TD.clsToolbarButton_up,
BUTTON.clsBigCoolButton_pressed,
TD.clsMenubarItem_down,
TD.clsToolbarButton_down,
DIV.clsListViewColumnHeader
{
	border-top: solid #8bb093 1px;
	border-left: solid #8bb093 1px;
	border-right: solid #8bb093 1px;
	border-bottom: solid #8bb093 1px;
}

HR,
BUTTON.clsCoolButton,
TD.clsToolbarButton,
BUTTON.clsBigCoolButton,
TD.clsToolbarButton,
.clsListItem_colorCell_normal
{
	border: 1px solid #8bb093;
}

Controls the menu bar: hal_skin_corporate.css

Report Studio menu bar
DIV.clsMenubar,
TD.clsMenubarItem
{
	background-color: #c8ddca;
}

TD.clsMenubarItem,
TD.clsMenubarItem_up,
TD.clsMenubarItem_down
{
	font-weight: #2d5d3d;
}

TD.clsMenubarItem
{
	color: #2d5d3d;
	border-top: 1px solid #c8ddca;
	border-left: 1px solid #c8ddca;
	border-right: 1px solid #c8ddca;
	border-bottom: 1px solid #c8ddca;
}
TD.clsMenubarItemLast
{
	/* background-image: url(images/menubar_background.gif); */
	background-repeat: no-repeat;
	background-position: right;
}

DIV.clsMenubar
{
	border-top: 1px solid /* #E7E7E7 */ ;
	border-right: 1px solid /* #E7E7E7 */ ;
	border-bottom: 2px solid /* #DEAC77*/ ;
	border-left: 1px solid /* #E7E7E7 */ ;
}
DIV.clsToolbar
{
	border-top: 1px solid /* #DEAC77*/ ;
}

Final Result

Report Studio Final result

Re-branding Event Studio

Files Used

  • <install location>/c8/webcontent /skins/my_style/portal/default.css
  • <install location>/c8/webcontent /skins/my_style/prompting/promptCommon.css
  • <install location>/c8/webcontent /skins/my_style/ags/ags.css
  • <install location>/c8/webcontent /skins/my_style/ags/crn.css

Control the Menu bar: crn.css

Event Studio menu bar

background and menu bar image

.menuBar
{
	background-color: c8ddca;
	background-image: /* url(images/title_bar_graphic_studios.gif) */ ;
	background-repeat: no-repeat;
	background-position: left bottom;
	border-bottom: #2d5d3d 3px solid;
	border-left: #e7e7e7 0px solid;
	border-top: #e7e7e7 1px solid;
	border-right: #e7e7e7 1px solid;
	height: 25px;
	width:100%;
	padding: 1px
}

menu font

.menuTitle_normal
{
	font-size: 70%;
	padding: 3px;
	/*background-color: #336699;*/
	color:#2d5d3d;
	font-family: Tahoma;
	font-weight: bold;
}

menu hover functions

.menuTitle_hover
{
	font-size: 70%;
	padding: 2px 3px 2px 3px;
	background-color: #8bb093;
	border: 0px solid #2d5d3d;
	color: #134679;
	font-family: Tahoma;
	font-weight: bold;
	cursor: hand;
}
.menuTitle_pressed
{
	padding: 2px;
	background-color: #8bb093;
	border: 1px solid #2d5d3d;
	color: #134679;
	font-family: Tahoma;
	font-weight: bold;
	cursor: hand;
}

Control the button bar: crn.css

Event Studio button bar

Background

.toolbar_studio
{
	padding: 2px;
	background-color: #c8ddca;
	border-bottom: 1px solid #cccccc;
}
.toolbarImageNormal
{
	border : 1px solid #f3f3f3;
	background-color: #c8ddca;
	padding : 1px;	
}

Buttons with drop down arrows

.toolbarDropdownImageNormal_studio
{
	border : 1px solid #c8ddca;
	height:20px;
	width:30px;
	background-color: #c8ddca;
	padding: 0px;
}
.toolbarDropdownImageOver_studio
{
	border : 1px solid #2d5d3d;
	height:20px;
	width:30px;
	background-color: #8bb093;
	padding: 0px;
	cursor: pointer;
	cursor: hand;
}
.dropDownArrow 
{
	border : 1px solid #c8ddca;
	height:20px;
	width:11px;
	background-color: #c8ddca;
	padding: 0px;
	margin:0px;
	cursor: pointer;
	cursor: hand;
	align:center
}
.dropDownArrowOver 
{
	border : 1px solid #2d5d3d;
	height:20px;
	width:11px;
	background-color: #8bb093;
	padding: 0px;
	margin:0px;
	cursor: pointer;
	cursor: hand
	align:center
}

Fly out windows

.menuItem_normal
{
	font-size: 70%;
	background-color: 8bb093;
	border: 1px solid 8bb093;
	color:blue;
	text-decoration: underline;
	cursor: pointer;
	cursor: hand;
	font-family: Tahoma;
	font-weight: normal;
}
.menuItem_hover
{
	font-size: 70%;
	background-color: #8bb093;
	border: 0px solid #2d5d3d;
	color:blue;
	text-decoration: underline;
	cursor: pointer;
	cursor: hand;
	font-family: Tahoma;
	font-weight: normal;
}
.menuItem_pressed
{
	font-size: 70%;
	background-color: #8bb093;
	border: 1px solid #2d5d3d;
	color:blue;
	text-decoration: underline;
	cursor: pointer;
	cursor: hand;
	font-family: Tahoma;
	font-weight: normal;
	padding: 1px;
}
.menuContainer
{
	background-color: #8bb093;
	border: 1px solid #336699;
	padding: 2px;
}

Buttons

.toolbarImageNormal_studio
{
	border : 1px solid #c8ddca;
	height:20px;
	width:20px;
	background-color: #c8ddca;
	padding: 0px;
}
.toolbarImageOver_studio
{
	border : 1px solid #2d5d3d;
	height:20px;
	width:20px;
	background-color: #8bb093;
	padding: 0px;
	cursor: pointer;
	cursor: hand;
}

Control the "I want to…" pane: crn.css

I want to... pane

Font

.formText
{
	font-size: 70%;
	color: #2d5d3d;
}
.task_inactive
{
	font-family: Tahoma;
    font-size: 70%;
	color: #8bb093;
	text-decoration: underline;
}
.task_active
{
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;
	color: #2d5d3d;
}

main body on pane

.area		
{	
	background-color: #c8ddca;
	padding: 0px;
	border-top : 0px solid;
	border-bottom : 1px solid;
	border-left : 1px solid;
	border-right : 1px solid;
	border-color : #c8ddca; 	
}

header of pane

.area_header	
{	
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;		
	color: #f3f3f3;	
	background-color: #2d5d3d;
	padding: 3px;
	border : 1px solid;
	border-color : #2d5d3d;
}

Show/hide button (Double Arrow Down)

.hide_show_taskspane		
{	
	background-color: #c8ddca;
	border : 1px solid;
	border-color : #c8ddca;
}
.hide_show_hover		
{	
	background-color: #c8ddca;
	border : 1px solid;
	border-color : #c8ddca;			
}
.hide_show_pressed		
{	
	background-color: #c8ddca;
	border : 1px solid;
	border-color : #c8ddca;		
}

Control the Insertable Objects pane: crn.css

Event Studio Inserable Objects

Header

.area_header	
{	
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;		
	color: #f3f3f3;	
	background-color: #2d5d3d;
	padding: 3px;
	border : 1px solid;
	border-color : #2d5d3d;
}

tabs

.insertableItemsPaneBorder{
    background-color: #8bb093 ;
}

Text: promptCommon.css

.clsTreeNode_unselected
{
	cursor: pointer;
	cursor: hand;
	margin: 0px;
	padding: 0px;
	background-color: #c8ddca;
	color: #000000;
	vertical-align: middle;
}
.clsTreeNode_hover
{
	cursor: pointer;
	cursor: hand;
	margin: 0px;
	padding: 0px;
	color: #000000;
	background-color: #8bb093;
	vertical-align: middle;
}

background and borders: ags.css

.treeBorder {
	border-top: 0px solid;
	border-bottom: 0px solid;
	border-left: 1px solid;
	border-right: 1px solid;
	border-color: #2d5d3d; 	
	background-color: c8ddca;
}

Descision Bar: crn.css

Event Studio descision bar

tasks

.item
{
	background-color: #c8ddca;
	border : 1px solid;
	border-color : #8bb093;
	
	padding-bottom: 1px;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 1px;
}
.item_active
{
	background-color: #c8ddca;
	border : 2px solid;
	border-color: #2d5d3d;
	
	padding-bottom: 0px;
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 0px;
}

Modifies the text:crn.css

.group_label 
{
	font-family : Tahoma; 
	font-size : 70%; 
	font-weight : normal; 
	color : #2d5d3d;
	padding : 3px; 
}
.item_label_active		
{	
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;		
	color: #2d5d3d;
}
.item_label 
{
	font-family : Tahoma; 
	font-size : 70%; 
	font-weight : normal; 
	color : #2d5d3d;
}

Page labels and text:crn.css

.page_label
{
	font-family: Tahoma
	font-size: 110%;
	color: #2d5d3d;
	font-weight: bold;
}
.text2
{
	font-family: Tahoma;
	font-size: 70%;
	color: #2d5d3d;
}

Tab bar:multiple

Event Studio tab bar

Controls the Hyperlink text:crn.css

a
{ 
	font-family: Tahoma;
	color: #2d5d3d;
	text-decoration: underline;
}

Default.css

.dialogHintText 
{
	font-size: 70%; 
	color: #2d5d3d;	
}
.tabLabel 
{
	font-weight: bold; 
	font-size: 70%; 
	color: #2d5d3d;
}

Expression and Information window:default.css

Text

.formLabel 
{
	font-weight: bold; 
	font-size: 70%; 
	color: #2d5d3d;
}

Ags.css

TEXTAREA.hintText_active
{
    background-position: center center;
    background-image: url(images/arrow_template.gif);
    COLOR: #2d5d3d;
    background-repeat: no-repeat
}

.infoErrorTabText
{	
	font-family: Tahoma;
	margin: 2px;
	font-size: 70%;
	width: 100%;
	color: 2d5d3d;
}

.infoErrorTabTextBold
{
	font-family: Tahoma;
	font-weight: bold;
	margin: 2px;
	font-size: 70%;
	width: 100%;
	color: 2d5d3d;
}

Final result

Event Studio final result

Re-branding IBM Cognos Administration

To customise the IBM Cognos Administration there is a little different technique. This interface uses a mix of the fragment method and the same .css file used in modifying IBM Cognos Connection.

For more information on Fragments, download the document IBM Cognos Fragment Framework.

File Used

  • <install location>/c8/webapps/p2pd/WEB-INF/fragments/styles/skins/corporate.xml

With this method of changing the colour scheme, we are going to change the main colour palette. This will change the majority of the Administration UI.

Changing the palette. - cogadmin.xml

<palette>
		<!-- basic b/w  -->
		<color name="black">#000000</color>
		<color name="white">#ffffff</color>
		<!-- 5 shades of colours -->
		<color name="color.lighter">#c8ddca</color>
		<color name="color.light">#c8ddca</color>
		<color name="color.medium">#8bb093</color>
		<color name="color.normal">#8bb093</color>
		<color name="color.dark">#2d5d3d</color>
		<color name="color.darker">#2d5d3d</color>
		<!-- 4 shades of gray -->
		<color name="gray.light">#c8ddca</color>
		<color name="gray.medium">#8bb093</color>
		<color name="gray.normal">#8bb093</color>
		<color name="gray.dark">#2d5d3d</color>
		<!-- others colours -->
		<color name="tooltip">#2d5d3d</color>
		<color name="hyperlink">#2d5d3d</color>
		<color name="special1">#2d5d3d</color>
		<color name="special2">#2d5d3d</color>
	</palette>

Final result

IBM Cognos Administration

As you can see by just changing a couple of lines, most of the style has changed. But there are still a few things to change.

Banner – cogadmin.xml

IBM Cognos Administration banner
<!-- Main -->
	<class name=".cogstyle-header-main">
		<set name="background-repeat">no-repeat</set>
		<set name="background-position">left top</set>
		<set name="border-bottom">
			<color name="headerBottomBorder"/> 3px solid</set>
	</class>
	<class name=".cogstyle-header-left-section">
		<set name="background-color">
			<color name="headerLeftBackground"/></set>
	</class>
	<class name=".cogstyle-header-middle-section">
		<set name="background-image"> 
			/* url($WEB$/skins/$SKIN$/shared/images/banner_middle.gif) */ 
			</set  >
		<set name="background-repeat">repeat-y</set>
		<set name="background-position">left top</set>
	</class>
	<class name=".cogstyle-header-middle-section-spacer">
		<set name="width">45px</set>
	</class>
	<class name=".cogstyle-header-logo">

	<class name=".cogstyle-fragmentHeader-titleText">
		<set name="font-weight">bold</set>
		<set name="color">#2d5d3d</set>
	</class>

Table – cogadmin.xml

IBM Cognos Administration entries table
<!-- tables -->
		<color name="tableText" paletteColor="black"/>
		<color name="tableTextHeader" paletteColor="color.dark"/>
		<color name="tableBackground" paletteColor="white"/>
		<color name="tableBackgroundHeader" paletteColor="gray.medium"/>
		<color name="tableBackgroundSelected" paletteColor="color.normal"/>
		<color name="tableBackgroundAlternate" paletteColor="gray.light"/>
		<color name="tableBackgroundSubHeader" paletteColor="color.light"/>

Horizontal Tabs – cogadmin.xml

IBM Cognos Administration tabs
<!-- horizontal tabs -->
		<color name="htabsScrollButton" paletteColor="white"/>
		<color name="htabsScrollButtonBorder" paletteColor="gray.dark"/>
		<color name="htabsScrollButtonHover" paletteColor="color.lighter"/>
		<color name="htabsScrollButtonDisabled" paletteColor="white"/>
		<color name="htabsScrollButtonBorderDisabled" paletteColor="gray.normal"/>

		<color name="htabsBarBackground" paletteColor="gray.light"/>
		<color name="htabsText" paletteColor="hyperlink"/>
		<color name="htabsBorder" paletteColor="color.light"/>
		<color name="htabsBackground" paletteColor="white"/>
		<color name="htabsTextActive" paletteColor="color.dark"/>
		<color name="htabsBorderActive" paletteColor="gray.dark"/>
		<color name="htabsBackgroundActive" paletteColor="grey.light"/>
		<color name="htabsAltBarBackground" paletteColor="gray.light"/>
		<color name="htabsAltBorder" paletteColor="white"/>
		<color name="htabsAltText" paletteColor="hyperlink"/>
		<color name="htabsAltBackground" paletteColor="gray.light"/>
		<color name="htabsAltTextActive" paletteColor="color.normal"/>
		<color name="htabsAltBackgroundActive" paletteColor="white"/>

Tables in Security and Configuration Tab

The tables in these tabs are controlled by the same .css files that controls IBM Cognos Connection tables. So if IBM Cognos connection has already been modified, then you should see the same style.

Refer to Changing the table colour area in the Re-branding IBM Cognos Connection section.

Final Result

IBM Cognos Administration final result

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 Big data and analytics on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Big data and analytics, Information Management
ArticleID=498360
ArticleTitle=IBM Cognos Proven Practices: Customising the IBM Cognos 8.4.x UI
publish-date=08092010