Download - Cognos Skinning
Customizing Cognos 8 Styles (Skinning)
Tips and Tricks on how to Quickly Re-brand the Cognos 8 User Interfaces
Skinning and Cognos 8
Table of Content
1. Introduction...............................................................................................................3
2. Understanding the Color Scheme used in Styles......................................................32.1 Default Colors used with the “Corporate” Style...........................................................................32.2 Understanding Hexadecimal Colors...........................................................................................32.3 Mapping Colors to Sections of the User Interface......................................................................3
3. Customizing the Cognos 8 UI...................................................................................63.1 Importing New Styles.....................................................................................................63.2 Files Used with Cognos 8 Styles...................................................................................73.3 Changing Text, Font Types, and Images.......................................................................8
4. Example 1 – Quickly Re-branding Cognos 8............................................................84.1 Re-branding Cognos Connection...............................................................................................94.2 Re-branding Query Studio........................................................................................................124.3 Re-branding Analysis Studio....................................................................................................124.4 Re-branding Report Studio.......................................................................................................134.5 Re-branding Metrics Manager..................................................................................................154.6 Re-branding Event Studio........................................................................................................17
5. Example 2 – Understanding the Various different UI Parameters...........................185.1 Re-branding Cognos Connection.............................................................................................195.2 Re-branding Query Studio........................................................................................................285.3 Re-branding Analysis Studio....................................................................................................335.4 Re-branding Report Studio.......................................................................................................38
6. Conclusion..............................................................................................................42
7. Appendix – List of Parameters................................................................................43Appendix A – Cognos Connection – Default.css...................................................................................43Appendix B – Query Studio – QSRVCommonUI.css.............................................................................45Appendix C – Analysis Studio - background.css...................................................................................46
- 2 -
Skinning and Cognos 8
1. Introduction
This document provides some tips and techniques when creating a custom style (or “skin”) in Cognos 8.
This document provides an overview of the concepts, colors schemes, and files used for skinning in
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 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.
2. Understanding the Color Scheme used in Styles
2.1Default Colors used with the “Corporate” Style
Knowing the default color scheme allows you to match these default colors to your desired style. All
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 Cognos components may periodically
use a color that is not listed in the figure below.
2.2 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.
2.3 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.
- 3 -
#999999
#F3F3F3
#336699 #CC9966
#0000CC
#FFFFFF
#E3E9F3
#CCCCCC
#E7E7E7
#99AACC
#666699
#000000
#BEC8DC
#CCCCE3
#DEAC77
#123679
Skinning and Cognos 8
Cognos Connection
- 4 -
#999999
#F3F3F3
#FFFFFF
#336699
Background Colors
Headers#999999
#F3F3F3
#CC9900
#E7E7E7
Borders Text
#FFFFFF
#0000CC
#000000
#336699#FFFFFF
#E3E9F3
#CCCCCC
Toolbar
List View
#999999
#E7E7E7
#FFFFFF
My Pages#FFFFFF
#99AACC
#0000CC
#E3E9F3
#CCCCCC
#666699
#000000
#999999 #336699
#000000
#E7E7E7
#FFFFFF
#CCCCCC
#FFFFFF
#000000
#666699
Dialogs #BEC8DC
#FFFFFF
#E3E9F3
#E7E7E7
#CCCCCC
#999999
#336699
#BEC8DC
#FFFFFF
#EEECF3
#999999
#000000
#336699
#FFFFFF
Screenshot
Skinning and Cognos 8
Query Studio
- 5 -
#FFFFFF
#FFFFFF #CCCCCC
#E3E9F3
#BEC8DC
#336699
#999999
#000000
#336699
#FFFFFF
#E7E7E7
#E3E9F3
#336699 #000000
#336699
#0000CC
#E3E9F3
#BEC8DC
#000000
#99AACC #000000
#336699
Background Colors
Headers
Borders Text
Toolbar
Menu Bar
Blank Report Style
Screenshot
Skinning and Cognos 8
Analysis Studio
3. Customizing the Cognos 8 UI
Cognos 8 provides CSS files that control the colors for all Cognos 8 UIs. You can customize the UI by
modifying parameters within the appropriate CSS files.
3.1 Importing New Styles
Before creating a new style, you must first import a style. To import a new style:
1. Copy an existing style to use as a template. All of the styles reside in the <install
location>/c8/webcontent/skins directory. Make a copy of the “Corporate” folder and place it in the
same directory. Rename it accordingly.
2. Login to Cognos Connection, click on the “Tools” menu and select Portal Administration.
3. Click on the “Styles” tab.
4. In this page, you will see a list of all of your existing styles. Click on “New Styles” icon
- 6 -
#FFFFFF
white
#CCCCCC
#E3E9F3
#336699
#FFFFFF
#E7E7E7
#336699
#336699
#0000CC
#FFFFFF #E7E7E7
#DEAC77 #123679
#E3E9F3
#E3E9F3
graytext
#F3F3F3
#CCCCE3
#BEC8DC
#CCCCCC #0000CC
#99AACC #336699
#99AACC
#FFFFFF
Background Colors
Headers
Borders Text
Menu Style
Insertable Objects
Object Headers
Screenshot
Toolbar
Skinning and Cognos 8
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.
3.2 Files Used with Cognos 8 Styles
All of the files required to modify styles across all Cognos components can be found our newly created
“my_style” folder; <install location>/c8/webcontent/skins/my_style.
Cognos
Component
Directory Files Images
Cognos
Connection
/skins/my_style/
portal
default.css /skins/my_style/portal/images
/skins/my_style/branding
Welcome Page /skins/my_style/
portal
default.css /skins/my_style/portal/images
/skins/my_style/branding
Report Studio /skins/my_style/pat skin.css /skins/my_style/pat/images
Analysis Studio /skins/my_style/ans background.css /skins/my_style/ans/images
explore.css
- 7 -
Skinning and Cognos 8
scrollbarstyle.css
Query Studio /skins/my_style/qs
crn.css
/skins/my_style/qs/imagesQSRVCommonUI.c
ss
Event Studio /skins/my_style/agsags.css
/skins/my_style/ags/imagescrn.css
Metrics
Manager
/skins/my_style/
cmm
default.css /skins/my_style/cmm/images
admin_styles.css /skins/my_style/cmm/
presentation/images
System.xml – The system.xml file (<install location>\c8\templates\ps\portal directory) is used to modify
functionality or hide certain sections of the user interface. Most of the parameters in this file apply for all
users.
3.3 Changing Text, Font Types, and Images
Changing Component Names and Text Messages – You can change the names of Cognos 8
components and modify the accompanying text messages by opening the relevant message file in a text
editor and performing a search-and-replace on the text strings and calls you want to change. The
message files are located in the c8_location/msgsdk directory. For changes to take effect, you must
restart the Cognos 8 service.
Changing Cognos 8 Fonts – You can change the fonts used in 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 Cognos Images – All images are located with the style directory. The table above shows the
location of all of the images by component. You can easily change the image location by placing your
own custom image in this directory and using the same file name.
4. Example 1 – Quickly Re-branding Cognos 8
You can quickly re-brand 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.
- 8 -
Skinning and Cognos 8
You may wish to re-brand 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.
4.1 Re-branding Cognos Connection
Files Used
<install location>/c8/webcontent/skins/my_style/portal/default.css <install location>/c8/templates/ps/portal/system.xml
Find and Replace
In the default.css file perform a find and replace on the colors in the figure above. Save and close
this file.
Other Configuration Changes
Modify the following parameters individually:
1. Modify the Cognos Connection header:
- 9 -
#C8DDCA #8BB093#2D5C3D
#C8DDCA
#8BB093
#2D5C3D
#999999
#F3F3F3
#336699
#CC9966
#0000CC
#E3E9F3
#CCCCCC #E7E7E7
#99AACC
#666699
#BEC8DC
#CCCCE3
#DEAC77
#123679
Skinning and Cognos 8
.headerTitle {
padding-left: 0px;font-weight: bold;font-size: 80%;color: #000000;background-color: #2d5d3d;
}.headerTitleMiddle {
background-color: #2d5d3d; background-image: url(images/title_bar_grapic.gif);background-repeat: repeat-y;background-position: left top;
}.crnOptions {
font-size: 70%; color: #c8ddca;
}
2. Modify the Portal Tabs
.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;
}
3. Replacing the Cognos Connection text with a corporate logo
- 10 -
1. 2. 3.
1. 2. 3.
Skinning and Cognos 8
To add your own corporate logo:
1. Place image in the folder <install location>/c8\webcontent\skins\my_style\branding
2. Edit the system.xml file using Notepad or an XML editor.
3. Search for “<!-- Custom OEM headers -->”.
4. You will notice that this section is commented out. Un-comment out this section and add the
following section for your new style:
<!-- Custom OEM headers --><param name="OEM">
<!-- Specify custom Cognos Connection / Cognos Viewer left side header here in the form of XHTML snippets. Custom
headers can be style-specific.Example:-->
<customHeader showContext="false" contextDelimiter=""> <style styleFolderName="my_style">
<table style="background-color:#2d5d3d"><tr>
<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 Cognos 8 service for these changes to take effect.
End Result
- 11 -
Skinning and Cognos 8
4.2 Re-branding Query Studio
Files used
<install location>/c8/webcontent/skins/my_style/qs/crn.css
<install location>/c8/webcontent/skins/my_style/qs/QSRVCommonUI.css
Find and Replace
In the two CSS files above, perform a find and replace on the colors in the figure above. Save and
close this file.
End Result
4.3 Re-branding Analysis Studio
Files used
<install location>/c8/webcontent/skins/my_style/ans/background.css
<install location>/c8/webcontent/skins/my_style/ans/explore.css
<install location>/c8/webcontent/skins/my_style/ans/scrollbarstyle.css
- 12 -
Skinning and Cognos 8
Find and Replace
In all three CSS files above, perform a find and replace on the colors in the figure that we matched
above. Save and close this file.
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
4.4 Re-branding Report Studio
Files used:
<install location>/c8/webcontent/skins/my_style/pat/skin.css
<install location>/c8/webcontent/skins/my_style/ans/explore.css
<install location>/c8/webcontent/skins/my_style/ans/scrollbarstyle.css
Find and Replace
In all three CSS files above, perform a find and replace on the colors in the figure that we matched
above. Save and close this file.
Other Configuration Changes
In the skin.css file, modify the following parameters individually:
- 13 -
Skinning and Cognos 8
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
- 14 -
Skinning and Cognos 8
4.5 Re-branding Metrics Manager
Files used:
<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:
Modify the Main Header
.mainHeader1 {BORDER-TOP: #c8ddca 1px solid;PADDING-LEFT: 1px;PADDING-BOTTOM: 1px;BORDER-LEFT: #c8ddca 1px solid;PADDING-TOP: 1px;BORDER-BOTTOM: #2d5c3d 1px solid;HEIGHT: 25px;BACKGROUND-COLOR: #2d5c3d;
}.headerTitle {
PADDING-LEFT: 0px;FONT-WEIGHT: bold;FONT-SIZE: 80%;COLOR: #ffffff;BACKGROUND-COLOR: #2d5c3d;
}.headerTitleMiddle {
BACKGROUND-COLOR: #2d5c3d; background-image: url(Images/title_bar_grapic.gif);background-repeat: repeat-y;background-position: left top;background-attachment: fixed;
- 15 -
Skinning and Cognos 8
}.logoImageContainer {
PADDING-RIGHT: 5px; PADDING-LEFT: 3px; BACKGROUND-COLOR: #2d5c3d;
}
Modify the Table Style
.tableTitle {font: 70% Tahoma, arial, geneva, helvetica, sans-serif;font-weight: bold;color: #2d5c3d;background-color: #c8ddca;
}.tableTitleHover{
font: 70% Tahoma, arial, geneva, helvetica, sans-serif;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;
}
Modify the colors of the links and tabs
.pathSearchLabel {font-weight: bold;font-size: 70%;color: #2d5c3d
}
Modifies the tabs
.clsButtonText{font: bold 70% Tahoma, arial, geneva, helvetica, sans-serif;color: #2d5c3d;
}
.clsMenuItemHighlight {background-color: #8bb093
}
.clsMenuItemHeader {
- 16 -
Skinning and Cognos 8
background-color: #c8ddca}
Modifies the selected item
.clsTreeTextBlack {text-decoration: underline;font-size: 70%;color: #2d5c3d;
}.clsTreeTextHighlight{
font: bold 70% Tahoma, arial, geneva, helvetica, sans-serif;color: #2d5c3d;
}
End Result
4.6 Re-branding Event Studio
Files used:
<install location>/c8/webcontent/skins/my_style/ags/crn.css
<install location>/c8/webcontent/skins/my_style/ags/ags.css
Find and Replace
In all two CSS files above, perform a find and replace on the colors in the figure that we matched
above. Save and close this file.
Other Configuration Changes
- 17 -
Skinning and Cognos 8
In the crn.css file, modify the following parameters individually:
.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
5. Example 2 – Understanding the Various different UI
Parameters
The first example provided a technique on how to quickly re-brand Cognos 8 by replacing the default
colors in the CSS files with their respective colors scheme. While this approach is useful, there are many
instances where certain UI elements are replaced with undesired colors or you may want a finer level of
control over the color scheme. In these cases, you need to better understand all of the parameters that
make out the layout and selectively replace certain colors with your own colors.
- 18 -
Skinning and Cognos 8
Using the same technique as the first approach and starting with the corporate style, you will modify all
Cognos components one piece at a time. In this example, the main colors that you will use will be:
5.1 Re-branding Cognos Connection All branding related files are found in the <install_directory>/c8/webcontent/skins/your_style/portal
folder.
Task 1 – Modify the Top Line Header in Cognos Connection
To modify the top header, perform the highlighted changes in the default.css file:
Main Header
Modifies the background of the main header banner
.mainHeader1 {
border-top: #e72b41 1px solid;border-left: #e72b41 1px solid;border-bottom: #e72b41 3px solid; height: 25px;padding: 1px;background-color: #e72b41;
}
Modify the text color of the studio links
.crnOptions {
font-size: 70%; color: #ffffff;
}
Displays colors and images in the middle of the main header
.headerTitleMiddle {
background-color: #e72b41; background-image: url(images/title_bar_grapic.gif);background-repeat: repeat-y;background-position: left top;
}
- 19 -
#F8F8DC#FFCE6D#E72B41 #333399
Skinning and Cognos 8
Color of the text that displays “Cognos Connection”
.headerTitle {
padding-left: 0px;font-weight: bold;font-size: 80%;color: #ffffff;background-color: #e72b41;
}
Background color for the image (portal_icon.gif)
.logoImageContainer {
padding-right: 5px; padding-left: 3px; background-color: #e72b41;
}
A corporate logo can be added in place of the “Cognos Connection” text by making the appropriate
changes to the system.xml file. These steps are described in detail above in Example 1. The
Cognos 8 service needs to be restarted for all system.xml change to take effect.
Expect something moreMY/Pharmacy
Task 2 – Modify the second line headers
To modify the second header and portal tabs, perform the highlighted changes in the default.css file:
Header background, borders, and hyperlinked text
Modifies the background and border colors of the second and third headers.
.mainHeader2 {
border: #f8f8dc 2px solid;padding: 2px;height: 25px;background-color: #f8f8dc;
}.mainHeader3 {
padding-top: 5px; background-color: #f8f8dc;
}
Modifies the Hyperlinked Text
.ccOptions {
font-size: 70%; color: #333399;
}.authOption {
font-size: 70%; color: #333399;
}.ccToolsLabel {
font-size: 70%; color: #333399;
}
- 20 -
Skinning and Cognos 8
Dynamic Scroll Button
.tabScrollButton{
padding: 1px; border: #ffce6d 1px solid; cursor: hand;background-color: #f8f8dc;
}.tabScrollButtonOver {
padding: 1px;border: #ffce6d 1px solid;cursor: hand;background-color: #ffce6d;
}.tabScrollButtonDisabled {
padding: 1px; border: #f8f8dc 1px solid;cursor: default;background-color: #f8f8dc;
}
Portal Tab Bars
.tabBorder {
background-color: #e72b41;}.tabLabel {
font-weight: bold; font-size: 70%; color: #e72b41;
}.tabLink {
font-size: 70%; color: #e72b41;
}
Modifies the Text for the non-selected portal tabs
.tabAnchor{
color: #e72b41;}
Modifies the Colors and borders for non-selected tabs
.tabNormal {
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 Colors and borders for selected tabs
.tabSelected
- 21 -
Skinning and Cognos 8
{padding-right: 20px; padding-left: 20px; font-weight: bold; font-size: 70%; color: #e72b41; border-right: #ffce6d 1px solid;border-left: #ffce6d 1px solid;border-top: #ffce6d 1px solid;text-align: center; background-color: #ffffff;
}
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;
}
Modifies the Borders for the end of the portal tab
.tabCap{
border-left: #ffce6d 1px solid; border-bottom: #ffce6d 1px solid;width: 1px;
}.tabBase {
border-bottom: #ffce6d 1px solid; padding-left: 1px; height: 20px;
}.tabTail {
font-size: 1px; border-left: #ffce6d 1px solid; height: 20px;
}
Task 3 – Modifying Public Folders / My Folders
To modify the portlets and table styles used in Public Folders / My Folders, perform the highlighted
changes in the default.css file:
1. To change the font color of the content hyperlinks, change the following parameter. (Note: This
parameter will only change content hyperlinks, such as object names and NOT studio, portal, or
other UI links).
a {
color: #333399;}
2. Modifying the table used for displaying Public Folders / My Folders:
- 22 -
Skinning and Cognos 8
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;
- 23 -
Skinning and Cognos 8
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;
}
Controls the Border surrounding the table
.cctable
{border-right: #ffce6d 1px solid; border-top: #ffce6d 1px solid; border-left: #ffce6d 1px solid; border-bottom: #ffce6d 1px solid; background-color: #ffffff;
}.rowDividerLine {
border-top: #ffce6d 1px solid;}.rowDivider {
border-right: #ffce6d 1px solid; font-size: 0px; width: 1px;
}.rowHighlight {
background-color: #ffce6d;}
- 24 -
Skinning and Cognos 8
Controls the Background of the Table’s Header
.tableHeader {
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;
}
3. Modifying the table used for displaying the Portlets on My Pages:
Controls the portlet header
/* Portlet Header */.boxHeaderBackground {
background-color: #f8f8dc;}.boxHeader {
padding: 2px; font-weight: bold; font-size: 80%;color: #333399;
}
Controls the edit buttons
/* Portlet edit buttons */.boxButtonNormal {
border: #ffce6d 1px solid; padding: 0px;background-color: #f8f8dc;
}.boxButtonOver
- 25 -
Skinning and Cognos 8
{border: #ffce6d 1px solid;padding: 0px;background-color: #ffce6d;
}
Task 4 – Clean up other Dialogs and Pages
Dialogs:
.pageEditorPortletColumn {
border: #ffce6d 1px solid; color: #333399; background-color: #ffffff;
}.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;}
Button on the bottom
.dialogButtonBar{
border: #ffce6d 1px solid; background: #f8f8dc; padding: 3px; height: 40px;
}
Command Buttons:
/* Command buttons (usually appear in dialog footers) */.commandButton
- 26 -
Skinning and Cognos 8
{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 */{
- 27 -
Skinning and Cognos 8
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;
}
Hovering Over Menu Items
.menuItemOver {
padding: 1px; color: #000000; height: 20px;background-color: #f8f8dc;
}
5.2 Re-branding Query Studio
All branding related files are found in the <install_directory>/c8/webcontent/skins/your_style/qs folder.
Query Studio will inherit some modifications made in Cognos Connection, including the main header.
Task 1 – Modifying the Header and Toolbar
To modify the top header, perform the highlighted changes in the QSRVCommonUI.css files:
Studio links in the top header */
- 28 -
Skinning and Cognos 8
.topbar_hyperlink_text {text-decoration: underline;cursor: pointer;cursor: hand;color: #333399 !important;
}
To place in a different colored header, add the appropriate parameters:
.mainHeader1{}.mainHeader2{}
Task 2 – Modifying the Toolbar
To modify the toolbar, perform the highlighted changes in the QSRVCommonUI.css files:
Crn.css
Modifies the background color for the toolbar.
.mainHeader3{
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;
}
Modifies the colors when you hover over a toolbar item.
.toolbarButtonOver {padding: 1px 0px 0px 0px;height:22px;border: 1px solid #ffcd6d;background-color: #f8f8dc;cursor: pointer;cursor: hand;
}
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 colors when you hover over a toolbar item
.toolbarButtonOverPressed {padding: 1px 0px 0px 0px;height:22px;border : 1px solid #ffcd6d;
- 29 -
Skinning and Cognos 8
background-color: #f8f8dc;cursor: pointer;cursor: hand;
}
Task 3 – Modifying the Left-Hand Menu List
To modify the menu bar, perform the highlighted changes in the QSRVCommonUI.css files:
Controls the entire background for the menu bar. By default, we’ll keep this white.
.menuBody {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%;
}
The show/hide menu arrow
.menuHeaderButton {border: solid #ffce6d;border-width: 1px 1px 0px;border-collapse: collapse;cursor: pointer;cursor: hand;
}
Background color of the Menu Pane
.menuItem,
.menuItemSpacer,
.menuItemSpacerTop {background-color: #f8f8dc;border: solid #ffce6d;border-width: 0px 1px;border-collapse: collapse;
}
Unselected Hyperlinks Colors
.menuItem,
.menuAction {font-size: 70%;color: #333399;text-decoration: underline;cursor: pointer;cursor: hand;
}
Selected menu item
.menuItemSelected {color: #333399;border-collapse: collapse;
- 30 -
Skinning and Cognos 8
cursor: default;padding: 3px 10px;border: 1px solid #ffce6d;height:20px;font-size: 70%;font-weight: bold;
}
Controls the border around the entire menu tree and the collapsed menu.
.menuContent,
.menuContentCollapsed {color: #f8f8dc;border: 1px solid #ffce6d;padding: 3px;
}
.menuButton {border: 1px solid #ffce6d;border-collapse: collapse;cursor: pointer;cursor: hand;
}
Task 4 – Modify the grid section
To modify the default empty grid, perform the highlighted changes in the QSReport.css files:
.startPageTextOver{
font-weight: normal;font-size: 70%;color: #333399;
}.startPageListColumnTitle{
padding: 3px 5px;border: 1px solid #ffce6d;
- 31 -
Skinning and Cognos 8
line-break: strict;background-color: #f8f8dc;
}.startPageListColumnTitleOver{
padding: 3px 5px;border: 1px solid #ffce6d;line-break: strict;background-color: #f8f8dc;
}.startPageListColumn{
padding: 3px 5px;border-color: #ffce6d;border-width: 0px 1px 1px;border-style: dashed;line-break: strict;background-color: none;
}.startPageListColumnOver{
padding: 3px 5px;border-color: #ffce6d;border-width: 0px 1px 1px;border-style: dashed;line-break: strict;background-color: #f8f8dc;
}.onDragOver{
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.
Task 5 – Remaining Style Changes
Use Find and Replace using the same colors scheme on all CSS files in the qs/ folder.
End Result –
- 32 -
Skinning and Cognos 8
5.3 Re-branding Analysis Studio
All branding related files are found in the <install_directory>/c8/webcontent/skins/your_style/ans
folder.
Task 1 – Modifying the Top Header
To modify the top menu header, perform the highlighted changes in the background.css files:
.menubar{
position: absolute;overflow: hidden;padding: 0px;background-color: #E72B41;border-bottom: 1px solid #E72B41;border-top: 1px solid #E72B41;border-right: 1px solid #E72B41;
}.menubar_content_div{
background-image: url(../../../skins/corporate/ans/images/title_bar_graphic_studios.gif);padding: 2px;border: 0px;width: 578px;
}.menu, .menu_hover, .menu_pressed{
cursor: pointer;cursor: hand;font-size: 8pt;padding: 3px;padding-left: 6px;padding-right: 6px;color: #ffffff;display: inline-block;font-family: Tahoma;font-weight: bold;text-decoration: underline;
}.menu_hover{
background-color: #ffce6d;
- 33 -
Skinning and Cognos 8
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;
}
Task 2 – Modifying the Toolbar
To modify the toolbar, perform the highlighted changes in the background.css files:
.main_toolbar{
position: absolute;white-space: nowrap;padding: 2px;background-color: #f8f8dc;border-bottom: 1px solid #ffce6d;border-right: 1px solid #ffce6d;overflow: hidden;
}
.toolbar_button, .toolbar_button_hover, .toolbar_button_disabled, .toolbar_button_on,
.toolbar_button_off,.toolbar_button_on_hover, .toolbar_dropdown_button,
.toolbar_dropdown_button_hover,
.toolbar_button_pressed, .toolbar_dropdown_button_pressed{
border : 1px solid #ffce6d;background-color: #f8f8dc;padding : 1px;/* pointer for standards compliant browsers, hand for ie 5.5*/cursor: pointer;cursor: hand;
}
.toolbar_button_on{
border-color:#e72b41;background-color:#ffce6d;
}.toolbar_button_on_hover{
border-color:#e72b41;background-color:#ffce6d;
}.toolbar_arrow, .toolbar_arrow_hover, .toolbar_arrow_pressed{
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;
}
- 34 -
Skinning and Cognos 8
.toolbar_button_pressed, .toolbar_arrow_pressed, .toolbar_dropdown_button_pressed{
border : 1px solid #e72b41;background-color: #ffce6d;
}
Task 3 – Modifying the Menu Bar
To modify the menu bar, perform the highlighted changes in the background.css files:
.ToggleBar,.DlgTitleBar{
overflow: hidden;table-layout: fixed;white-space:nowrap;font-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;
}
- 35 -
Skinning and Cognos 8
.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;
border-right : 1px solid #ffce6d;}.tab_td_selected{
border-bottom : 1px solid #ffce6d;}.top_tab_td_selected{
border-top : 1px solid #ffce6d;}.tab_td_none_selected, .top_tab_td_none_selected,.top_tab_dummy_td_none_selected,.tab_dummy_td_none_selected{
text-align: left;color: #333399;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;}
- 36 -
Skinning and Cognos 8
.tab_left_border{
border-left: 1px solid #ffce6d;}
Task 4 – Context Menu Style Changes
To modify the menu bar, perform the highlighted changes in the background.css files:
/*********************************************** Context Menu Style***********************************************/
.contextMenu_body, .contextMenu_body_NS{
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;
}.contextMenu_item_default_over {
cursor: pointer;cursor: hand;font-weight : bold;background-color: #f8f8dc;border: 1px solid #ffce6d;
}
- 37 -
Skinning and Cognos 8
End Result –
5.4 Re-branding Report Studio
All branding related files are found in the <install_directory>/c8/webcontent/skins/your_style/pat
folder.
In the Report Studio CSS file, many UI elements are grouped together. This allows you to quickly
modify the style, but it also means that much more tweaking is required to get the exact color scheme
you are looking for.
Task 1 – Modifying the Main Header
To modify the main header, perform the highlighted changes in the skin.css files:
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;
- 38 -
Skinning and Cognos 8
}TD.clsMenubarItemLast{
background-image: url(images/title_bar_graphic_rs.gif) ;background-repeat: no-repeat;background-position: right;
Task 2 – Modifying the Menu Bar
Since many UI elements are grouped together, we are just going to tweak two parameters and we will
notice that this will change many other UI elements.
To modify the menu bar, perform the highlighted changes in the skin.css files:
BODY,BUTTON,DIV.clsMenubar,DIV.clsToolbar,TD.clsMenubarItem,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,
- 39 -
Skinning and Cognos 8
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,
- 40 -
Skinning and Cognos 8
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,*/
- 41 -
Skinning and Cognos 8
.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;}
Task 3 – Clean up the rest of the UI
Using Find-and-Replace, we can clean up the rest of the UI to match our color scheme.
End result –
6. Conclusion
Cognos 8 provides administrators with the ability to drastically modify the look of Cognos 8 and all of its
components. Cognos provides CSS files that govern the look and the color scheme of 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 Cognos
UIs.
- 42 -
Skinning and Cognos 8
7. Appendix – List of Parameters
Appendix A – Cognos Connection – Default.css
Top HeaderCSS Class Background Border Text Description
.mainHeader1 #336699#e7e7e7, #cc9966
Background color of the main header
.crnOptions #ffffffText colors for hyperlinked studio links
.headerTitleMiddle #336699Color and images used in the middle of the main header
.logoImageContainer #ffffffBackground color for the Cognos Connection image (icon_portal.gif)
Header 2 and Header 3CSS Class Background Border Text Description
.mainHeader2 #f3f3f3 #f3f3f3Background and border colors used for Header 2.
.mainHeader3 #f3f3f3 Background color used for Header 3.
.ccOptions #0000ccHyperlinked colors for “Preferences” and “Help”.
.authOption #0000cc Hyperlink colors for Logon / Logoff.
.ccToolsLabel #0000cc Hyperlink color for “Tools”
.ccOptionsDivider #999999Color of the vertical line separating “Home” and “Preferences”.
.userName #000000Text color used to display the user logged in.
Portal TabsCSS Class Background Border Text Description.tabBorder #999999.tabLabel #336699.tabLink #336699
.tabScrollButton #ffffff #999999Background and border colors used for the “scrolling” button to the right of the portal tabs.
.tabScrollButtonOver #ffffff #999999Background and border colors used when you hover over the “scrolling” buttons.
.tabScrollButtonDisabled
#ffffff #ccccccBackground and border colors used when the “scrolling” button is disabled.
.tabAnchor #0000cc
.tabNormal #ffffff#e7e7e7, #999999
#ff0000Color used for non-selected portal tabs.
.tabSelected #ffffff #999999 #336699 Colors used for the selected portal tab.
.tabNormalAfterSelected
#ffffff#e7e7e7, #999999
#ff0000Colors used for the portal tab to the right of the one selected.
.tabCap#e7e7e7, #999999
Borders at the end of the portal tabs.tabBase #999999.tabTail #999999
Public Folders / My Folders
HyperlinksCSS Class Background Border Text Descriptiona #0000cc Color of most hyperlinked objects.
Path
- 43 -
Skinning and Cognos 8
CSS Class Background Border Text Description
.pathLeafNode #336699Color used to display the current folder you are in.
.pathSeparator #0000cc Color used to display the folder separator “>”.
.pathLink #0000ccColor used to display the hyperlinked breadcrumb path.
ToolbarCSS Class Background Border Text Description.toolbarImageNormal #ffffff #cccccc Colors for toolbar items.
.toolbarImageOver #ffffff #e3e9f3Colors when you hover over a toolbar item.
.toolbarImagePressed #e3e9f3 #666699 Colors when you click on a toolbar item..toolbarImageOverPressed #c6c6d7 #666699
.toolbarImageUnavailable #ffffffColors when a toolbar image is not found.
.toolbarFlyoutNormal #ffffff #ccccccBackground and border colors used when the “scrolling” button is disabled.
.toolbarFlyoutOver #ffffff #666699
.toolbarDivider #cccccc
Table – List ViewCSS Class Background Border Text Description
.cctable #ffffff#000000, #999999
Outer borders surrounding the table
.tableHeader #e7e7e7 Background color for the table header.
.tableHeaderDivider #999999Vertical line separating the columns in the table header.
.tableTitle #336699Text for column names in the table header.
.tableSortTitle #336699 Text for “Sort” in table header.
.tableText #000000Text used for the table (except hyperlinks).
Table – Detail ViewCSS Class Background Border Text Description.objectName #000000 Text colors used to display descriptions
and dates..objectOptions #000000
My PagesCSS Class Background Border Text Description
.boxborder #e7e7e7Outer border surrounding the portlets.
.boxButtonNormal #ffffff #ffffffThe “edit”, “minimize”, and “maximize” buttons on the portlets.
.boxButtonOver #ffffff #ffffffThe “edit”, “minimize”, and “maximize” buttons on the portlets – when hovered over.
.boxHeaderBackground #99aaccBackground color of the portlet header.
.boxBody table #000000 Text color used within the portlet.
.boxHeader #ffffffText color used within the portlet header.
.pageEditorPortletColumn #ffffff #cccccc #666699Colors used in the portlet window within the page editor.
Dialogs, Command Buttons, and Popups
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.
- 44 -
Skinning and Cognos 8
Command Buttons, like OK and Cancel at the bottom of dialogs.CSS Class Background Border Text Description
.commandButton #ffffff #999999Background and border colors used for command buttons.
.commandButtonOver #e3e9f3 #999999Colors used when hovering over a command button.
.commandButtonDown #e3e9f3 #999999Colors used when you click on a command button.
.commandButtonInactive
#ffffff #999999 #999999Colors used when a command button is inactive.
.commandButtonActive #000000Text color used when a command button is active.
.simpleCmdButtonActive #ffffff #cccccc #000000Special command button that only used in a few pop-ups.
General DialogCSS 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.
.dialogCloseOver #ffffffBorder surrounding the “X” button when hovered over.
.dialogDivider #ccccccBackground color for the horizontal divider used in dialogs, like the “action” button.
.dialogButtonBar #e7e7e7 #ccccccColors used in the bar that displays the “OK” and “Cancel” buttons.
.dialogSearchPathDisplayPanel
#336699Borders used in the search path pop-up window.
.dialogHeaderLinkColor #ffffff
.body_dialog_modal #e3e9f3 Colors used in modal dialogs.
.dialogButtonBarPopup #e7e7e7#cccccc, #bec8dc
Colors used for the dialog button in the “view search path” pop-up.
.dialogWindowPopup #e3e9f3#cccccc, #eeecf3, #ffffff
.messageText #000000 Text color used for dialog messages.
.menuItemOver #e3e9f3 #000000
.menuItemNormal #ffffff #000000
Email Body, Links, and AttachmentsCSS Class Background Border Text Description.emailItem #ffffff #ffffff.emailItem_active #e3e9f3 #191970.emailItem_hover #e3e9f3 #191970.emailBodyTableRow #99aacc.emailLinksAttachmentTableRow #99aacc
Appendix B – Query Studio – QSRVCommonUI.css
HeaderMost header items are inherited from the Cognos Connection style.CSS Class Background Border Text Description.topbar_hyperlink_text #ffffff Text color of the hyperlinks on the top header.
Toolbar
- 45 -
Skinning and Cognos 8
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.
.toolbarBody #ffffff #000000Colors used for the section that contains all toolbar 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 BarCSS 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
.menuAction #0000ccText color used for the non-selected hyperlinked menu items.
.menuItemSelected #336699 #336699 Colors used for the selected menu items.
.metadataLoading #000000Text color used when loading metadata objects in the insertable objects pane.
.menuContent #336699 #336699Text and borders used for menu content after you select a menu item.
.menuContentCollapsed #336699 #336699Text and border colors used when the menu has been collapsed.
.menuButton #336699Border used around the menu button, when collapsed.
QSReport.css
Blank Report StyleCSS Class Background Border Text Description.startPageText #000000 Text instructions within the crosstab..startPageTextOver #336699 Text when you hover over a section..startPageListColumnTitle #bec8dc #99aacc Header colors for the crosstab..startPageListColumnTitleOver #000000 #99aacc Header colors when you hover over..startPageListColumn #99aacc Body color of the crosstab..startPageListColumnOver #e3e9f3 #99aacc Color when you hover over the body of a crosstab.
Appendix C – Analysis Studio - background.css
HeadersCSS Class Background Border Text Description
.menubar #ffffff#e7e7e7, #deac77
Colors for the top menu bar.
.menubar_content_div title_bar_graphic_studios.gif Image used in the background on the header.
.menu #ffffff Text color used for menu items.
.menu_hover #e3e9f3 #e3e9f3 #123679Colors used when you hover over the menu list or a menu action.
.menu_pressed #e3e9f3 #e3e9f3 #123679 Color used when you click on a menu action.
Content Menu Style - When you select an item from a drop down, toolbar, or menu.CSS Class Background Border Text Description
- 46 -
Skinning and Cognos 8
.contextMenu_bodyWhite #336699 Colors for the entire menu section.
.contentMenu_body_NS
.contextMenu_item#ffffff #0000cc
Colors for selected menu items.
.contextMenu_item_with_submenu
.contextMenu_item_over
#e3e9f3 #99aacc #0000cc.contextMenu_item_with_submenu_over.contextMenu_item_default_over.contextMenu_item_default.contextMenu_item_disabled #ffffff Graytext.contextMenu_item_disabled_over
ToolbarsCSS Class Background Border Text Description.main_toolbar
#f3f3f3 #cccccc Colors used in the main toolbar.
.toolbar_button
.toolbar_button_hover
.toolbar_button_disabled
.toolbar_button_off
.toolbar_dropdown_button
.toolbar_dropdown_button_hover
.toolbar_button_pressed
.toolbar_dropdown_button_pressed
.toolbar_button_on #cccce3 #cccccc Colors used for toolbar items.
.toolbar_button_on_hover #bec8dc #336699Colors used when you hover over a toolbar item.
.toolbar_arrow#f3f3f3 #cccccc Colors used for dropdown toolbar items..toolbar_arrow_hover
.toolbar_arrow_pressed
Insertable ObjectsCSS Class Background Border Text Description.tab_td_selected
#ffffff #cccccc #336699Colors for the selected tabs below “insertable objects”..top_tab_td_selected
.tab_td_none_selected
#cccccc #0000ccColors used for the non-selected tabs in “insertable objects”
.top_tab_td_none_selected
.top_tab_dummy_td_none_selected
.tap_dummy_td_none_selected
.tab_right_border#cccccc
Border colors surrounding “insertable objects”.tab_left_border
Toggle bar, Dimensional Viewer Title Bar, and Property Pane Title BarCSS 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.
.ins_obj_title_bar #99aacc #336699 #ffffffColors used for the “Insertable Objects” title bar.
- 47 -