Customizing The Cognos 8 Ui

Proven Practice
Customizing the IBM Cognos 8 UI

Product(s): Cognos 8.1 and 8.2
Area of Interest: Infrastructure
Business Analytics
Customizing the IBM Cognos 8 UI 2
Copyright and Trademarks

Licensed Materials - Property of IBM.
© Copyright IBM Corp. 2010
IBM, the IBM logo, and Cognos are trademarks or registered trademarks of
International Business Machines Corp., registered in many jurisdictions worldwide.
Other product and service names might be trademarks of IBM or other companies. A
current list of IBM trademarks is available on the Web at
http://www.ibm.com/legal/copytrade.shtml
While every attempt has been made to ensure that the information in this document
is accurate and complete, some typographical errors or technical inaccuracies may
exist. IBM does not accept responsibility for any kind of loss resulting from the use of
information contained in this document. The information contained in this document
is subject to change without notice.
This document is maintained by the Best Practices, Product and Technology team.
You can send comments, suggestions, and additions to cscogpp@ca.ibm.com.
Business Analytics
Contents
1. INTRODUCTION.............................................................................................4
2. UNDERSTANDING THE COLOR SCHEME USED IN STYLES ............................4
2.1 DEFAULT COLORS USED WITH THE “CORPORATE” STYLE .................................................... 4
2.2 UNDERSTANDING HEXADECIMAL COLORS ....................................................................... 5
2.3 MAPPING COLORS TO SECTIONS OF THE USER INTERFACE .................................................. 5
3. CUSTOMIZING THE IBM COGNOS 8 UI .........................................................9
3.1 IMPORTING NEW STYLES .......................................................................................... 9
3.2 FILES USED WITH IBM COGNOS 8 STYLES ................................................................... 10
3.3 CHANGING TEXT, FONT TYPES, AND IMAGES ................................................................ 10
4. EXAMPLE 1 – QUICKLY RE-BRANDING IBM COGNOS 8 ..............................11
4.1 RE-BRANDING IBM COGNOS CONNECTION ................................................................... 12
4.2 RE-BRANDING QUERY STUDIO .................................................................................. 14
4.3 RE-BRANDING ANALYSIS STUDIO............................................................................... 15
4.4 RE-BRANDING REPORT STUDIO................................................................................. 16
4.5 RE-BRANDING METRICS MANAGER ............................................................................. 17
4.6 RE-BRANDING EVENT STUDIO .................................................................................. 20
5. EXAMPLE 2 – UNDERSTANDING THE VARIOUS DIFFERENT UI PARAMETERS21
5.1 RE-BRANDING IBM COGNOS CONNECTION ................................................................... 22
5.2 RE-BRANDING QUERY STUDIO .................................................................................. 32
5.3 RE-BRANDING ANALYSIS STUDIO............................................................................... 37
5.4 RE-BRANDING REPORT STUDIO................................................................................. 42
6. EXAMPLE 3 – USING BACKGROUND IMAGES ..............................................47
6.1 BACKGROUND ...................................................................................................... 47
6.2 CREATING BACKGROUND IMAGES .............................................................................. 48
6.3 ADDING BACKGROUND IMAGES TO A STYLE .................................................................. 50
7. CONCLUSION ...............................................................................................51
8. APPENDIX – LIST OF PARAMETERS ............................................................52
1.1 APPENDIX A – IBM COGNOS CONNECTION – DEFAULT.CSS .............................................. 52
1.2 APPENDIX B – QUERY STUDIO – QSRVCOMMONUI.CSS .................................................. 55
1.3 APPENDIX C – ANALYSIS STUDIO - BACKGROUND.CSS ..................................................... 56
Business Analytics
1. Introduction
1.1 Purpose
This document provides some tips and techniques when creating a custom style (or “skin”) in IBM
Cognos 8.1 and 8.2. 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. Two examples are shown; one which
demonstrates how to quickly re-brand IBM Cognos 8 to match corporate branding using find-and-
replace techniques and a second example which explores many different parameters and how
tweaking these parameters changes the corresponding UIs. A list of all commonly used parameters
can be found in the appendix. This document does not provide instructions on how to customize the
existing report styles.
1.2 Applicability
This document only applies to IBM Cognos 8.1 and 8.2
2. 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.
Business Analytics
#0000CC #CCCCE3 #000000 #F3F3F3
#123679 #99AACC #999999 #FFFFFF
#336699 #BEC8DC #CCCCCC #CC9966
#666699 #E3E9F3 #E7E7E7 #DEAC77
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.
Business Analytics
IBM Cognos Connection
Background
Borders Text Screenshot
Colors
#336699 #E7E7E7 #FFFFFF
#FFFFFF #F3F3F3 #0000CC

Headers
#F3F3F3 #999999 #000000
#999999
#FFFFFF #CC9900 #336699
Toolbar #E3E9F3 #E3E9F3
#CCCCCC #CCCCCC
#666699
#FFFFFF #000000 #0000CC
List View #E7E7E7 #999999 #336699
#999999 #000000
#FFFFFF #E7E7E7 #FFFFFF

My Pages
#99AACC #FFFFFF #000000
#CCCCCC #666699
#FFFFFF #CCCCCC #999999
#BEC8DC #999999 #000000

Dialogs
#E3E9F3 #336699 #336699
#E7E7E7 #BEC8DC #FFFFFF
#FFFFFF
#EEECF3
Business Analytics
Query Studio
Background
Colors
Headers #FFFFFF
#FFFFFF #CCCCCC #000000

Toolbar
#E3E9F3 #336699 #336699
#BEC8DC #999999
#FFFFFF #336699 #000000

Menu
Bar #E7E7E7 #336699
#E3E9F3 #0000CC
Blank #E3E9F3 #99AACC #000000

Report #BEC8DC #336699
Style
#000000
Business Analytics
Analysis Studio
Background
Colors
#FFFFFF #E7E7E7 #FFFFFF
Headers
#E3E9F3 #DEAC77 #123679
#E3E9F3
white #336699 #0000CC

Menu
Style #E3E9F3 graytext
Toolbar #F3F3F3 #CCCCCC
#CCCCE3 #336699
#BEC8DC
#FFFFFF #CCCCCC #0000CC

Insertable
Objects #336699
Object #99AACC #336699 #FFFFFF

Headers #E7E7E7 #99AACC
Business Analytics
3. 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 IBM Cognos Connection, click on the “Tools” menu and select Portal Administration.
3. Click on the “Styles” tab.
4. In this page, you will see a list of all of your existing styles. Click on “New Styles” icon
5. This will now open up a “New Style Wizard”. Give the style a name.
6. Under “Style Location Name” 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.
7. Once the style has been imported, you can view the style in the drop-down list in the preferences.
Business Analytics
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 Directory Files Images

Component
IBM Cognos /skins/my_style/port default.css /skins/my_style/portal/images

Connection al /skins/my_style/branding
Welcome Page /skins/my_style/port default.css /skins/my_style/portal/images

al /skins/my_style/branding
Report Studio /skins/my_style/pat skin.css /skins/my_style/pat/images
background.css
Analysis Studio /skins/my_style/ans explore.css /skins/my_style/ans/images
scrollbarstyle.css
crn.css
Query Studio /skins/my_style/qs QSRVCommonUI.c /skins/my_style/qs/images
ss
ags.css
Event Studio /skins/my_style/ags /skins/my_style/ags/images
crn.css
default.css /skins/my_style/cmm/images
Metrics /skins/my_style/cm
admin_styles.css /skins/my_style/cmm/presentatio
Manager m
n/images
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 c8_location/msgsdk directory. For changes to take effect, you must
restart the IBM Cognos 8 service.
Business Analytics
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.
4. Example 1 – Quickly 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.
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:
#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.
Business Analytics
#0000CC #CCCCE3
#123679
#BEC8DC #8BB093
#336699
#E3E9F3
#666699
#99AACC #2D5C3D
#999999
#CCCCCC #E7E7E7
#C8DDCA
#CC9966 #F3F3F3
#DEAC77
4.1 Re-branding IBM Cognos Connection

Files Used
<install location>/c8/webcontent/skins/my_style/portal/default.css
<install location>/c8/templates/ps/portal/system.xml
Find and Replace
In the default.css file perform a find and replace on the colors in the figure above. Save and close
this file.
Other Configuration Changes
Modify the following parameters individually:
1. Modify the IBM Cognos Connection header:
1. 2. 3.
.headerTitle
{
padding-left: 0px;
font-weight: bold;
font-size: 80%;
color: #000000;
background-color: #2d5d3d;
}
.headerTitleMiddle
{
background-color: #2d5d3d;
background-image: url(images/title_bar_grapic.gif);
background-repeat: repeat-y;
background-position: left top;
}
.crnOptions
{
font-size: 70%;
color: #c8ddca;
}
2. Modify the Portal Tabs
Business Analytics
1. 2. 3.
.tabNormal
{
padding-right: 20px;
padding-left: 20px;
font-size: 70%;
color: #ff0000;
text-align: center;
background-color: #c8ddca;
border-left: #c8ddca 1px solid;
border-bottom: #2d5d3d 1px solid;
border-top: #c8ddca 1px solid;
}
.tabSelected
{
padding-left: 20px;
font-weight: bold;
font-size: 70%;
color: #ffffff;
border-right: #2d5d3d 1px solid;
border-left: #2d5d3d 1px solid;
border-top: #2d5d3d 1px solid;
text-align: center;
background-color: #8bb093;
}
.tabNormalAfterSelected
{
padding-left: 20px;
font-size: 70%;
color: #ff0000;
text-align: center;
border-bottom: #2d5d3d 1px solid;
}
3. 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. Edit the system.xml file using Notepad or an XML editor.
3. Search for “”.
4. You will notice that this section is commented out. Un-comment out this section and add the
following section for your new style:

<param name="OEM">

<customHeader showContext="false" contextDelimiter="">

<style styleFolderName="my_style">
<table style="background-color:#2d5d3d">
<tr>
Business Analytics
<td><img
src="../skins/my_style/branding/bank_logo.gif"/></td>
</tr>
</table>
</style>
<style styleFolderName="corporate">
<table style="background-color:#ffffff">
<tr>
<td><img src="../skins/corporate/branding/my_logo.gif"/></td>
<td class="headerTitle" style="padding-right:2px;white-
space:nowrap"> My company </td>
</tr>
</table>
</style>
<style styleFolderName="classic">
<table style="background-color:#cccccc">
<tr>
<td><img src="../skins/classic/branding/my_logo.gif"/></td>
<td class="headerTitle" style="padding-right:2px;white-
space:nowrap"> My company </td>
</tr>
</table>
</style>
</customHeader>
</param>
5. Restart the IBM Cognos 8 service for these changes to take effect.
End Result
4.2 Re-branding Query Studio

Files used
<install location>/c8/webcontent/skins/my_style/qs/crn.css
<install location>/c8/webcontent/skins/my_style/qs/QSRVCommonUI.css
Find and Replace
In the two CSS files above, perform a find and replace on the colors in the figure above. Save
and close this file.
End Result
Business Analytics
4.3 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
<install location>/c8/webcontent/skins/my_style/ans/scrollbarstyle.css
Find and Replace
In all three CSS files above, perform a find and replace on the colors in the figure that we
matched above. Save and close this file.
In the background.css file, modify the following parameters individually:
.menubar
{
position: absolute;
overflow: hidden;
padding: 0px;
background-color: #2d5c3d;
border-bottom: 1px solid #2d5c3d;
border-top: 1px solid #c8ddca;
border-right: 1px solid #c8ddca;
}
.menubar_content_div
{
background-image: url(../../../skins/corporate/ans/images/title_bar_graphic_studios.gif);
padding: 2px;
border: 0px;
width: 578px;
}
End Result
Business Analytics
4.4 Re-branding Report Studio

Files used:
<install location>/c8/webcontent/skins/my_style/pat/skin.css
<install location>/c8/webcontent/skins/my_style/ans/explore.css
<install location>/c8/webcontent/skins/my_style/ans/scrollbarstyle.css
Find and Replace
In all three CSS files above, perform a find and replace on the colors in the figure that we
matched above. Save and close this file.
In the skin.css file, modify the following parameters individually:
DIV.clsMenubar
{
border-top: 1px solid #c8ddca;
border-right: 1px solid #c8ddca;
border-bottom: 2px solid #c8ddca;
border-left: 1px solid #c8ddca;
}
TD.clsMenubarItemLast
{
background-image: url(images/title_bar_graphic_rs.gif);
background-repeat: no-repeat;
background-position: right;
}
Find the colors “silver” and “gray” and replace with #c8ddca
TD.clsQuickTableGrid,
TD.clsQuickTableGrid_highlight
{
border: 1px solid #c8ddca;
}
DIV.clsPropertyDescriptionBox,
.clsWelcomeBanner
{
border: 1px solid #c8ddca;
Business Analytics
Modify some additional background colors – so that there is less green within a few of the
frames.
BODY,
BUTTON,
DIV.clsMenubar,
DIV.clsToolbar,
TD.clsMenubarItem,
TD.clsToolbarButton,
TABLE.clsMenuPopup,
.clsPopupDialog,
TD.clsMenuItem,
#idToolboxPane,
#idPropertiesPane,
.clsPane_Toolbox_active,
.clsPane_Toolbox_inactive,
.clsPane_Properties_inactive,
.clsPane_Workarea_inactive,
TABLE.clsModalDlg,
BUTTON.clsDlgButton,
BUTTON.clsXButton_active,
BUTTON.clsXButton_inactive,
#idExplorerBar,
TD.clsExplorerButton,
#idResizeBarToolboxBottom,
#idResizeBarToolboxRight,
.clsBigButtonBar,
BUTTON.clsBigCoolButton,
.clsQueryViewListViewHeader,
.clsQueryTabBackground
{
background-color: #ffffff;
}
End Result
4.5 Re-branding Metrics Manager

Files used:
Business Analytics
<install location>/c8/webcontent/skins/my_style/cmm/default.css
<install location>/c8/webcontent/skins/my_style/cmm/admin_styles.css
Find and Replace
Metrics Manager provides some slightly different accent colors. In all two CSS files above,
perform a find and replace on the colors in the figure that we matched above, but with the
following exceptions:
#999999 Æ #8bb093
#99AACC Æ #8bb093
#CCCCCC Æ #c8ddca
In the default.css file, modify the following parameters individually:
Modify the Main Header

.mainHeader1 {
BORDER-TOP: #c8ddca 1px solid;
PADDING-LEFT: 1px;
PADDING-BOTTOM: 1px;
BORDER-LEFT: #c8ddca 1px solid;
PADDING-TOP: 1px;
BORDER-BOTTOM: #2d5c3d 1px solid;
HEIGHT: 25px;
BACKGROUND-COLOR: #2d5c3d;
}
.headerTitle {
PADDING-LEFT: 0px;
FONT-WEIGHT: bold;
FONT-SIZE: 80%;
COLOR: #ffffff;
}
.headerTitleMiddle {
background-image: url(Images/title_bar_grapic.gif);
background-attachment: fixed;
}
.logoImageContainer {
PADDING-RIGHT: 5px;
PADDING-LEFT: 3px;
}
Modify the Table Style

.tableTitle {
font: 70% Tahoma, arial, geneva, helvetica, sans-serif;
font-weight: bold;
color: #2d5c3d;
}
.tableTitleHover
{
Business Analytics
font-weight: bold;
color: #2d5c3d;
background-color: #8bb093;
cursor : pointer;
}
.tableSortTitle
{
font-weight: bold;
color: #2d5c3d;
background-color : #8bb093;
}
.tableSortTitleHover {
font-weight: bold;
color: #2d5c3d;
background-color : #8bb093;
cursor : pointer;
}
.tableItemCount
{
font-size: 70%;
font-weight: normal;
color: #2d5c3d;
}
Modify the colors of the links and tabs

.pathSearchLabel {
font-weight: bold;
font-size: 70%;
color: #2d5c3d
}
Modifies the tabs

.clsButtonText{
font: bold 70% Tahoma, arial, geneva, helvetica, sans-serif;
color: #2d5c3d;
}
.clsMenuItemHighlight {
background-color: #8bb093
}
.clsMenuItemHeader {
background-color: #c8ddca
}
Modifies the selected item

.clsTreeTextBlack {
text-decoration: underline;
font-size: 70%;
color: #2d5c3d;
}
.clsTreeTextHighlight{
font: bold 70% Tahoma, arial, geneva, helvetica, sans-serif;
color: #2d5c3d;
}
Modifies the “GO Metrics” heading
Business Analytics
.dialogHeader {
BORDER-RIGHT: #c8ddca 1px solid;
BORDER-TOP: #c8ddca 1px solid;
BORDER-LEFT: #c8ddca 1px solid;
BORDER-BOTTOM: #c8ddca 1px solid;
HEIGHT: 24px;
}
End Result
4.6 Re-branding Event Studio

Files used:
<install location>/c8/webcontent/skins/my_style/ags/crn.css
<install location>/c8/webcontent/skins/my_style/ags/ags.css
Find and Replace
In all two CSS files above, perform a find and replace on the colors in the figure that we matched
above. Save and close this file.
In the crn.css file, modify the following parameters individually:
Business Analytics
.menuBar
{
background-color: #2d5c3d;
background-image:;
background-position: left bottom;
border-bottom: #2d5c3d 1px solid;
border-left: #c8ddca 0px solid;
border-right: #c8ddca 1px solid;
height: 25px;
width:100%;
padding: 1px
}
End Result
5. Example 2 – Understanding the Various different UI

Parameters
The first example provided a technique on how to quickly re-brand IBM Cognos 8 by replacing the
default colors in the CSS files with their respective colors scheme. While this approach is useful,
there are many instances where certain UI elements are replaced with undesired colors or you may
want a finer level of control over the color scheme. In these cases, you need to better understand all
of the parameters that make out the layout and selectively replace certain colors with your own colors.
Business Analytics
Using the same technique as the first approach and starting with the corporate style, you will modify
all IBM Cognos components one piece at a time. In this example, the main colors that you will use
will be:
#E72B41 #FFCE6D #F8F8DC #333399
5.1 Re-branding Cognos Connection

All branding related files are found in the <install_directory>/c8/webcontent/skins/your_style/portal
folder.
Task 1 – Modify the Top Line Header in IBM Cognos Connection

To modify the top header, perform the highlighted changes in the default.css file:
Main Header
Modifies the background of the main header banner
.mainHeader1
{
border-top: #e72b41 1px solid;
border-left: #e72b41 1px solid;
border-bottom: #e72b41 3px solid;
height: 25px;
padding: 1px;
background-color: #e72b41;
}
Modify the text color of the studio links

.crnOptions
{
font-size: 70%;
color: #ffffff;
}
Displays colors and images in the middle of the main header

.headerTitleMiddle
{
Business Analytics
background-image: url(images/title_bar_grapic.gif);
}
Color of the text that displays “IBM Cognos Connection”

.headerTitle
{
padding-left: 0px;
font-weight: bold;
font-size: 80%;
color: #ffffff;
}
Background color for the image (portal_icon.gif)

.logoImageContainer
{
padding-right: 5px;
padding-left: 3px;
}
A corporate logo can be added in place of the “IBM Cognos Connection” text by making the
appropriate changes to the system.xml file. These steps are described in detail above in Example
1. The IBM Cognos 8 service needs to be restarted for all system.xml change to take effect.
MY/Pharmacy
Expect something more
Task 2 – Modify the second line headers

To modify the second header and portal tabs, perform the highlighted changes in the default.css
file:
Header background, borders, and hyperlinked text

Modifies the background and border colors of the second and third headers.
.mainHeader2
{
border: #f8f8dc 2px solid;
padding: 2px;
height: 25px;
background-color: #f8f8dc;
}
.mainHeader3
{
padding-top: 5px;
}
Modifies the Hyperlinked Text

.ccOptions
{
font-size: 70%;
color: #333399;
}
.authOption
Business Analytics
{
font-size: 70%;
color: #333399;
}
.ccToolsLabel
{
font-size: 70%;
color: #333399;
}
Dynamic Scroll Button

.tabScrollButton
{
padding: 1px;
border: #ffce6d 1px solid;
cursor: hand;
}
.tabScrollButtonOver
{
padding: 1px;
cursor: hand;
background-color: #ffce6d;
}
.tabScrollButtonDisabled
{
padding: 1px;
cursor: default;
}
Portal Tab Bars

.tabBorder
{
}
.tabLabel
{
font-weight: bold;
font-size: 70%;
color: #e72b41;
}
.tabLink
{
font-size: 70%;
color: #e72b41;
}
Modifies the Text for the non-selected portal tabs

.tabAnchor
{
color: #e72b41;
}
Modifies the Colors and borders for non-selected tabs

.tabNormal
{
Business Analytics
padding-left: 20px;
font-size: 70%;
color: #ffce6d;
text-align: center;
border-left: #ffce6d 1px solid;
border-bottom: #ffce6d 1px solid;
border-top: #ffce6d 1px solid;
}
Modifies the Colors and borders for selected tabs

.tabSelected
{
padding-left: 20px;
font-weight: bold;
font-size: 70%;
color: #e72b41;
border-right: #ffce6d 1px solid;
text-align: center;
}
Modifies the Color and borders for non-selected tab immediately following the selected tab
{
padding-left: 20px;
font-size: 70%;
color: #ffce6d;
text-align: center;
}
Modifies the Borders for the end of the portal tab

.tabCap
{
width: 1px;
}
.tabBase
{
padding-left: 1px;
height: 20px;
}
.tabTail
{
font-size: 1px;
height: 20px;
}
Task 3 – Modifying Public Folders / My Folders
Business Analytics
To modify the portlets and table styles used in Public Folders / My Folders, perform the
highlighted changes in the default.css file:
1. To change the font color of the content hyperlinks, change the following parameter. (Note:
This parameter will only change content hyperlinks, such as object names and NOT studio,
portal, or other UI links).
a
{
color: #333399;
}
2. Modifying the table used for displaying Public Folders / My Folders:
Toolbar:
.objectName
{
font-size: 80%;
color: #000000;
}
.objectOptions
{
font-size: 70%;
color: #000000
}
.horizSpaceDetailView
{
padding-bottom: 20px;
}
.objectNoneFound
{
font-size: 70%;
color: #666699;
padding-top: 50px;
text-align: center;
}
.toolbarImageNormal
{
padding: 2px;
cursor: hand;
}
.toolbarImageOver
{
padding: 2px;
cursor: hand;
}
.toolbarImagePressed
{
padding: 2px;
cursor: hand;
}
.toolbarImageOverPressed
{
padding: 2px;
cursor: hand;
}
Business Analytics
.toolbarImageUnavailable
{
padding: 2px;
}
.toolbarFlyoutNormal
{
padding-left: 2px;
padding-top: 2px;
padding-right: 4px;
cursor: hand;
}
.toolbarFlyoutOver
{
padding-left: 2px;
padding-top: 2px;
padding-right: 4px;
cursor: hand;
}
.toolbarDivider
{
width: 1px;
}
.toolbarImageDefaultCursor
{
cursor: default;
}
Path
.pathLeafNode
{
font-weight: bold;
color: #333399;
}
.pathSeparator
{
color: #333399;
}
.pathLink
{
color: #333399;
}
List View
/* --- List control --- */
.pager_text
{
font-size: 70%;
color: #333399;
font-family: Tahoma;
Business Analytics
Controls the Border surrounding the table

.cctable
{
}
.rowDividerLine
{
}
.rowDivider
{
font-size: 0px;
width: 1px;
}
.rowHighlight
{
}
Controls the Background of the Table’s Header

.tableHeader
{
}
.tableHeaderDivider
{
}
Determines the color of the font used for the table’s header
.tableTitle
{
font-weight: bold;
font-size: 70%;
color: #333399;
}
.tableSortTitle
{
font-weight: bold;
color: #333399;
text-decoration: none;
}
.tableText
{
font-size: 70%;
color: #333399;
}
.tableItemCount
{
font-size: 70%;
color: #333399;
}
Business Analytics
3. Modifying the table used for displaying the Portlets on My Pages:

Controls the portlet header
/* Portlet Header */
.boxHeaderBackground
{
}
.boxHeader
{
padding: 2px;
font-weight: bold;
font-size: 80%;
color: #333399;
}
Controls the edit buttons

/* Portlet edit buttons */
.boxButtonNormal
{
padding: 0px;
}
.boxButtonOver
{
padding: 0px;
}
Task 4 – Clean up other Dialogs and Pages

Dialogs:
.pageEditorPortletColumn
{
color: #333399;
Business Analytics
}
.dialogHeader
{
height: 24px;
}
.dialogHeaderTitle
{
padding-left: 5px;
font-weight: bold;
font-size: 70%;
color: #333399;
padding-top: 3px;
}
.dialogClose /* close button */
{
}
.dialogCloseOver
{
border: #333399 1px solid;
}
.dialogHeaderLinkcolor
{
color: #333399;
}
Button on the bottom

.dialogButtonBar
{
background: #f8f8dc;
padding: 3px;
height: 40px;
}
Command Buttons:
/* Command buttons (usually appear in dialog footers) */
.commandButton
{
font-size: 90%;
}
.commandButtonOver
{
font-size: 90%;
cursor: hand;
}.commandButtonDown
{
font-size: 90%;
cursor: hand;
}
.commandButtonInactive
{
font-size:90%;
width: 100%;
cursor: default;
color: #f8f8dc;
height: 100%;
Business Analytics

}
.dialogDivider /* horizontal dividers e.g. actions dialog */
{
}
Search path
.dialogSearchPathDisplayPanel
{
height: 45px;
overflow: auto;
word-wrap: break-word;
padding:5px;
margin-right:5px;
}
Pop Up Windows
/* Modal dialogs */
.body_dialog_modal
{
}
.dialogButtonBarPopup /* pop up dialog button bar- view search path */
{
height: 40px;
background: #f8f8dc;
}
.dialogWindowPopup /* pop up dialog - view search path */
{
z-index: 50;
padding-top: 10px;
}
Business Analytics
Hovering Over Menu Items

.menuItemOver
{
padding: 1px;
color: #000000;
height: 20px;
}
5.2 Re-branding Query Studio

All branding related files are found in the <install_directory>/c8/webcontent/skins/your_style/qs
folder.
Query Studio will inherit some modifications made in IBM Cognos Connection, including the main
header.
Task 1 – Modifying the Header and Toolbar

To modify the top header, perform the highlighted changes in the QSRVCommonUI.css files:
Studio links in the top header */
.topbar_hyperlink_text {
cursor: pointer;
cursor: hand;
color: #333399 !important;
}
To place in a different colored header, add the appropriate parameters:
.mainHeader1
{
Business Analytics
}
.mainHeader2
{
}
Task 2 – Modifying the Toolbar

To modify the toolbar, perform the highlighted changes in the QSRVCommonUI.css files:
Crn.css
Modifies the background color for the toolbar.
.mainHeader3
{
}
QSRVCommonUI
Controls the actual toolbar buttons and the borders surrounding them.
.toolbarButton {
padding: 1px 0px 0px 0px;
height:22px;
border: 1px solid #f8f8dc;
}
Modifies the colors when you hover over a toolbar item.

.toolbarButtonOver {
height:22px;
border: 1px solid #ffcd6d;
cursor: pointer;
cursor: hand;
}
Controls the colors when you click on an item from the toolbar
.toolbarButtonPressed {
height:22px;
border : 1px solid #ffcd6d;
cursor: pointer;
cursor: hand;
}
Controls the colors when you hover over a toolbar item

.toolbarButtonOverPressed {
height:22px;
border : 1px solid #ffcd6d;
cursor: pointer;
cursor: hand;
}
Business Analytics
Task 3 – Modifying the Left-Hand Menu List

To modify the menu bar, perform the highlighted changes in the QSRVCommonUI.css files:
Controls the entire background for the menu bar. By default, we’ll keep this white.
.menuBody {
color: #000000;
padding-right : 5px;
padding-top : 12px;
padding-left: 5px;
}
.menuHeader {
font-size: 70%;
color: #333399;
border-collapse: collapse;
vertical-align: bottom;
font-weight: bold;
width:100%;
}
The show/hide menu arrow

.menuHeaderButton {
border: solid #ffce6d;
border-width: 1px 1px 0px;
cursor: pointer;
cursor: hand;
}
Background color of the Menu Pane

.menuItem,
.menuItemSpacer,
.menuItemSpacerTop {
border: solid #ffce6d;
border-width: 0px 1px;
}
Unselected Hyperlinks Colors

.menuItem,
.menuAction {
font-size: 70%;
color: #333399;
cursor: pointer;
cursor: hand;
}
Selected menu item

.menuItemSelected {
color: #333399;
cursor: default;
padding: 3px 10px;
Business Analytics
border: 1px solid #ffce6d;

height:20px;
font-size: 70%;
font-weight: bold;
}
Controls the border around the entire menu tree and the collapsed menu.
.menuContent,
.menuContentCollapsed {
color: #f8f8dc;
padding: 3px;
}
.menuButton {
cursor: pointer;
cursor: hand;
}
Task 4 – Modify the grid section

To modify the default empty grid, perform the highlighted changes in the QSReport.css files:
.startPageTextOver
{
font-size: 70%;
color: #333399;
}
.startPageListColumnTitle
{
padding: 3px 5px;
Business Analytics

line-break: strict;
}
.startPageListColumnTitleOver
{
padding: 3px 5px;
line-break: strict;
}
.startPageListColumn
{
padding: 3px 5px;
border-color: #ffce6d;
border-style: dashed;
line-break: strict;
background-color: none;
}
.startPageListColumnOver
{
padding: 3px 5px;
border-style: dashed;
line-break: strict;
}
.onDragOver
{
}
.clsCaretInsert
{
padding: 2px;
background-color: white;
}
Note: When objects are placed onto the grid, the default cross-tab style is applied.
Task 5 – Remaining Style Changes

Use Find and Replace using the same colors scheme on all CSS files in the qs/ folder.
End Result –
Business Analytics
5.3 Re-branding Analysis Studio

All branding related files are found in the <install_directory>/c8/webcontent/skins/your_style/ans
folder.
Task 1 – Modifying the Top Header

To modify the top menu header, perform the highlighted changes in the background.css files:
.menubar
{
position: absolute;
overflow: hidden;
padding: 0px;
background-color: #E72B41;
border-bottom: 1px solid #E72B41;
border-top: 1px solid #E72B41;
border-right: 1px solid #E72B41;
}
.menubar_content_div
{
background-image: url(../../../skins/corporate/ans/images/title_bar_graphic_studios.gif);
padding: 2px;
border: 0px;
width: 578px;
}
.menu, .menu_hover, .menu_pressed
{
cursor: pointer;
cursor: hand;
font-size: 8pt;
padding: 3px;
padding-left: 6px;
padding-right: 6px;
color: #ffffff;
display: inline-block;
font-weight: bold;
Business Analytics
}
.menu_hover
{
color:#000000;
padding: 2px;
padding-left: 5px;
padding-right: 5px;
}
.menu_pressed
{
padding: 2px;
padding-left: 5px;
padding-right: 5px;
color:#000000;
}
Task 2 – Modifying the Toolbar

To modify the toolbar, perform the highlighted changes in the background.css files:
.main_toolbar
{
position: absolute;
white-space: nowrap;
padding: 2px;
border-bottom: 1px solid #ffce6d;
border-right: 1px solid #ffce6d;
overflow: hidden;
}
.toolbar_button, .toolbar_button_hover, .toolbar_button_disabled, .toolbar_button_on,

.toolbar_button_off,.toolbar_button_on_hover, .toolbar_dropdown_button,
.toolbar_dropdown_button_hover,
.toolbar_button_pressed, .toolbar_dropdown_button_pressed
{
border : 1px solid #ffce6d;
padding : 1px;
/* pointer for standards compliant browsers, hand for ie 5.5*/
cursor: pointer;
cursor: hand;
}
.toolbar_button_on
{
border-color:#e72b41;
background-color:#ffce6d;
}
.toolbar_button_on_hover
{
border-color:#e72b41;
background-color:#ffce6d;
}
.toolbar_arrow, .toolbar_arrow_hover, .toolbar_arrow_pressed
{
border : 1px solid #e72b41;
border-left-width: 0px;
display: inline-block;
Business Analytics
padding: 1px;
cursor: pointer;
cursor: hand;
}
.toolbar_button_hover, .toolbar_dropdown_button_hover, .toolbar_arrow_hover
{
}
.toolbar_button_pressed, .toolbar_arrow_pressed, .toolbar_dropdown_button_pressed
{
}
Task 3 – Modifying the Menu Bar

To modify the menu bar, perform the highlighted changes in the background.css files:
.ToggleBar,.DlgTitleBar
{
overflow: hidden;
table-layout: fixed;
white-space:nowrap;
font-size: 70%;
font-weight: bold;
color: #000000;
padding: 3px;
border : 1px solid;
border-color : #e72b41;
}
.ToggleBarTitle,.DlgTitle
{
overflow: hidden;
}
.ToggleBarArrow,.DlgCloseIcon
{
text-align: right;
border-style: solid;
/*default to same border color as toggle bar*/
border-width: 1px;
cursor: pointer;
cursor: hand;
}
.InfoContainer
{
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color : #ffce6d;
overflow: auto;
overflow-x: hidden;
}
.ins_obj_title_bar{
overflow: hidden;
font-size: 70%;
font-weight: bold;
color: #333399;
padding: 3px;
border : 1px solid;
border-color : #e72b41;
Business Analytics
.tab_td_selected, .top_tab_td_selected
{
text-align: left;
border-collapse : collapse;
font-size: 70%;
font-weight: bold;
color: #333399;
border-right : 1px solid #ffce6d;

}
.tab_td_selected
{
border-bottom : 1px solid #ffce6d;
}
.top_tab_td_selected
{
border-top : 1px solid #ffce6d;
}
.tab_td_none_selected, .top_tab_td_none_selected,.top_tab_dummy_td_none_selected,.tab_dummy_td_none_selected
{
text-align: left;
color: #333399;
border-collapse : collapse;
font-size: 70%;
border-top: 1px solid #ffce6d;
border-bottom: 1px solid #ffce6d;
border-left: 1px solid #ffce6d;
}
.top_tab_dummy_td_none_selected{
border-top: 0px;
border-right: 0px;
}
.tab_dummy_td_none_selected {
border-bottom: 0px;
border-right: 0px;
}
.tab_td_none_selected
{
border-top : 1px solid #ffce6d;
}
.top_tab_td_none_selected
{
Business Analytics
border-bottom : 1px solid #ffce6d;

}
.tab_right_border
{
}
.tab_left_border
{
border-left: 1px solid #ffce6d;
}
Task 4 – Context Menu Style Changes

To modify the menu bar, perform the highlighted changes in the background.css files:
/**********************************************
* Context Menu Style
***********************************************/
.contextMenu_body, .contextMenu_body_NS
{
padding: 3px;
font-size: 8pt;
position: absolute;
visibility: visible;
left: -1000px;
cursor: default;
display: block;
overflow-y: auto;
}
.contextMenu_item, .contextMenu_item_with_submenu, .contextMenu_item_over , .contextMenu_item_with_submenu_over,
.contextMenu_item_disabled, .contextMenu_item_disabled_over, .contextMenu_item_default_over, .contextMenu_item_default
{
font-size: 8pt;
border: 1px solid #FFFFFF ;
text-align: left;
cursor: default;
color: #333399;
}
.contextMenu_item_over,.contextMenu_item_with_submenu_over
{
cursor: pointer;
cursor: hand;
}
.contextMenu_item_disabled
{
color: graytext;
}
.contextMenu_item_disabled_over
{
color: graytext;
}
Business Analytics
.contextMenu_item_default_over
{
cursor: pointer;
cursor: hand;
font-weight : bold;
}
End Result –
5.4 Re-branding Report Studio

All branding related files are found in the <install_directory>/c8/webcontent/skins/your_style/pat
folder.
In the Report Studio CSS file, many UI elements are grouped together. This allows you to quickly
modify the style, but it also means that much more tweaking is required to get the exact color
scheme you are looking for.
Task 1 – Modifying the Main Header

To modify the main header, perform the highlighted changes in the skin.css files:
Business Analytics
DIV.clsMenubar,
TD.clsMenubarItem
{
}
TD.clsMenubarItem
{
color: white;
border-top: 1px solid #e72b41;
border-left: 1px solid #e72b41;
border-right: 1px solid #e72b41;
border-bottom: 1px solid #e72b41;
}
TD.clsMenubarItemLast
{
background-image: url(images/title_bar_graphic_rs.gif) ;
background-position: right;
Task 2 – Modifying the Menu Bar

Since many UI elements are grouped together, we are just going to tweak two parameters and we
will notice that this will change many other UI elements.
To modify the menu bar, perform the highlighted changes in the skin.css files:
BODY,
BUTTON,
DIV.clsMenubar,
DIV.clsToolbar,
TD.clsMenubarItem,
TABLE.clsMenuPopup,
.clsPopupDialog,
TD.clsMenuItem,
#idToolboxPane,
#idPropertiesPane,
.clsPane_Toolbox_inactive,
TABLE.clsModalDlg,
#idExplorerBar,
Business Analytics
.clsBigButtonBar,
{
background-color: #f8f8cd;
}
BUTTON.clsCoolButton_hover,
TD.clsMenubarItem_up,
TD.clsToolbarButton_up,
BUTTON.clsCoolButton_pressed,
TD.clsMenubarItem_down,
TD.clsToolbarButton_down,
TD.clsToolbarButton_stuck,
TD.clsMenuItem_selected,
DIV.clsPaneHeader_inactive,
.clsListItem_hover,
.clsListItem_tb_selected,
.clsTreeNode_hover,
TD.clsPropertySheetLabel_active,
.clsModalDlgHeader_inactive,
TD.clsTabBox_active_hover,
TD.clsBottomTabBox_active_hover,
BUTTON.clsBigCoolButton_hover,
BUTTON.clsBigCoolButton_pressed,
TD.clsToolbarButton_down
{
}
All background items are now beige (#f8f8cd). Menu items, highlighted toolbars, and menu panes
are in dark beige (#ffce6d).
Since many of these UI elements are grouped together, many parameter changes span across
the entire UI. In the screenshot above, suppose that we wanted the un-highlighted windows in
the left-hand pane to appear in green (#d6f0b1) and the selected items in the menu pane to
appear in red (#e72b41). In this case, we remove these specific classes from the grouped list.
More specifically, we’re going to remove the following sections and then place them in their own
section:
Business Analytics
BUTTON.clsCoolButton_hover,
BUTTON.clsCoolButton_pressed,
TD.clsToolbarButton_down,
TD.clsToolbarButton_stuck,
TD.clsMenuItem_selected,
/*DIV.clsPaneHeader_inactive,*/
DIV.clsListItem_hover,
.clsListItem_tb_selected,
.clsTreeNode_hover,
TD.clsPropertySheetLabel_active,
/*.clsModalDlgHeader_inactive,*/
TD.clsTabBox_active_hover,
TD.clsBottomTabBox_active_hover,
BUTTON.clsBigCoolButton_hover,
BUTTON.clsBigCoolButton_pressed,
TD.clsToolbarButton_down
{
}
TD.clsModalDlgHeader_inactive
{
background-color: #d6f0b1;
}
DIV.clsPaneHeader_active,
.clsModalDlgHeader_active,
.clsToolDlgHeader_active,
#idProgressBar
{
}
Note: this will also change the color of the progress bar when you load Report Studio. If you want
to change this, you can place the #idProgressBar class into its own section and assign your own
background color to it.
Since we changed the inactive left-hand menu header to light green, the white text will be difficult
to view. So, in this case, we’ll change it to black.
.clsModalDlgHeader_inactive
{
color: black;
}
Again, since a lot of classes are grouped together, certain UI elements may not look exactly as
they should. For example, in the screenshot below, we may want to apply a “white” background
inside the frame.
Business Analytics
To do this, once again, we will need to place the associated classes in their own sections, as
shown below:
BODY,
BUTTON,
DIV.clsMenubar,
DIV.clsToolbar,
TD.clsMenubarItem,
TABLE.clsMenuPopup,
.clsPopupDialog,
TD.clsMenuItem,
/*#idToolboxPane,*/
#idPropertiesPane,
/*.clsPane_Toolbox_active,
.clsPane_Toolbox_inactive,*/
TABLE.clsModalDlg,
#idExplorerBar,
.clsBigButtonBar,
{
background-color: #f8f8cd;
}
#idToolboxPane,
.clsPane_Toolbox_inactive
{
}
Task 3 – Clean up the rest of the UI

Using Find-and-Replace, we can clean up the rest of the UI to match our color scheme.
End result –
Business Analytics
6. Example 3 – Using Background Images
Background
In the CSS files, instead of just specifying regular hexadecimal colors, you can use background
images. In fact, most common web sites heavily use background images to provide a nice fade affect
with their colors. This can be done with IBM Cognos 8 as well.
Business Analytics
Creating Background Images

The easiest way to create these background images would be to use PowerPoint. To do this:
1. Open PowerPoint
2. Using the drawing tools, drag a “rectangle” object onto the slide.
3. Double-click on the new object.

4. For the “Color:” picker, select “Fill Effects”.
Business Analytics
5. Choose a two-color gradient using.
6. In PowerPoint, resize the object so that it’s roughly the same size as where you want to place it.
For example, if you want to use this as a header, resize it “vertically” so that it’s roughly the right
size.
7. Copy and paste this object into Paint.
8. Go to Image > Attributes to verify the size of the image. As a guide, the IBM Cognos Connection
headers are roughly 25 pixels in height.
9. Go to Images > Stretch and Skew to adjust the image so that it fits vertically.
10. Save this image into either the branding or portal/images folder.
11. Repeat these steps for all of the images that you want to create.
Business Analytics
Adding Background Images to a Style

In this example, we’ll just look at how to quickly change the headers in IBM Cognos Connection, but
this same principle can be used for the other studios.
The “background-image” and “background-repeat” parameters can be used for any style attribute,
regardless of whether or not this parameter is already present by default. Additionally, the
background-image parameter will take precedence over the background-color parameter. This
means that it is not already present in an attribute, it can be added. For example, in the screenshot
above, the following parameters were changes:
.mainHeader1
{
border-right: #fffff 1px solid;
border-left: #fffff 1px solid;
border-bottom: #afbac7 0px solid;
height: 25px;
background-image: url(images/header3.bmp);
background-color: #336699;
background-repeat: repeat;
background-position: left bottom;
}
.mainHeader2
{
border: #e3e9f3 0px solid;
padding: 0px;
height: 25px;
}
.mainHeader3
{
padding-top: 5px;
border: #e3e9f3 0px solid;
}
.tabNormal
{
padding-left: 20px;
font-size: 70%;
color: #ff0000;
text-align: center;
background-image: url(images/portaltab.bmp);
border-top: #afbac7 1px solid;
border-left: #afbac7 1px solid;
Business Analytics
{
padding-left: 20px;
font-size: 70%;
color: #ff0000;
text-align: center;
background-image: url(images/portaltab.bmp);
border-top: #afbac7 1px solid;
}
.boxHeaderBackground
{
background-color: #99aacc;
}
After these background images have been added, other style changes shown in Example 1 and 2 can
be used to brand IBM Cognos 8.
7. Conclusion
IBM Cognos 8 provides administrators with the ability to drastically modify the look of IBM Cognos 8
and all of its components. IBM Cognos provides CSS files that govern the look and the color scheme
of IBM Cognos. By modifying these CSS files, admins can “skin” Cognos 8 to match their corporate
branding. This document provides a few tips and techniques on how users can better understand
how to modify the default IBM Cognos UIs.
Business Analytics
8. Appendix – List of Parameters
1.1 Appendix A – IBM Cognos Connection – Default.css
Top Header
CSS Class Background Border Text Description
#e7e7e7,
.mainHeader1 #336699 Background color of the main header
#cc9966
Text colors for hyperlinked studio
.crnOptions #ffffff
links
Color and images used in the middle
.headerTitleMiddle #336699
of the main header
Background color for the IBM Cognos
.logoImageContainer #ffffff
Connection image (icon_portal.gif)
Header 2 and Header 3

Background and border colors used for
.mainHeader2 #f3f3f3 #f3f3f3
Header 2.
.mainHeader3 #f3f3f3 Background color used for Header 3.
Hyperlinked colors for “Preferences”
.ccOptions #0000cc
and “Help”.
.authOption #0000cc Hyperlink colors for Logon / Logoff.
.ccToolsLabel #0000cc Hyperlink color for “Tools”
Color of the vertical line separating
.ccOptionsDivider #999999
“Home” and “Preferences”.
Text color used to display the user
.userName #000000
logged in.
Portal Tabs
.tabBorder #999999
.tabLabel #336699
.tabLink #336699
Background and border colors used
.tabScrollButton #ffffff #999999 for the “scrolling” button to the right of
the portal tabs.
.tabScrollButtonOver #ffffff #999999 when you hover over the “scrolling”
buttons.
.tabScrollButtonDisa Background and border colors used
#ffffff #cccccc
bled when the “scrolling” button is disabled.
.tabAnchor #0000cc
#e7e7e7, Color used for non-selected portal
.tabNormal #ffffff #ff0000
#999999 tabs.
.tabSelected #ffffff #999999 #336699 Colors used for the selected portal tab.
.tabNormalAfterSele #e7e7e7, Colors used for the portal tab to the
#ffffff #ff0000
cted #999999 right of the one selected.
Business Analytics
#e7e7e7,
.tabCap
#999999
Borders at the end of the portal tabs
.tabBase #999999
.tabTail #999999
Public Folders / My Folders
Hyperlinks
a #0000cc Color of most hyperlinked objects.
Path
Color used to display the current folder you
.pathLeafNode #336699
are in.
.pathSeparator #0000cc Color used to display the folder separator “>”.
Color used to display the hyperlinked
.pathLink #0000cc
breadcrumb path.
Toolbar
.toolbarImageNormal #ffffff #cccccc Colors for toolbar items.
Colors when you hover over a
.toolbarImageOver #ffffff #e3e9f3
toolbar item.
.toolbarImagePressed #e3e9f3 #666699 Colors when you click on a toolbar
.toolbarImageOverPressed #c6c6d7 #666699 item.
Colors when a toolbar image is not

.toolbarImageUnavailable #ffffff
found.
.toolbarFlyoutNormal #ffffff #cccccc when the “scrolling” button is
disabled.
.toolbarFlyoutOver #ffffff #666699
.toolbarDivider #cccccc
Table – List View

#000000,
.cctable #ffffff Outer borders surrounding the table
#999999
.tableHeader #e7e7e7 Background color for the table header.
Vertical line separating the columns in
.tableHeaderDivider #999999
the table header.
Text for column names in the table
.tableTitle #336699
header.
.tableSortTitle #336699 Text for “Sort” in table header.
Text used for the table (except
.tableText #000000
hyperlinks).
Table – Detail View

.objectName #000000 Text colors used to display descriptions
Business Analytics
and dates.
.objectOptions #000000
My Pages
Outer border surrounding the
.boxborder #e7e7e7
portlets.
The “edit”, “minimize”, and
.boxButtonNormal #ffffff #ffffff
“maximize” buttons on the portlets.
The “edit”, “minimize”, and
.boxButtonOver #ffffff #ffffff “maximize” buttons on the portlets –
when hovered over.
Background color of the portlet
.boxHeaderBackground #99aacc
header.
.boxBody table #000000 Text color used within the portlet.
Text color used within the portlet
.boxHeader #ffffff
header.
Colors used in the portlet window
.pageEditorPortletColumn #ffffff #cccccc #666699
within the page editor.
Dialogs, Command Buttons, and Popups
Image Buttons
.button #ffffff #cccccc Colors used for the image button.
.button_hover #bec8dc #99aacc Colors used when hovering over the image buttons.
.button_pressed #bec8dc #336699 Colors used when you click on an image button.
Command Buttons, like OK and Cancel at the bottom of dialogs.

.commandButton #ffffff #999999
for command buttons.
Colors used when hovering over a
.commandButtonOver #e3e9f3 #999999
command button.
Colors used when you click on a
.commandButtonDown #e3e9f3 #999999
command button.
Colors used when a command button
.commandButtonInactive #ffffff #999999 #999999
is inactive.
Text color used when a command
.commandButtonActive #000000
button is active.
Special command button that only
.simpleCmdButtonActive #ffffff #cccccc #000000
used in a few pop-ups.
General Dialog
.dialogHeader #99aacc #336699 Colors used around the dialog headers.
.dialogHeaderText #336699 Colors used in the introductory dialog text.
.dialogHintText #336699 Colors used for generic hints.
.dialogHeaderTitle #ffffff Text color used for the dialog headers.
.dialogClose #bec8dc Border surrounding the “X” button.
Border surrounding the “X” button when
.dialogCloseOver #ffffff
hovered over.
Business Analytics
Background color for the horizontal divider

.dialogDivider #cccccc
used in dialogs, like the “action” button.
Colors used in the bar that displays the
.dialogButtonBar #e7e7e7 #cccccc
“OK” and “Cancel” buttons.
.dialogSearchPathDispl Borders used in the search path pop-up
#336699
ayPanel window.
.dialogHeaderLinkColor #ffffff
.body_dialog_modal #e3e9f3 Colors used in modal dialogs.
#cccccc, Colors used for the dialog button in the
.dialogButtonBarPopup #e7e7e7
#bec8dc “view search path” pop-up.
#cccccc,
.dialogWindowPopup #e3e9f3 #eeecf3,
#ffffff
.messageText #000000 Text color used for dialog messages.
.menuItemOver #e3e9f3 #000000
.menuItemNormal #ffffff #000000
Email Body, Links, and Attachments

.emailItem #ffffff #ffffff
.emailItem_active #e3e9f3 #191970
.emailItem_hover #e3e9f3 #191970
.emailBodyTableRow #99aacc
.emailLinksAttachmentTableRow #99aacc
1.2 Appendix B – Query Studio – QSRVCommonUI.css
Header
Most header items are inherited from the IBM Cognos Connection style.
.topbar_hyperlink_text #ffffff Text color of the hyperlinks on the top header.
Toolbar
.toolbarButton #ffffff #cccccc Colors used for the toolbar button.
.toolbarButtonOver #e3e9f3 #336699 Colors used when you hover over a toolbar button.
.toolbarButtonPressed #e3e9f3 #cccccc Colors used when you click on a toolbar button.
.toolbarButtonOverPressed #bec8dc #336699 Colors used when you click on a toolbar button.
Colors used for the section that contains all toolbar
.toolbarBody #ffffff #000000
items.
.dlgHeader #336699 #336699 Border and text colors for the dialog headers.
.dialogButton #999999 Border color for the dialog button.
.dialogButtonOver #e3e9f3 #336699 Colors when you hover over a dialog button.
.dialogButtonText #000000 Text color of the dialog buttons.
Business Analytics
Menu Bar
.menuBody #ffffff #000000 Controls the entire background behind the menu bar.
.menuButtonBody #ffffff #000000
.previewBody #e7e7e7 #000000 Colors used when in preview mode.
.previewBodyClosed #ffffff #000000
.menuHeader #336699 Text color used for the word “Menu”.
.menuHeaderButton #336699 Text color used in the menu button.
.menuItem #e3e9f3 #336699 #0000cc Colors used in the menu pane.
.menuItemSpacer #e3e9f3 #336699
Text color used for the non-selected hyperlinked
.menuAction #0000cc
menu items.
.menuItemSelected #336699 #336699 Colors used for the selected menu items.
Text color used when loading metadata objects in
.metadataLoading #000000
the insertable objects pane.
Text and borders used for menu content after you
.menuContent #336699 #336699
select a menu item.
Text and border colors used when the menu has
.menuContentCollapsed #336699 #336699
been collapsed.
Border used around the menu button, when
.menuButton #336699
collapsed.
QSReport.css
Blank Report Style

.startPageText #000000 Text instructions within the crosstab.
.startPageTextOver #336699 Text when you hover over a section.
.startPageListColumnTitle #bec8dc #99aacc Header colors for the crosstab.
.startPageListColumnTitleOver #000000 #99aacc Header colors when you hover over.
.startPageListColumn #99aacc Body color of the crosstab.
.startPageListColumnOver #e3e9f3 #99aacc Color when you hover over the body of a crosstab.
1.3 Appendix C – Analysis Studio - background.css
Headers
#e7e7e7,
.menubar #ffffff Colors for the top menu bar.
#deac77
Image used in the background on the
.menubar_content_div title_bar_graphic_studios.gif
header.
.menu #ffffff Text color used for menu items.
Colors used when you hover over the
.menu_hover #e3e9f3 #e3e9f3 #123679
menu list or a menu action.
Color used when you click on a menu
.menu_pressed #e3e9f3 #e3e9f3 #123679
action.
Business Analytics
Content Menu Style - When you select an item from a drop down, toolbar, or menu.
.contextMenu_body Colors for the entire menu
White #336699
.contentMenu_body_NS section.
.contextMenu_item
#ffffff #0000cc
.contextMenu_item_with_submenu
.contextMenu_item_over
.contextMenu_item_with_submenu_over
#e3e9f3 #99aacc #0000cc Colors for selected menu items.
.contextMenu_item_default_over
.contextMenu_item_default
.contextMenu_item_disabled
#ffffff Graytext
.contextMenu_item_disabled_over
Toolbars
.main_toolbar
.toolbar_button
.toolbar_button_hover
.toolbar_button_disabled
.toolbar_button_off #f3f3f3 #cccccc Colors used in the main toolbar.
.toolbar_dropdown_button
.toolbar_dropdown_button_hover
.toolbar_button_pressed
.toolbar_dropdown_button_pressed
.toolbar_button_on #cccce3 #cccccc Colors used for toolbar items.
Colors used when you hover over a
.toolbar_button_on_hover #bec8dc #336699
toolbar item.
.toolbar_arrow
Colors used for dropdown toolbar
.toolbar_arrow_hover #f3f3f3 #cccccc
items.
.toolbar_arrow_pressed
Insertable Objects
.tab_td_selected Colors for the selected tabs below
#ffffff #cccccc #336699
.top_tab_td_selected “insertable objects”.
.tab_td_none_selected
.top_tab_td_none_selected Colors used for the non-selected
#cccccc #0000cc
.top_tab_dummy_td_none_selected tabs in “insertable objects”
.tap_dummy_td_none_selected
.tab_right_border Border colors surrounding
#cccccc
.tab_left_border “insertable objects”
Toggle bar, Dimensional Viewer Title Bar, and Property Pane Title Bar
Business Analytics

.ToogleBar #99aacc #336699 #ffffff Colors used the header of the toogle bar.
.DlgTitleBar
.ToogleBarArrow #99aacc
.DlgCloseIcon
.InfoContainer #e7e7e7 #99aacc Colors used in the “Information” window.
Colors used for the “Insertable Objects” title
.ins_obj_title_bar #99aacc #336699 #ffffff
bar.
Business Analytics

Customizing The Cognos 8 Ui

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Customizing The Cognos 8 Ui

Uploaded by

Copyright:

Available Formats

Proven Practice

Customizing the IBM Cognos 8 UI

Copyright and Trademarks

© Copyright IBM Corp. 2010

2. Understanding the Color Scheme used in Styles

#0000CC #CCCCE3 #000000 #F3F3F3

#123679 #99AACC #999999 #FFFFFF

#336699 #BEC8DC #CCCCCC #CC9966

#666699 #E3E9F3 #E7E7E7 #DEAC77

Understanding Hexadecimal Colors

Mapping Colors to Sections of the User Interface

IBM Cognos Connection

#FFFFFF #F3F3F3 #0000CC

#FFFFFF #CC9900 #336699

Toolbar #E3E9F3 #E3E9F3

#FFFFFF #000000 #0000CC

List View #E7E7E7 #999999 #336699

#FFFFFF #E7E7E7 #FFFFFF

#FFFFFF #CCCCCC #999999

#BEC8DC #999999 #000000

#E7E7E7 #BEC8DC #FFFFFF

#FFFFFF #CCCCCC #000000

#FFFFFF #336699 #000000

Blank #E3E9F3 #99AACC #000000

white #336699 #0000CC

Toolbar #F3F3F3 #CCCCCC

#FFFFFF #CCCCCC #0000CC

Object #99AACC #336699 #FFFFFF

3. Customizing the IBM Cognos 8 UI

Importing New Styles

Files Used with IBM Cognos 8 Styles

IBM Cognos Directory Files Images

IBM Cognos /skins/my_style/port default.css /skins/my_style/portal/images

Welcome Page /skins/my_style/port default.css /skins/my_style/portal/images

Report Studio /skins/my_style/pat skin.css /skins/my_style/pat/images

Analysis Studio /skins/my_style/ans explore.css /skins/my_style/ans/images

System.xml – The system.xml file (<install location>\c8\templates\ps\portal directory) is used to

Changing Text, Font Types, and Images

4. Example 1 – Quickly Re-branding IBM Cognos 8

#2D5C3D #C8DDCA #8BB093

4.1 Re-branding IBM Cognos Connection

1. Modify the IBM Cognos Connection header:

2. Modify the Portal Tabs

3. Replacing the IBM Cognos Connection text with a corporate logo

<customHeader showContext="false" contextDelimiter="">

4.2 Re-branding Query Studio

4.3 Re-branding Analysis Studio

4.4 Re-branding Report Studio

4.5 Re-branding Metrics Manager

Modify the Main Header

Modify the Table Style

Modify the colors of the links and tabs

Modifies the tabs

Modifies the selected item

Modifies the “GO Metrics” heading

4.6 Re-branding Event Studio

5. Example 2 – Understanding the Various different UI

#E72B41 #FFCE6D #F8F8DC #333399

5.1 Re-branding Cognos Connection

Task 1 – Modify the Top Line Header in IBM Cognos Connection

Modify the text color of the studio links

Displays colors and images in the middle of the main header