![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
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.
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.
Understanding Hexadecimal Colors
The best way to pick your colors is to go into your web site, snapshot the screen and take it into Paint Shop Pro (PSP). Then use the paint dropper tool to find out the colors HEX values by clicking on the color and double-clicking on the color on the right panel.
Mapping Colors to Sections of the User Interface
The diagrams below provide examples of the color scheme used with the default "corporate" style. It can be used as a guide to determine how to match your color scheme with the predefined one.
IBM Cognos Connection
Query Studio
Analysis Studio
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.
Before creating a new style, you must first import a style.
To import a new style:
- 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.
- Login to Cognos Connection, and launch IBM Cognos Administration
- Click on the "Configuration" tab then 'Styles'
- In this page, you will see a list of all of your existing styles. Click on "New Style" icon
- This will now open up a "New Style Wizard". Give the style a name. Click Next.
- Under "Style Resource Location" provide the exact folder name. A preview page can be used if you want to preview the style. The location for this preview page is shown below. Click Finish.
- The new style will now be in the list.
- Once the style has been imported, you can view the style in the drop-down list in 'My Preferences'.
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 Components | File and Location | Images |
|---|---|---|
| IBM Cognos Connection | skins/my_style/portal/default.css /skins/my_style/shared/banner.css /c8/template/ps/portal/system.xml | /skins/my_style/portal/images /skins/my_style/branding |
| Report Studio | /skins/my_style/pat/skin.css /skins/my_style/pat/hal_skin_corportate.css | /skins/mystyle/hal/images |
| Analysis Studio | /skins/my_style/ans/background.css /skins/my_style/ans/explore.css | /skins/my_style/ans/images |
| Query Studio | /skins/my_style/qs/crn.css /skins/my_style/portal/default.css /skins/my_style/qs/QSRVCommonUI.css /skins/my_style/shared/banner.css /skins/my_style/prompting/QSReport.css | /skins/my_style/qs/images |
| Event Studio | /skins/my_style/portal/default.css /skins/my_style/prompting/promptCommon.css /skins/my_style/ags/ags.css /skins/my_style/ags/crn.css | /skins/my_style/ags/images |
| IBM Cognos Administration | <install location>/c8/webapps/p2pd/WEB-INF/fragments/styles/cogadmin.xml |
System.xml – The system.xml file (<install location>\c8\templates\ps\portal directory) is used to modify functionality or hide certain sections of the user interface. Most of the parameters in this file apply for all users.
Changing Text, Font Types, and Images
Changing Component Names and Text Messages – You can change the names of IBM Cognos 8 components and modify the accompanying text messages by opening the relevant message file in a text editor and performing a search-and-replace on the text strings and calls you want to change. The message files are located in the <install-location>/c8/msgsdk directory. For changes to take effect, you must run the Localization Development Kit (LDK) in accordance with the LDK Installation and User Guide.
Changing IBM Cognos 8 Fonts – You can change the fonts used in IBM Cognos 8 by modifying the font-family list in the file <install-location>/c8/webcontent/skins/my_style/fonts.css. Modify the fonts.css file associated with the style you want. For example, we can change the default font used on all HTML interfaces, except Report Studio, to one more suited to rendering special Asian characters. Open the file fonts.css in a text editor, comment out the section that shows Tahoma as the first item in the font-family list, and then remove the comment from an entry that better meets your Unicode requirements.
Changing IBM Cognos Images – All images are located with the style directory. The table above shows the location of all of the images by component. You can easily change the image location by placing your own custom image in this directory and using the same file name.
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:
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.
The following sections shows what parts of the UI are being modified and what file(s) needs to be changed in order to complete the modification. This section does not show all the parameters but it give a good sense of the most commonly changed items.
Re-branding IBM Cognos Connection
Files Used
- <install location>/c8/webcontent/skins/my_style/portal/default.css
- <install location>/c8/webcontent/skins/my_style/shared/banner.css
- <install location>/c8/templates/ps/portal/system.xml
Modify the Main Header: banner.css
background colour
.mainHeader1
{
padding: 1px;
background-color: #2d5d3d;
border-bottom: #2d5d3d 3px solid;
height:28px;
width:100%;
} |
colour of the title in the bar
.headerTitle
{
padding-left: 5px;
font-weight: bold;
background-color: #2d5d3d;
font-size: 75%;
color: #ffffff;
vertical-align: middle;
white-space:nowrap;
} |
blank area between the title and the buttons
.mainHeader1Middle
{
width:100%;
/* background-image: url(../shared/images/banner_middle.gif) */
background-repeat: repeat-y;
} |
Modify the Portal Tabs: default.css
inside of the unselected tab
.tabNormal
{
padding-right: 20px;
padding-left: 20px;
font-size: 70%;
text-align: center;
background-color: #c8ddca;
border-bottom:#999999 1px solid;
border-top:#c8ddca 1px solid;
} |
inside of the selected tab
.tabSelected
{
padding-right: 20px;
padding-left: 20px;
border-top:#999999 1px solid;
font-weight: bold;
font-size: 70%;
color: #ffffff;
text-align: center;
background-color:#8bb093;
} |
space behind the tabs
.tabBarContainer
{
width: 100%;
height: 20px;
background-color:#c8ddca;
} |
back background of the tabs
.mainHeader3
{
padding-top: 5px;
background-color: #c8ddca;
} |
sides of the tabs (In the corporate skin, the sides are images. In the example we are removing them.)
.tabLeftSelected
{
height:100%;
width:7px;
background-image:/* url(../shared/images/tab_selected_l.gif) */ ;
background-repeat: no-repeat;
}
.tabRightSelected
{
height:100%;
width:7px;
background-image:/* url(../shared/images/tab_selected_r.gif) */ ;
background-repeat: no-repeat;
}
.tabLeftNormal
{
height:95%;
width:6px;
background-image:/* url(../shared/images/tab_normal_l.gif) */ ;
background-repeat: no-repeat;
border-bottom:#999999 1px solid;
}
.tabRightNormal
{
height:95%;
width:6px;
background-image:/* url(../shared/images/tab_normal_r.gif) */ ;
background-repeat: no-repeat;
border-bottom:#999999 1px solid;
} |
buttons
.tabMenuButtonNormal
{
border: #c8ddca 1px solid;
padding:1px;
cursor:pointer;
background-color:#c8ddca;
}
.tabMenuButtonOver
{
border: #8bb093 1px solid;
padding:1px;
cursor:pointer;
background-color:#8bb093;
} |
un-selected tab font colour.
.tabAnchor
{
color: #2d5d3d;
} |
Modifying the Path: default.css
Changing the colour of the parent node. (This changes all text that is underlined.)
a
{
color: #2d5d3d;
} |
colour of the child node
.pathLeafNode
{
font-weight: bold;
color: #2d5d3d;
} |
Changing the table colour: default.css
table header background colour
.tableHeader
{
background-color: #8bb093;
} |
header titles (.tableSortTitle change all header name that are able to sort.)
.tableTitle
{
font-weight: bold;
font-size: 70%;
color: #2d5d3d;
}
.tableSortTitle
{
font-weight: bold;
color: #2d5d3d;
text-decoration: none;
}
|
selectable text in the table
a
{
color: #2d5d3d;
} |
non-selectable text in the table
.tableText
{
font-size: 70%;
color: #2d5d3d;
} |
Fly-out Menus: default.css
text
.text
{
font-size: 70%;
color: #2d5d3d;
} |
background of the menu and borders
.flyOutMenu
{
border: #2d5d3d 1px solid;
font-weight: normal;
font-size: 100%;
overflow-x: hidden;
overflow: auto;
background-color: #c8ddca;
} |
hover colour
.menuItemOver
{
text-decoration:underline;
cursor:pointer;
color: #000000;
height: 20px;
background-color: #8bb093;
} |
normal display colour of the link.
.menuItemNormal
{
text-decoration:underline;
cursor:pointer;
color: #000000;
height: 20px;
background-color: #c8ddca;
} |
Replacing the IBM Cognos Connection text with a corporate logo
To add your own corporate logo:
- Place image in the folder <install location>/c8\webcontent\skins\my_style\branding
- In the /c8/template/ps/portal, edit the system.xml file using Notepad or an XML editor.
- Search for "<!-- Custom OEM headers -->".
- You will notice that this section is commented out. Un-comment out this section and add the following section for your new style:
<style styleFolderName="your_new_skin_name_here"> <table style="background-color:#2d5d3d"> <tr> <td><img src="../skins/classic/branding/my_logo.gif"/></td> <td class="headerTitle" style="padding-right:2px;white-space:nowrap"></td> </tr> </table> </style> |
Note: This is the image used for my_logo.gif.
You must restart the IBM Cognos 8 service for these changes to take effect.
End Result
Files used
- <install location>/c8/webcontent/skins/my_style/qs/ crn.css
- <install location>/c8/webcontent /skins/my_style/portal/default.css
- <install location>/c8/webcontent /skins/my_style/qs/QSRVCommonUI.css
- <install location>/c8/webcontent /skins/my_style /shared/banner.css
- <install location>/c8/webcontent /skins/my_style/prompting/QSReport.css
Modify the Header: banner.css
display title
.headerTitle
{
background-color: #2d5d3d;
padding-left: 5px;
font-weight: bold;
font-size: 75%;
color: #ffffff;
vertical-align: middle;
white-space:nowrap;
} |
middle section between the Studio name and solid colour bar
.mainHeader1Middle
{
width:100%;
background-image: /* url(../shared/images/banner_middle.gif) */ ;
background-repeat: repeat-y;
} |
solid colour bar
.mainHeader1
{
padding: 1px;
background-color: #2d5d3d;
border-bottom: #2d5d3d 3px solid;
height:28px;
width:100%;
} |
Modifies the Header buttons: CRN.css
background and border of an un-selected button
.headerButton
{
border: #2d5d3d 1px solid;
background-color: #2d5d3d;
cursor:pointer;
width: 22px;
} |
background and board when hovering
.headerButtonRollover
{
border: 1px solid #ffffff;
background-color: #2d5d3d;
cursor:pointer;
width: 22px;
} |
background and hover properties of the more help button
.headerButtonDropDown
{
border: #2d5d3d 1px solid;
background-color: #2d5d3d;
cursor: pointer;
width: 3px;
}
.headerButtonDropDownRollover
{
border: #ffffff 1px solid;
background-color: #2d5d3d;
cursor: pointer;
width: 3px;
} |
Modify the side menu: QSRVCommonUI.css
Menu title
.menuHeader {
font-size: 70%;
color: #2d5d3d;
border-collapse: collapse;
vertical-align: bottom;
font-weight: bold;
width:100%;
} |
menu options
.menuItem,
.menuItemSpacer,
.menuItemSpacerTop {
background-color: #8bb093;
border: solid #2D5D3D;
border-width: 0px 1px;
border-collapse: collapse;
}
.menuItem
.menuAction {
font-size: 70%;
color: #2d5d3d;
text-decoration: underline;
cursor: pointer;
cursor: hand;
}
.menuItemSelected {
color: #2d5d3d;
border-collapse: collapse;
cursor: default;
padding: 3px 10px;
border: 1px solid #8bb093;
height:20px;
font-size: 70%;
font-weight: bold;
} |
Controls the Data Tree Window
.menuContent,
.menuContentCollapsed {
color: #336699;
border: 1px solid #2d5d3d;
padding: 3px;
} |
Information window
.informationTitleHeader
{
color: #2D5D3D;
font-weight: bold;
font-size: 70%;
}
.metaContent {
background-color: #c8ddca;
border: solid #2d5d3d;
border-width: 0px 1px 1px;
border-collapse: collapse;
padding: 3px;
} |
Information window header: default.css
.dialogHeader
{
border: #2D5D3D 1px solid;
height: 24px;
background-color: #8bb093;
} |
Modify the "Select and insert item…" image: QSReport.ccs
.startPageListColumnTitle
{
padding: 3px 5px;
border: 1px solid #2d5d3d;
line-break: strict;
background-color: #8bb093;
}
.startPageListColumn
{
padding: 3px 5px;
border-color: #2d5d3d;
border-width: 0px 1px 1px;
border-style: solid;
line-break: strict;
background-color: none;
} |
Modify fly-out windows: CRN.css
text container
.menuItem_normal
{
font-size: 70%;
border-right: #ffffff 1px solid;
padding-right: 1px;
border-top: #ffffff 1px solid;
padding-left: 1px;
padding-bottom: 1px;
border-left: #ffffff 1px solid;
color: #2d5d3d;
padding-top: 1px;
border-bottom: #ffffff 1px solid;
font-family: Tahoma;
background-color: #ffffff;
text-decoration: underline;
cursor: pointer;
cursor: hand;
} |
hover over Text Container
.menuItem_hover
{
font-size: 70%;
border-right: #99aacc 1px solid;
padding-right: 1px;
border-top: #99aacc 1px solid;
padding-left: 1px;
padding-bottom: 1px;
border-left: #99aacc 1px solid;
color: 2d5d3d;
padding-top: 1px;
border-bottom: #99aacc 1px solid;
font-family: Tahoma;
background-color: #c8ddca;
text-decoration: underline;
cursor: pointer;
cursor: hand;
} |
Files used
- <install location>/c8/webcontent/skins/my_style/ans/background.css
- <install location>/c8/webcontent/skins/my_style/ans/explore.css
Modify the menu bar: background.css
background, border
.menubar
{
position: absolute;
overflow: hidden;
padding: 0px;
background-color: #2d5d3d;
border-bottom: 3px solid #2d5d3d;
border-top: 1px solid #2d5d3d;
border-right: 1px solid #2d5d3d;
}
.menubar_content_div
{
background-image: url
(../../../skins/corporate/ans/images/title_bar_graphic_studios.gif);
padding: 2px;
border: 0px;
width: 582px;
} |
Modify menu items hover and pressed settings
.menu_hover
{
background-color: #8bb093;
border: 1px solid #2d5d3d;
color:#ffffff;
padding: 2px;
padding-left: 5px;
padding-right: 5px;
}
.menu_pressed
{
padding: 2px;
padding-left: 5px;
padding-right: 5px;
background-color: #8cc092;
border: 1px solid #2d5d3d;
color:#ffffff;
} |
Modify the button bar: background.css
background colour
.main_toolbar
{
position: absolute;
white-space: nowrap;
padding: 2px;
background-color: #8bb093;
border-bottom: 1px solid #2d5d3d;
border-right: 1px solid #2d5d3d;
overflow: hidden;
} |
buttons
.toolbar_dropdown_button_pressed
{
border : 1px solid #8bb093;
background-color: #8bb093;
padding : 1px;
/* pointer for standards compliant browsers, hand for ie 5.5*/
cursor: pointer;
cursor: hand;
display: inline;
}
toolbar_arrow_combo_pressed
{
background-color: #8bb092;
border : 1px solid #8bb092;
display: inline-block;
padding: 1px;
cursor: pointer;
cursor: hand;
}
toolbar_arrow_combo_hover
{
border : 1px solid #2d5d3d;
background-color: #c8ddca;
}
toolbar_arrow_combo_pressed
{
border : 1px solid #2d5d3d;
background-color: #c8ddca;
} |
Controlling the tabs: background.css
Borders, font
.tab_dummy_td_none_selected
{
text-align: left;
color: #0000CC;
padding: 3px 15px 3px 15px;
white-space: nowrap;
border-collapse : collapse;
text-decoration: underline;
font-family: Tahoma;
font-size: 70%;
font-weight: normal;
text-decoration: underline;
border-top: 1px solid #2d5d3d;
border-bottom: 1px solid #2d5d3d;
border-left: 1px solid #2d5d3d;
border-right: 1px solid #2d5d3d;
}
.tab_td_none_selected
{
border-top : 1px solid #2d5d3d;
}
.top_tab_td_none_selected
{
border-bottom : 1px solid #2d5d3d;
}
.tab_right_border
{
border-right: 1px solid #2d5d3d;
}
.tab_left_border
{
border-left: 1px solid #2d5d3d;
} |
Controls selected tab
.tab_td_selected, .top_tab_td_selected
{
text-align: left;
white-space: nowrap;
border-collapse : collapse;
font-family: Tahoma;
font-size: 70%;
font-weight: bold;
color: #336699;
background-color: #c8ddca;
padding: 3px 15px 3px 15px;
border : 1px solid #2d5d3d;
|
non-selected tab (this controls the very back background of the Insertable Objects pane)
.pane
{
text-align: left;
position:absolute;
padding: 3px;
margin: 0px 0px 0px 0px;
background-color: #c8ddca;
border: 1px solid;
border-color: #2d5d3d #2d5d3d #2d5d3d #2d5d3d;
} |
Controlling the property pane: Multiple .css files
buttons: explore.css
.dialogbuttons,.blockproppanebutton
{
border-top: 1px solid #2d5d3d;
border-right: 1px solid #2d5d3d;
border-left: 1px solid #2d5d3d;
border-bottom: 1px solid #2d5d3d;
background-color: #8bb093;
width: 100%;
padding: 2px 3px 2px 3px;
}
.dialogButton_hover
{
background-color: #2d5d3d;
} |
container header: background.css
.ToggleBar,.DlgTitleBar
{
overflow: hidden;
table-layout: fixed;
white-space:nowrap;
font-family: Tahoma;
font-size: 70%;
font-weight: bold;
color: #2d5d3d;
background-color: #8bb093;
padding: 3px;
border : 1px solid;
border-color : #2d5d3d;
} |
Properties container: background.css
.BlockPropertiesContainer
{
border-left: 1px solid #2d5d3d;
border-right: 1px solid #2d5d3d;
background-color: #c8ddca;
overflow: auto;
} |
Information pane: background.css
.InfoContainer
{
background-color: #c8ddca;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color : #2d5d3d;
overflow: auto;
overflow-x: hidden;
} |
Information pane: background.css
.InfoContainer
{
background-color: #c8ddca;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color : #2d5d3d;
overflow: auto;
overflow-x: hidden;
} |
Context Menus: background.css
background
.contextMenu_body, .contextMenu_body_NS
{
background-color: #c8ddca;
padding: 3px;
border: 1px solid #2d5d3d;
font-size: 8pt;
position: absolute;
visibility: visible;
left: -1000px;
cursor: default;
display: block;
overflow-y: auto;
} |
non-highlighted link
contextMenu_item_default
{
font-size: 8pt;
padding: 1px 0px 1px 3px;
border: 1px solid #c8ddca;
white-space: nowrap;
text-align: left;
cursor: default;
text-decoration: underline;
background-color: c8ddca;
color: #2d5d3d;
} |
Hover Menu
contextMenu_item_with_submenu_over
{
cursor: pointer;
cursor: hand;
background-color: #8bb093;
border: 1px solid #;
} |
Control the Insertable Objects window: multiple css files
header: background.css
.ins_obj_title_bar{
overflow: hidden;
font-family: Tahoma;
font-size: 70%;
font-weight: bold;
color: #2d5d3d;
background-color: #c8ddca;
padding: 3px;
border : 1px solid;
border-color : #2d5d3d;
} |
borders: explore.css
.mdmetadata, .analysis_item
{
color: #0000CC;
left: 0px;
position:absolute;
font-size: 70%;
font-family: Tahoma;
padding: 3px 3px 3px 3px;
overflow: auto;
white-space: nowrap;
vertical-align : middle;
border-left: 1px solid #2d5d3d;
border-right: 1px solid #2d5d3d;
} |
Show/Hide button: explore.css
.hide_show
{
background-color: #c8ddca;
border : 1px solid;
border-color : #2d5d3d #2d5d3d #2d5d3d #2d5d3d;
position: absolute;
}
.hide_show_hover
{
background-color: #8bb093;
} |
Control the axis bar: explore.css
axis labels
.axis_label, .rules_label
{
padding-left: 4px;
white-space: nowrap;
color: #2d5d3d;
font-size: 60%;
} |
Controls the crosstab drag areas: explore.css
column cell
.ColMemberCellTemplate
{
border-collapse: collapse;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #2d5d3d;
text-align: center;
font-weight: bold;
color: #2d5d3d;
background-color: #c8ddca;
white-space: nowrap;
cursor: default;
padding: 5px 7px 5px 5px;
} |
row cell
.RowMemberCellTemplate
{
border-collapse: collapse;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #2d5d3d;
text-align: center;
font-weight: bold;
color: #2d5d3d;
background-color: #c8ddca;
white-space: nowrap;
cursor: default;
padding: 5px 7px 5px 5px;
} |
End result
Files used
- <install location>/c8/webcontent/skins/my_style/pat/skin.css
- <install location>/c8/webcontent/skins/my_style/hal/hal_skin_corportate.css
Note: In these css file, a lot of section have been grouped together for a lot of the style entries.
Controls most of the background pane: skin.css
#idToolboxTabPanels_Pane,
#idToolboxTabBox_Pane,
#idProperties_Pane,
#idDescription_Pane,
.clsPane_Toolbox_active,
.clsPane_Toolbox_inactive,
.clsPane_Properties_inactive,
.clsPane_Workarea_inactive,
#idExplorerBar,
.clsBigButtonBar,
.clsQueryViewListViewHeader,
.clsQueryTabBackground,
DIV.clsFontComboBoxGroupListItem,
TD.clsGridHeader
{
background-color: #c8ddca;
} |
Controls the welcome, all buttons, selected tab colour and page Explorer column: hal_skin_corporate.css
BODY,
BUTTON,
DIV.clsMenubar,
DIV.clsToolbar,
DIV.clsDlgToolbar,
TD.clsMenubarItem,
TD.clsToolbarButton,
.clsMenuPopup,
.clsPopupDialog,
.clsMenuItem,
TABLE.clsModalDlg,
BUTTON.clsDlgButton,
BUTTON.clsXButton_active,
BUTTON.clsXButton_inactive,
TD.clsExplorerButton,
.clsBigButtonBar,
BUTTON.clsBigCoolButton,
TD.clsToolbarButton,
TD.clsTabBox_inactive,
TD.clsTabBox_active,
TD.clsTabBox_inactive_hover,
TD.clsTabBox_active_hover,
TD.clsBottomTabBox_inactive,
TD.clsBottomTabBox_active,
TD.clsBottomTabBox_inactive_hover,
TD.clsBottomTabBox_active_hover,
DIV.clsTabPanels,
DIV.clsBottomTabPanels,
TD.clsComboBoxArrow,
TD.clsComboBoxArrow_disabled,
DIV.clsListViewColumnHeader
{
background-color: #8bb093;
} |
Controls headers, button hover colour: hal_skin_corporate.css
BUTTON.clsCoolButton_hover,
TD.clsMenubarItem_up,
TD.clsToolbarButton_up,
BUTTON.clsCoolButton_pressed,
TD.clsMenubarItem_down,
TD.clsToolbarButton_down,
TD.clsToolbarButton_stuck,
.clsMenuItem_selected,
DIV.clsPaneHeader_inactive,
.clsListItem_hover,
.clsListItem_tb_selected,
.clsTreeNode_hover,
TD.clsPropertySheetLabel_active,
.clsModalDlgHeader_inactive,
BUTTON.clsXButton_inactive,
TD.clsTabBox_active_hover,
TD.clsBottomTabBox_active_hover,
BUTTON.clsBigCoolButton_hover,
TD.clsMenubarItem_up,
TD.clsToolbarButton_up,
BUTTON.clsBigCoolButton_pressed,
TD.clsMenubarItem_down,
TD.clsToolbarButton_down,
TD.clsComboBoxArrow_down
{
background-color: #2d5d3d;
} |
Controls inactive tabs and hover: hal_skin_corporate.css
TD.clsTabBox_inactive,
TD.clsBottomTabBox_inactive,
TD.clsTabBox_inactive_hover,
TD.clsBottomTabBox_inactive_hover
{
color: #0000CC;
text-decoration: underline;
background-color: #c8ddca;
} |
Controls toolbar items: hal_skin_corporate.css
BUTTON.clsCoolButton_hover,
TD.clsMenubarItem_up,
TD.clsToolbarButton_up,
BUTTON.clsCoolButton_pressed,
TD.clsMenubarItem_down,
TD.clsToolbarButton_down,
TD.clsToolbarButton_stuck,
BUTTON.clsBigCoolButton_hover,
TD.clsMenubarItem_up,
TD.clsToolbarButton_up,
BUTTON.clsBigCoolButton_pressed,
TD.clsMenubarItem_down,
TD.clsToolbarButton_down,
DIV.clsListViewColumnHeader
{
border-top: solid #8bb093 1px;
border-left: solid #8bb093 1px;
border-right: solid #8bb093 1px;
border-bottom: solid #8bb093 1px;
}
HR,
BUTTON.clsCoolButton,
TD.clsToolbarButton,
BUTTON.clsBigCoolButton,
TD.clsToolbarButton,
.clsListItem_colorCell_normal
{
border: 1px solid #8bb093;
} |
Controls the menu bar: hal_skin_corporate.css
DIV.clsMenubar,
TD.clsMenubarItem
{
background-color: #c8ddca;
}
TD.clsMenubarItem,
TD.clsMenubarItem_up,
TD.clsMenubarItem_down
{
font-weight: #2d5d3d;
}
TD.clsMenubarItem
{
color: #2d5d3d;
border-top: 1px solid #c8ddca;
border-left: 1px solid #c8ddca;
border-right: 1px solid #c8ddca;
border-bottom: 1px solid #c8ddca;
}
TD.clsMenubarItemLast
{
/* background-image: url(images/menubar_background.gif); */
background-repeat: no-repeat;
background-position: right;
}
DIV.clsMenubar
{
border-top: 1px solid /* #E7E7E7 */ ;
border-right: 1px solid /* #E7E7E7 */ ;
border-bottom: 2px solid /* #DEAC77*/ ;
border-left: 1px solid /* #E7E7E7 */ ;
}
DIV.clsToolbar
{
border-top: 1px solid /* #DEAC77*/ ;
} |
Final Result
Files Used
- <install location>/c8/webcontent /skins/my_style/portal/default.css
- <install location>/c8/webcontent /skins/my_style/prompting/promptCommon.css
- <install location>/c8/webcontent /skins/my_style/ags/ags.css
- <install location>/c8/webcontent /skins/my_style/ags/crn.css
Control the Menu bar: crn.css
background and menu bar image
.menuBar
{
background-color: c8ddca;
background-image: /* url(images/title_bar_graphic_studios.gif) */ ;
background-repeat: no-repeat;
background-position: left bottom;
border-bottom: #2d5d3d 3px solid;
border-left: #e7e7e7 0px solid;
border-top: #e7e7e7 1px solid;
border-right: #e7e7e7 1px solid;
height: 25px;
width:100%;
padding: 1px
} |
menu font
.menuTitle_normal
{
font-size: 70%;
padding: 3px;
/*background-color: #336699;*/
color:#2d5d3d;
font-family: Tahoma;
font-weight: bold;
} |
menu hover functions
.menuTitle_hover
{
font-size: 70%;
padding: 2px 3px 2px 3px;
background-color: #8bb093;
border: 0px solid #2d5d3d;
color: #134679;
font-family: Tahoma;
font-weight: bold;
cursor: hand;
}
.menuTitle_pressed
{
padding: 2px;
background-color: #8bb093;
border: 1px solid #2d5d3d;
color: #134679;
font-family: Tahoma;
font-weight: bold;
cursor: hand;
} |
Control the button bar: crn.css
Background
.toolbar_studio
{
padding: 2px;
background-color: #c8ddca;
border-bottom: 1px solid #cccccc;
}
.toolbarImageNormal
{
border : 1px solid #f3f3f3;
background-color: #c8ddca;
padding : 1px;
} |
Buttons with drop down arrows
.toolbarDropdownImageNormal_studio
{
border : 1px solid #c8ddca;
height:20px;
width:30px;
background-color: #c8ddca;
padding: 0px;
}
.toolbarDropdownImageOver_studio
{
border : 1px solid #2d5d3d;
height:20px;
width:30px;
background-color: #8bb093;
padding: 0px;
cursor: pointer;
cursor: hand;
}
.dropDownArrow
{
border : 1px solid #c8ddca;
height:20px;
width:11px;
background-color: #c8ddca;
padding: 0px;
margin:0px;
cursor: pointer;
cursor: hand;
align:center
}
.dropDownArrowOver
{
border : 1px solid #2d5d3d;
height:20px;
width:11px;
background-color: #8bb093;
padding: 0px;
margin:0px;
cursor: pointer;
cursor: hand
align:center
} |
Fly out windows
.menuItem_normal
{
font-size: 70%;
background-color: 8bb093;
border: 1px solid 8bb093;
color:blue;
text-decoration: underline;
cursor: pointer;
cursor: hand;
font-family: Tahoma;
font-weight: normal;
}
.menuItem_hover
{
font-size: 70%;
background-color: #8bb093;
border: 0px solid #2d5d3d;
color:blue;
text-decoration: underline;
cursor: pointer;
cursor: hand;
font-family: Tahoma;
font-weight: normal;
}
.menuItem_pressed
{
font-size: 70%;
background-color: #8bb093;
border: 1px solid #2d5d3d;
color:blue;
text-decoration: underline;
cursor: pointer;
cursor: hand;
font-family: Tahoma;
font-weight: normal;
padding: 1px;
}
.menuContainer
{
background-color: #8bb093;
border: 1px solid #336699;
padding: 2px;
} |
Buttons
.toolbarImageNormal_studio
{
border : 1px solid #c8ddca;
height:20px;
width:20px;
background-color: #c8ddca;
padding: 0px;
}
.toolbarImageOver_studio
{
border : 1px solid #2d5d3d;
height:20px;
width:20px;
background-color: #8bb093;
padding: 0px;
cursor: pointer;
cursor: hand;
} |
Control the "I want to…" pane: crn.css
Font
.formText
{
font-size: 70%;
color: #2d5d3d;
}
.task_inactive
{
font-family: Tahoma;
font-size: 70%;
color: #8bb093;
text-decoration: underline;
}
.task_active
{
font-family: Tahoma;
font-size: 70%;
font-weight: bold;
color: #2d5d3d;
} |
main body on pane
.area
{
background-color: #c8ddca;
padding: 0px;
border-top : 0px solid;
border-bottom : 1px solid;
border-left : 1px solid;
border-right : 1px solid;
border-color : #c8ddca;
} |
header of pane
.area_header
{
font-family: Tahoma;
font-size: 70%;
font-weight: bold;
color: #f3f3f3;
background-color: #2d5d3d;
padding: 3px;
border : 1px solid;
border-color : #2d5d3d;
} |
Show/hide button (Double Arrow Down)
.hide_show_taskspane
{
background-color: #c8ddca;
border : 1px solid;
border-color : #c8ddca;
}
.hide_show_hover
{
background-color: #c8ddca;
border : 1px solid;
border-color : #c8ddca;
}
.hide_show_pressed
{
background-color: #c8ddca;
border : 1px solid;
border-color : #c8ddca;
} |
Control the Insertable Objects pane: crn.css
Header
.area_header
{
font-family: Tahoma;
font-size: 70%;
font-weight: bold;
color: #f3f3f3;
background-color: #2d5d3d;
padding: 3px;
border : 1px solid;
border-color : #2d5d3d;
} |
tabs
.insertableItemsPaneBorder{
background-color: #8bb093 ;
} |
Text: promptCommon.css
.clsTreeNode_unselected
{
cursor: pointer;
cursor: hand;
margin: 0px;
padding: 0px;
background-color: #c8ddca;
color: #000000;
vertical-align: middle;
}
.clsTreeNode_hover
{
cursor: pointer;
cursor: hand;
margin: 0px;
padding: 0px;
color: #000000;
background-color: #8bb093;
vertical-align: middle;
} |
background and borders: ags.css
.treeBorder {
border-top: 0px solid;
border-bottom: 0px solid;
border-left: 1px solid;
border-right: 1px solid;
border-color: #2d5d3d;
background-color: c8ddca;
} |
Descision Bar: crn.css
tasks
.item
{
background-color: #c8ddca;
border : 1px solid;
border-color : #8bb093;
padding-bottom: 1px;
padding-left: 3px;
padding-right: 3px;
padding-top: 1px;
}
.item_active
{
background-color: #c8ddca;
border : 2px solid;
border-color: #2d5d3d;
padding-bottom: 0px;
padding-left: 2px;
padding-right: 2px;
padding-top: 0px;
} |
Modifies the text:crn.css
.group_label
{
font-family : Tahoma;
font-size : 70%;
font-weight : normal;
color : #2d5d3d;
padding : 3px;
}
.item_label_active
{
font-family: Tahoma;
font-size: 70%;
font-weight: bold;
color: #2d5d3d;
}
.item_label
{
font-family : Tahoma;
font-size : 70%;
font-weight : normal;
color : #2d5d3d;
} |
Page labels and text:crn.css
.page_label
{
font-family: Tahoma
font-size: 110%;
color: #2d5d3d;
font-weight: bold;
}
.text2
{
font-family: Tahoma;
font-size: 70%;
color: #2d5d3d;
} |
Tab bar:multiple
Controls the Hyperlink text:crn.css
a
{
font-family: Tahoma;
color: #2d5d3d;
text-decoration: underline;
} |
Default.css
.dialogHintText
{
font-size: 70%;
color: #2d5d3d;
}
.tabLabel
{
font-weight: bold;
font-size: 70%;
color: #2d5d3d;
} |
Expression and Information window:default.css
Text
.formLabel
{
font-weight: bold;
font-size: 70%;
color: #2d5d3d;
} |
Ags.css
TEXTAREA.hintText_active
{
background-position: center center;
background-image: url(images/arrow_template.gif);
COLOR: #2d5d3d;
background-repeat: no-repeat
}
.infoErrorTabText
{
font-family: Tahoma;
margin: 2px;
font-size: 70%;
width: 100%;
color: 2d5d3d;
}
.infoErrorTabTextBold
{
font-family: Tahoma;
font-weight: bold;
margin: 2px;
font-size: 70%;
width: 100%;
color: 2d5d3d;
} |
Final result
Re-branding IBM Cognos Administration
To customise the IBM Cognos Administration there is a little different technique. This interface uses a mix of the fragment method and the same .css file used in modifying IBM Cognos Connection.
For more information on Fragments, download the document IBM Cognos Fragment Framework.
File Used
- <install location>/c8/webapps/p2pd/WEB-INF/fragments/styles/skins/corporate.xml
With this method of changing the colour scheme, we are going to change the main colour palette. This will change the majority of the Administration UI.
Changing the palette. - cogadmin.xml
<palette> <!-- basic b/w --> <color name="black">#000000</color> <color name="white">#ffffff</color> <!-- 5 shades of colours --> <color name="color.lighter">#c8ddca</color> <color name="color.light">#c8ddca</color> <color name="color.medium">#8bb093</color> <color name="color.normal">#8bb093</color> <color name="color.dark">#2d5d3d</color> <color name="color.darker">#2d5d3d</color> <!-- 4 shades of gray --> <color name="gray.light">#c8ddca</color> <color name="gray.medium">#8bb093</color> <color name="gray.normal">#8bb093</color> <color name="gray.dark">#2d5d3d</color> <!-- others colours --> <color name="tooltip">#2d5d3d</color> <color name="hyperlink">#2d5d3d</color> <color name="special1">#2d5d3d</color> <color name="special2">#2d5d3d</color> </palette> |
Final result
As you can see by just changing a couple of lines, most of the style has changed. But there are still a few things to change.
Banner – cogadmin.xml
<!-- Main --> <class name=".cogstyle-header-main"> <set name="background-repeat">no-repeat</set> <set name="background-position">left top</set> <set name="border-bottom"> <color name="headerBottomBorder"/> 3px solid</set> </class> <class name=".cogstyle-header-left-section"> <set name="background-color"> <color name="headerLeftBackground"/></set> </class> <class name=".cogstyle-header-middle-section"> <set name="background-image"> /* url($WEB$/skins/$SKIN$/shared/images/banner_middle.gif) */ </set > <set name="background-repeat">repeat-y</set> <set name="background-position">left top</set> </class> <class name=".cogstyle-header-middle-section-spacer"> <set name="width">45px</set> </class> <class name=".cogstyle-header-logo"> <class name=".cogstyle-fragmentHeader-titleText"> <set name="font-weight">bold</set> <set name="color">#2d5d3d</set> </class> |
Table – cogadmin.xml
<!-- tables --> <color name="tableText" paletteColor="black"/> <color name="tableTextHeader" paletteColor="color.dark"/> <color name="tableBackground" paletteColor="white"/> <color name="tableBackgroundHeader" paletteColor="gray.medium"/> <color name="tableBackgroundSelected" paletteColor="color.normal"/> <color name="tableBackgroundAlternate" paletteColor="gray.light"/> <color name="tableBackgroundSubHeader" paletteColor="color.light"/> |
Horizontal Tabs – cogadmin.xml
<!-- horizontal tabs --> <color name="htabsScrollButton" paletteColor="white"/> <color name="htabsScrollButtonBorder" paletteColor="gray.dark"/> <color name="htabsScrollButtonHover" paletteColor="color.lighter"/> <color name="htabsScrollButtonDisabled" paletteColor="white"/> <color name="htabsScrollButtonBorderDisabled" paletteColor="gray.normal"/> <color name="htabsBarBackground" paletteColor="gray.light"/> <color name="htabsText" paletteColor="hyperlink"/> <color name="htabsBorder" paletteColor="color.light"/> <color name="htabsBackground" paletteColor="white"/> <color name="htabsTextActive" paletteColor="color.dark"/> <color name="htabsBorderActive" paletteColor="gray.dark"/> <color name="htabsBackgroundActive" paletteColor="grey.light"/> <color name="htabsAltBarBackground" paletteColor="gray.light"/> <color name="htabsAltBorder" paletteColor="white"/> <color name="htabsAltText" paletteColor="hyperlink"/> <color name="htabsAltBackground" paletteColor="gray.light"/> <color name="htabsAltTextActive" paletteColor="color.normal"/> <color name="htabsAltBackgroundActive" paletteColor="white"/> |
Tables in Security and Configuration Tab
The tables in these tabs are controlled by the same .css files that controls IBM Cognos Connection tables. So if IBM Cognos connection has already been modified, then you should see the same style.
Refer to Changing the table colour area in the Re-branding IBM Cognos Connection section.
Final Result
