Beruflich Dokumente
Kultur Dokumente
Copyright
Copyright © 2008 Cognos ULC (formerly Cognos Incorporated). Cognos ULC is an
IBM Company. 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. Cognos does not accept responsibility for any kind of loss
resulting from the use of information contained in this document. This document
shows the publication date. The information contained in this document is subject to
change without notice. Any improvements or changes to the information contained in
this document will be documented in subsequent editions. This document contains
proprietary information of Cognos. All rights are reserved. No part of this document
may be copied, photocopied, reproduced, stored in a retrieval system, transmitted in
any form or by any means, or translated into another language without the prior
written consent of Cognos. Cognos and the Cognos logo are trademarks of Cognos
ULC (formerly Cognos Incorporated) in the United States and/or other countries. IBM
and the IBM logo are trademarks of International Business Machines Corporation in
the United States, or other countries, or both. All other names are trademarks or
registered trademarks of their respective companies. Information about Cognos
products can be found at www.cognos.com
This document is maintained by the Best Practices, Product and Technology team.
You can send comments, suggestions, and additions to cscogpp@ca.ibm.com .
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..........................................................8
3.1 IMPORTING NEW STYLES ......................................................................................... 8
3.2 FILES USED WITH IBM COGNOS 8 STYLES ................................................................... 9
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 ................................................................. 11
4.2 RE-BRANDING QUERY STUDIO ................................................................................ 14
4.3 RE-BRANDING ANALYSIS STUDIO ............................................................................. 14
4.4 RE-BRANDING REPORT STUDIO ............................................................................... 15
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 ................................................................................ 31
5.3 RE-BRANDING ANALYSIS STUDIO ............................................................................. 36
5.4 RE-BRANDING REPORT STUDIO ............................................................................... 42
6. EXAMPLE 3 – USING BACKGROUND IMAGES ..............................................46
6.1 BACKGROUND .................................................................................................... 46
6.2 CREATING BACKGROUND IMAGES ............................................................................. 47
6.3 ADDING BACKGROUND IMAGES TO A STYLE ................................................................. 49
7. CONCLUSION ...............................................................................................50
8. APPENDIX – LIST OF PARAMETERS ............................................................51
1.1 APPENDIX A – IBM COGNOS CONNECTION – DEFAULT.CSS ............................................. 51
1.2 APPENDIX B – QUERY STUDIO – QSRVCOMMONUI.CSS ................................................. 54
1.3 APPENDIX C – ANALYSIS STUDIO - BACKGROUND.CSS .................................................... 55
1. Introduction
This document provides some tips and techniques when creating a custom style (or “skin”) in IBM
Cognos 8. This document provides an overview of the concepts, colors schemes, and files used for
skinning in IBM Cognos 8. It also provides some task-related examples to better illustrate all of the
changes necessary to create your own custom style. 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.
Background
Borders Text Screenshot
Colors
#999999
#CCCCCC #CCCCCC
#666699
#999999 #000000
#CCCCCC #666699
#FFFFFF
#EEECF3
Query Studio
Background
Borders Text Screenshot
Colors
Headers #FFFFFF
#BEC8DC #999999
#E3E9F3 #0000CC
Analysis Studio
Background
Borders Text Screenshot
Colors
#FFFFFF #E7E7E7 #FFFFFF
Headers
#E3E9F3 #DEAC77 #123679
#E3E9F3
#CCCCE3 #336699
#BEC8DC
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.
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
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.
#0000CC #CCCCE3
#123679
#BEC8DC #8BB093
#336699
#E3E9F3
#666699
#99AACC #2D5C3D
#999999
#CCCCCC #E7E7E7
#C8DDCA
#CC9966 #F3F3F3
#DEAC77
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. 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;
}
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;
}
5. Restart the IBM Cognos 8 service for these changes to take effect.
End Result
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.
Other Configuration Changes
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
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;
}
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
background-image: url(Images/title_bar_grapic.gif);
background-repeat: repeat-y;
background-position: left top;
background-attachment: fixed;
}
.logoImageContainer {
PADDING-RIGHT: 5px;
PADDING-LEFT: 3px;
BACKGROUND-COLOR: #2d5c3d;
}
color: #2d5c3d;
}
.clsMenuItemHighlight {
background-color: #8bb093
}
.clsMenuItemHeader {
background-color: #c8ddca
}
.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
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;
}
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
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;
}
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;
}
.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;
}
background-color: #f8f8dc;
}
.tableHeaderDivider
{
background-color: #ffce6d;
}
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;
}
{
border: #ffce6d 1px solid;
padding: 0px;
background-color: #ffce6d;
}
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;
border: #ffce6d 1px solid;
background-color: #ffffff;
}
.dialogDivider /* horizontal dividers e.g. actions dialog */
{
background-color: #f8f8dc;
}
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;
}
Query Studio will inherit some modifications made in IBM Cognos Connection, including the main
header.
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;
}
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%;
}
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;
}
background-color: #f8f8dc;
}
.clsCaretInsert
{
padding: 2px;
border: 1px solid #ffce6d;
background-color: white;
}
Note: When objects are placed onto the grid, the default cross-tab style is applied.
End Result –
.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;
}
.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;
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;
}
.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;
color: #333399;
padding: 3px 20px 3px 20px;
white-space: nowrap;
border-collapse : collapse;
text-decoration: underline;
font-family: Tahoma;
font-size: 70%;
font-weight: normal;
text-decoration: underline;
border-top: 1px solid #ffce6d;
border-bottom: 1px solid #ffce6d;
border-left: 1px solid #ffce6d;
border-right: 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
{
border-bottom : 1px solid #ffce6d;
}
.tab_right_border
{
border-right: 1px solid #ffce6d;
}
.tab_left_border
{
border-left: 1px solid #ffce6d;
}
.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;
}
.contextMenu_item_disabled
{
color: graytext;
white-space: nowrap;
text-decoration: none;
}
.contextMenu_item_disabled_over
{
color: graytext;
text-decoration: none;
}
.contextMenu_item_default_over
{
cursor: pointer;
cursor: hand;
font-weight : bold;
background-color: #f8f8dc;
border: 1px solid #ffce6d;
}
End Result –
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;
To modify the menu bar, perform the highlighted changes in the skin.css files:
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;
}
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:
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.
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 –
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.
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.
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;
}
.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.
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.
Borders at the end of the portal tabs
.tabCap #e7e7e7,
#999999
.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.
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.
.dialogDivider #cccccc Background color for the horizontal divider
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.
Menu Bar
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.
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
CSS Class Background Border Text Description
.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.