Beruflich Dokumente
Kultur Dokumente
Business Analytics
Customizing the IBM Cognos 8 UI 2
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
Customizing the IBM Cognos 8 UI 3
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
Customizing the IBM Cognos 8 UI 4
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
Business Analytics
Customizing the IBM Cognos 8 UI 5
Business Analytics
Customizing the IBM Cognos 8 UI 6
Background
Borders Text Screenshot
Colors
#336699 #E7E7E7 #FFFFFF
#999999
#CCCCCC #CCCCCC
#666699
#999999 #000000
#CCCCCC #666699
#FFFFFF
#EEECF3
Business Analytics
Customizing the IBM Cognos 8 UI 7
Query Studio
Background
Borders Text Screenshot
Colors
Headers #FFFFFF
#BEC8DC #999999
#E3E9F3 #0000CC
Business Analytics
Customizing the IBM Cognos 8 UI 8
Analysis Studio
Background
Borders Text Screenshot
Colors
#FFFFFF #E7E7E7 #FFFFFF
Headers
#E3E9F3 #DEAC77 #123679
#E3E9F3
#CCCCE3 #336699
#BEC8DC
Business Analytics
Customizing the IBM Cognos 8 UI 9
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
Customizing the IBM Cognos 8 UI 10
background.css
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
Business Analytics
Customizing the IBM Cognos 8 UI 11
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.
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:
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
Customizing the IBM Cognos 8 UI 12
#0000CC #CCCCE3
#123679
#BEC8DC #8BB093
#336699
#E3E9F3
#666699
#99AACC #2D5C3D
#999999
#CCCCCC #E7E7E7
#C8DDCA
#CC9966 #F3F3F3
#DEAC77
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;
}
Business Analytics
Customizing the IBM Cognos 8 UI 13
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-right: 20px;
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-right: 20px;
padding-left: 20px;
font-size: 70%;
color: #ff0000;
text-align: center;
background-color: #c8ddca;
border-bottom: #2d5d3d 1px solid;
border-top: #c8ddca 1px solid;
}
Business Analytics
Customizing the IBM Cognos 8 UI 14
<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
Business Analytics
Customizing the IBM Cognos 8 UI 15
End Result
Business Analytics
Customizing the IBM Cognos 8 UI 16
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
Customizing the IBM Cognos 8 UI 17
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,
TD.clsToolbarButton,
.clsQueryViewListViewHeader,
.clsQueryTabBackground
{
background-color: #ffffff;
}
End Result
Business Analytics
Customizing the IBM Cognos 8 UI 18
<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
Other Configuration Changes
In the default.css file, modify the following parameters individually:
Business Analytics
Customizing the IBM Cognos 8 UI 19
font-weight: bold;
color: #2d5c3d;
background-color: #8bb093;
cursor : pointer;
}
.tableSortTitle
{
font: 70% Tahoma, arial, geneva, helvetica, sans-serif;
font-weight: bold;
color: #2d5c3d;
background-color : #8bb093;
}
.tableSortTitleHover {
font: 70% Tahoma, arial, geneva, helvetica, sans-serif;
font-weight: bold;
color: #2d5c3d;
background-color : #8bb093;
cursor : pointer;
}
.tableItemCount
{
font-size: 70%;
font-weight: normal;
color: #2d5c3d;
}
.clsMenuItemHighlight {
background-color: #8bb093
}
.clsMenuItemHeader {
background-color: #c8ddca
}
Business Analytics
Customizing the IBM Cognos 8 UI 20
.dialogHeader {
BORDER-RIGHT: #c8ddca 1px solid;
BORDER-TOP: #c8ddca 1px solid;
BORDER-LEFT: #c8ddca 1px solid;
BORDER-BOTTOM: #c8ddca 1px solid;
HEIGHT: 24px;
BACKGROUND-COLOR: #2d5c3d;
}
End Result
Business Analytics
Customizing the IBM Cognos 8 UI 21
.menuBar
{
background-color: #2d5c3d;
background-image:;
background-repeat: no-repeat;
background-position: left bottom;
border-bottom: #2d5c3d 1px solid;
border-left: #c8ddca 0px solid;
border-top: #c8ddca 1px solid;
border-right: #c8ddca 1px solid;
height: 25px;
width:100%;
padding: 1px
}
End Result
Business Analytics
Customizing the IBM Cognos 8 UI 22
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:
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;
}
Business Analytics
Customizing the IBM Cognos 8 UI 23
background-color: #e72b41;
background-image: url(images/title_bar_grapic.gif);
background-repeat: repeat-y;
background-position: left top;
}
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
Business Analytics
Customizing the IBM Cognos 8 UI 24
{
font-size: 70%;
color: #333399;
}
.ccToolsLabel
{
font-size: 70%;
color: #333399;
}
Business Analytics
Customizing the IBM Cognos 8 UI 25
padding-right: 20px;
padding-left: 20px;
font-size: 70%;
color: #ffce6d;
text-align: center;
background-color: #f8f8dc;
border-left: #ffce6d 1px solid;
border-bottom: #ffce6d 1px solid;
border-top: #ffce6d 1px solid;
}
Modifies the Color and borders for non-selected tab immediately following the selected tab
.tabNormalAfterSelected
{
padding-right: 20px;
padding-left: 20px;
font-size: 70%;
color: #ffce6d;
text-align: center;
background-color: #f8f8dc;
border-bottom: #ffce6d 1px solid;
border-top: #ffce6d 1px solid;
}
Business Analytics
Customizing the IBM Cognos 8 UI 26
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;
}
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;
border: #f8f8dc 1px solid;
cursor: hand;
background-color: #ffffff;
}
.toolbarImageOver
{
padding: 2px;
border: #ffce6d 1px solid;
cursor: hand;
background-color: #f8f8dc;
}
.toolbarImagePressed
{
padding: 2px;
border: #ffce6d 1px solid;
cursor: hand;
background-color: #f8f8dc;
}
.toolbarImageOverPressed
{
padding: 2px;
border: #ffce6d 1px solid;
cursor: hand;
background-color: #f8f8dc;
}
Business Analytics
Customizing the IBM Cognos 8 UI 27
.toolbarImageUnavailable
{
padding: 2px;
border: #f8f8dc 1px solid;
background-color: #ffffff;
}
.toolbarFlyoutNormal
{
padding-left: 2px;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 4px;
border: #f8f8dc 1px solid;
cursor: hand;
background-color: #ffffff;
}
.toolbarFlyoutOver
{
padding-left: 2px;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 4px;
border: #ffce6d 1px solid;
cursor: hand;
background-color: #f8f8dc;
}
.toolbarDivider
{
width: 1px;
background-color: #f8f8dc;
}
.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
Customizing the IBM Cognos 8 UI 28
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
Customizing the IBM Cognos 8 UI 29
Business Analytics
Customizing the IBM Cognos 8 UI 30
}
.dialogHeader
{
border: #ffce6d 1px solid;
height: 24px;
background-color: #f8f8dc;
}
.dialogHeaderTitle
{
padding-left: 5px;
font-weight: bold;
font-size: 70%;
color: #333399;
padding-top: 3px;
}
.dialogClose /* close button */
{
border: #ffce6d 1px solid;
}
.dialogCloseOver
{
border: #333399 1px solid;
}
.dialogHeaderLinkcolor
{
color: #333399;
}
Command Buttons:
/* Command buttons (usually appear in dialog footers) */
.commandButton
{
border: #ffce6d 1px solid;
font-size: 90%;
background-color: #ffffff;
}
.commandButtonOver
{
border: #ffce6d 1px solid;
font-size: 90%;
cursor: hand;
background-color: #f8f8dc;
}.commandButtonDown
{
border: #ffce6d 1px solid;
font-size: 90%;
cursor: hand;
background-color: #f8f8dc;
}
.commandButtonInactive
{
font-size:90%;
width: 100%;
cursor: default;
color: #f8f8dc;
height: 100%;
text-decoration: none;
Business Analytics
Customizing the IBM Cognos 8 UI 31
Search path
.dialogSearchPathDisplayPanel
{
height: 45px;
overflow: auto;
word-wrap: break-word;
border: #ffce6d 1px solid;
padding:5px;
margin-right:5px;
}
Pop Up Windows
/* Modal dialogs */
.body_dialog_modal
{
background-color: #f8f8dc;
}
.dialogButtonBarPopup /* pop up dialog button bar- view search path */
{
height: 40px;
background: #f8f8dc;
border-right: #ffce6d 1px solid;
border-top: #ffce6d 1px solid;
border-left: #ffce6d 1px solid;
border-bottom: #ffce6d 1px solid;
}
.dialogWindowPopup /* pop up dialog - view search path */
{
border-right: #ffce6d 1px solid;
border-top: #ffce6d 1px solid;
border-left: #ffce6d 1px solid;
border-bottom: #ffce6d 1px solid;
z-index: 50;
padding-top: 10px;
background-color: #f8f8dc;
}
Business Analytics
Customizing the IBM Cognos 8 UI 32
Business Analytics
Customizing the IBM Cognos 8 UI 33
}
.mainHeader2
{
}
Crn.css
Modifies the background color for the toolbar.
.mainHeader3
{
background-color: #ffffff;
}
QSRVCommonUI
Controls the actual toolbar buttons and the borders surrounding them.
.toolbarButton {
padding: 1px 0px 0px 0px;
height:22px;
border: 1px solid #f8f8dc;
background-color: #ffffff;
}
Controls the colors when you click on an item from the toolbar
.toolbarButtonPressed {
padding: 1px 0px 0px 0px;
height:22px;
border : 1px solid #ffcd6d;
background-color: #f8f8dc;
cursor: pointer;
cursor: hand;
}
Business Analytics
Customizing the IBM Cognos 8 UI 34
Controls the entire background for the menu bar. By default, we’ll keep this white.
.menuBody {
background-color: #ffffff;
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%;
}
Business Analytics
Customizing the IBM Cognos 8 UI 35
Controls the border around the entire menu tree and the collapsed menu.
.menuContent,
.menuContentCollapsed {
color: #f8f8dc;
border: 1px solid #ffce6d;
padding: 3px;
}
.menuButton {
border: 1px solid #ffce6d;
border-collapse: collapse;
cursor: pointer;
cursor: hand;
}
Business Analytics
Customizing the IBM Cognos 8 UI 36
Note: When objects are placed onto the grid, the default cross-tab style is applied.
End Result –
Business Analytics
Customizing the IBM Cognos 8 UI 37
.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-family: Tahoma;
font-weight: bold;
text-decoration: underline;
Business Analytics
Customizing the IBM Cognos 8 UI 38
}
.menu_hover
{
background-color: #ffce6d;
border: 1px solid #ffce6d;
color:#000000;
padding: 2px;
padding-left: 5px;
padding-right: 5px;
}
.menu_pressed
{
padding: 2px;
padding-left: 5px;
padding-right: 5px;
background-color: #ffce6d;
border: 1px solid #ffce6d;
color:#000000;
}
.main_toolbar
{
position: absolute;
white-space: nowrap;
padding: 2px;
background-color: #f8f8dc;
border-bottom: 1px solid #ffce6d;
border-right: 1px solid #ffce6d;
overflow: hidden;
}
.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
{
background-color: #ffce6d;
border : 1px solid #e72b41;
border-left-width: 0px;
display: inline-block;
Business Analytics
Customizing the IBM Cognos 8 UI 39
padding: 1px;
cursor: pointer;
cursor: hand;
}
.toolbar_button_hover, .toolbar_dropdown_button_hover, .toolbar_arrow_hover
{
border : 1px solid #e72b41;
background-color: #ffce6d;
}
.toolbar_button_pressed, .toolbar_arrow_pressed, .toolbar_dropdown_button_pressed
{
border : 1px solid #e72b41;
background-color: #ffce6d;
}
.ToggleBar,.DlgTitleBar
{
overflow: hidden;
table-layout: fixed;
white-space:nowrap;
font-family: Tahoma;
font-size: 70%;
font-weight: bold;
color: #000000;
background-color: #ffce6d;
padding: 3px;
border : 1px solid;
border-color : #e72b41;
}
.ToggleBarTitle,.DlgTitle
{
overflow: hidden;
white-space: nowrap;
}
.ToggleBarArrow,.DlgCloseIcon
{
text-align: right;
border-style: solid;
/*default to same border color as toggle bar*/
border-color: #ffce6d;
border-width: 1px;
cursor: pointer;
cursor: hand;
}
.InfoContainer
{
background-color: #ffce6d;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color : #ffce6d;
overflow: auto;
overflow-x: hidden;
}
.ins_obj_title_bar{
overflow: hidden;
font-family: Tahoma;
font-size: 70%;
font-weight: bold;
color: #333399;
background-color: #ffce6d;
padding: 3px;
border : 1px solid;
border-color : #e72b41;
Business Analytics
Customizing the IBM Cognos 8 UI 40
.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: #333399;
background-color: #ffffff;
padding: 3px 20px 3px 20px;
Business Analytics
Customizing the IBM Cognos 8 UI 41
.contextMenu_body, .contextMenu_body_NS
{
background-color: white;
padding: 3px;
border: 1px solid #ffce6d;
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;
padding: 1px 0px 1px 3px;
border: 1px solid #FFFFFF ;
white-space: nowrap;
text-align: left;
cursor: default;
text-decoration: underline;
background-color: white;
color: #333399;
}
.contextMenu_item_over,.contextMenu_item_with_submenu_over
{
cursor: pointer;
cursor: hand;
background-color: #f8f8dc;
border: 1px solid #ffce6d;
}
.contextMenu_item_disabled
{
color: graytext;
white-space: nowrap;
text-decoration: none;
}
.contextMenu_item_disabled_over
{
color: graytext;
text-decoration: none;
}
Business Analytics
Customizing the IBM Cognos 8 UI 42
.contextMenu_item_default_over
{
cursor: pointer;
cursor: hand;
font-weight : bold;
background-color: #f8f8dc;
border: 1px solid #ffce6d;
}
End Result –
Business Analytics
Customizing the IBM Cognos 8 UI 43
DIV.clsMenubar,
TD.clsMenubarItem
{
background-color: #e72b41;
}
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-repeat: no-repeat;
background-position: right;
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,
Business Analytics
Customizing the IBM Cognos 8 UI 44
#idResizeBarToolboxRight,
.clsBigButtonBar,
BUTTON.clsBigCoolButton,
TD.clsToolbarButton,
.clsQueryViewListViewHeader,
.clsQueryTabBackground
{
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,
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
{
background-color: #e72b41;
}
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
Customizing the IBM Cognos 8 UI 45
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,*/
DIV.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
{
background-color: #ffce6d;
}
DIV.clsPaneHeader_inactive,
TD.clsModalDlgHeader_inactive
{
background-color: #d6f0b1;
}
DIV.clsPaneHeader_active,
.clsModalDlgHeader_active,
.clsToolDlgHeader_active,
#idProgressBar
{
background-color: #e72b41;
}
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.
DIV.clsPaneHeader_inactive,
.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
Customizing the IBM Cognos 8 UI 46
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,
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,
TD.clsToolbarButton,
.clsQueryViewListViewHeader,
.clsQueryTabBackground
{
background-color: #f8f8cd;
}
#idToolboxPane,
.clsPane_Toolbox_active,
.clsPane_Toolbox_inactive
{
background-color: #ffffff;
}
End result –
Business Analytics
Customizing the IBM Cognos 8 UI 47
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
Customizing the IBM Cognos 8 UI 48
Business Analytics
Customizing the IBM Cognos 8 UI 49
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
Customizing the IBM Cognos 8 UI 50
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;
background-image: url(images/header4.bmp);
background-repeat: repeat;
}
.mainHeader3
{
padding-top: 5px;
background-image: url(images/header5.bmp);
background-repeat: repeat;
border: #e3e9f3 0px solid;
}
.tabNormal
{
padding-right: 20px;
padding-left: 20px;
font-size: 70%;
color: #ff0000;
text-align: center;
background-image: url(images/portaltab.bmp);
background-repeat: repeat;
border-top: #afbac7 1px solid;
border-left: #afbac7 1px solid;
border-bottom: #afbac7 1px solid;
Business Analytics
Customizing the IBM Cognos 8 UI 51
.tabNormalAfterSelected
{
padding-right: 20px;
padding-left: 20px;
font-size: 70%;
color: #ff0000;
text-align: center;
background-image: url(images/portaltab.bmp);
background-repeat: repeat;
border-top: #afbac7 1px solid;
border-bottom: #afbac7 1px solid;
}
.boxHeaderBackground
{
background-color: #99aacc;
background-image: url(images/header4.bmp);
background-repeat: repeat;
}
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
Customizing the IBM Cognos 8 UI 52
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)
Portal Tabs
CSS Class Background Border Text Description
.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.
Background and border colors used
.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
Customizing the IBM Cognos 8 UI 53
#e7e7e7,
.tabCap
#999999
Borders at the end of the portal tabs
.tabBase #999999
.tabTail #999999
Hyperlinks
CSS Class Background Border Text Description
a #0000cc Color of most hyperlinked objects.
Path
CSS Class Background Border Text Description
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
CSS Class Background Border Text Description
.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.
Business Analytics
Customizing the IBM Cognos 8 UI 54
and dates.
.objectOptions #000000
My Pages
CSS Class Background Border Text Description
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.
Image Buttons
CSS Class Background Border Text Description
.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.
General Dialog
CSS Class Background Border Text Description
.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
Customizing the IBM Cognos 8 UI 55
Header
Most header items are inherited from the IBM Cognos Connection style.
CSS Class Background Border Text Description
.topbar_hyperlink_text #ffffff Text color of the hyperlinks on the top header.
Toolbar
CSS Class Background Border Text Description
.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
Customizing the IBM Cognos 8 UI 56
Menu Bar
CSS Class Background Border Text Description
.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
Headers
CSS Class Background Border Text Description
#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
Customizing the IBM Cognos 8 UI 57
Content Menu Style - When you select an item from a drop down, toolbar, or menu.
CSS Class Background Border Text Description
.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
CSS Class Background Border Text Description
.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
CSS Class Background Border Text Description
.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
Customizing the IBM Cognos 8 UI 58
Business Analytics