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......................................................................3

2.1Default Colors used with the Corporate Style.....................................................................3 2.2 Understanding Hexadecimal Colors......................................................................................3 2.3 Mapping Colors to Sections of the User Interface.................................................................3
3.Customizing the Cognos 8 UI...................................................................................................6

3.1 Importing New Styles............................................................................................................6 3.2 Files Used with Cognos 8 Styles...........................................................................................7 3.3 Changing Text, Font Types, and Images...............................................................................8
4.Example 1 Quickly Re-branding Cognos 8............................................................................8

4.1 Re-branding Cognos Connection...........................................................................................9 4.2Re-branding Query Studio....................................................................................................12 4.3Re-branding Analysis Studio................................................................................................12 4.4Re-branding Report Studio...................................................................................................13 4.5Re-branding Metrics Manager..............................................................................................15 4.6Re-branding Event Studio.....................................................................................................17
5.Example 2 Understanding the Various different UI Parameters...........................................18

5.1Re-branding Cognos Connection..........................................................................................19 5.2Re-branding Query Studio....................................................................................................28 5.3Re-branding Analysis Studio................................................................................................33 5.4Re-branding Report Studio...................................................................................................38
6.Conclusion.............................................................................................................................. 42 7.Appendix List of Parameters................................................................................................43

Appendix A Cognos Connection Default.css......................................................................43 Appendix B Query Studio QSRVCommonUI.css...............................................................45 Appendix 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 rebrand 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.1 Default 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. #0000CC #123679 #336699 #666699 #CCCCE3 #99AACC #BEC8DC #E3E9F3 #000000 #999999 #CCCCCC #E7E7E7 #F3F3F3 #FFFFFF #CC9966 #DEAC77

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-

Skinning and Cognos 8

Cognos Connection
Background Colors
#336699

Borders
#E7E7E7 #F3F3F3 #999999

Text
#FFFFFF #0000CC #000000

Screenshot

Headers

#FFFFFF #F3F3F3 #999999

#FFFFFF

#CC9900 #E3E9F3 #CCCCCC #666699

#336699

Toolbar

#E3E9F3 #CCCCCC

#FFFFFF

#000000 #999999

#0000CC #336699 #000000

List View

#E7E7E7 #999999

My Pages

#FFFFFF #99AACC

#E7E7E7 #FFFFFF #CCCCCC

#FFFFFF #000000 #666699

#FFFFFF

#CCCCCC #999999 #336699 #BEC8DC #FFFFFF #EEECF3

#999999 #000000 #336699 #FFFFFF

Dialogs

#BEC8DC #E3E9F3 #E7E7E7

-4-

Skinning and Cognos 8

Query Studio
Background Colors Headers
#FFFFFF #E3E9F3 #BEC8DC #CCCCCC #336699 #999999

Borders

Text
#FFFFFF

Screenshot

Toolbar

#000000 #336699

Menu Bar

#FFFFFF #E7E7E7 #E3E9F3

#336699

#000000 #336699 #0000CC

Blank Report Style

#E3E9F3 #BEC8DC #000000

#99AACC

#000000 #336699

-5-

Skinning and Cognos 8

Analysis Studio
Background Colors Headers
#FFFFFF #E3E9F3

Borders
#E7E7E7 #DEAC77 #E3E9F3

Text
#FFFFFF #123679

Screenshot

Menu Style

white #E3E9F3

#336699

#0000CC graytext

Toolbar

#F3F3F3 #CCCCE3 #BEC8DC

#CCCCCC #336699

Insertable Objects

#FFFFFF

#CCCCCC

#0000CC #336699

Object Headers

#99AACC #E7E7E7

#336699 #99AACC

#FFFFFF

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-

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 Cognos Connection Welcome Page / skins/my_style/port al / skins/my_style/port Report Studio Analysis Studio al /skins/my_style/pat /skins/my_style/ans skin.css background.css explore.css scrollbarstyle.css default.css Directory Files default.css Images /skins/my_style/portal/images /skins/my_style/branding /skins/my_style/portal/images /skins/my_style/branding /skins/my_style/pat/images /skins/my_style/ans/images

-7-

Skinning and Cognos 8 crn.css QSRVCommonUI.c ss ags.css crn.css default.css admin_styles.css

Query Studio Event Studio Metrics Manager

/skins/my_style/qs /skins/my_style/ags / skins/my_style/cm m

/skins/my_style/qs/images /skins/my_style/ags/images /skins/my_style/cmm/images / 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:

#2D5C3D

#C8DDCA

#8BB093

Using this color scheme, you will replace the default colors with the following colors, with a few exceptions. Note: when picking out a color scheme, try to keep the same color accents, i.e. match dark colors with dark colors and light colors with light colors.
#0000CC #123679 #336699 #666699 #99AACC #999999 #CCCCCC #CC9966 #DEAC77 #E7E7E7 #C8DDCA #F3F3F3 #2D5C3D #CCCCE3 #BEC8DC #E3E9F3 #8BB093

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 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:

Find and Replace

1. Modify the Cognos Connection header:

-9-

Skinning and Cognos 8

1.

2.

3.

.headerTitle { padding-left: 0px; font-weight: bold; font-size: 80%; color: #000000; background-color: #2d5d3d; } .headerTitleMiddle { background-color: #2d5d3d; background-image: url(images/title_bar_grapic.gif); background-repeat: repeat-y; background-position: left top; } .crnOptions { font-size: 70%; color: #c8ddca; }

2. Modify the Portal Tabs

1.

2.

3.

.tabNormal { padding-right: 20px; padding-left: 20px; font-size: 70%; color: #ff0000; text-align: center; background-color: #c8ddca; border-left: #c8ddca 1px solid; border-bottom: #2d5d3d 1px solid; border-top: #c8ddca 1px solid; } .tabSelected { padding-right: 20px; padding-left: 20px; font-weight: bold; font-size: 70%; color: #ffffff; border-right: #2d5d3d 1px solid; border-left: #2d5d3d 1px solid; border-top: #2d5d3d 1px solid; text-align: center; background-color: #8bb093; } .tabNormalAfterSelected { padding-right: 20px; padding-left: 20px; font-size: 70%; color: #ff0000; text-align: center; background-color: #c8ddca; border-bottom: #2d5d3d 1px solid; border-top: #c8ddca 1px solid; }

3. Replacing the Cognos Connection text with a corporate logo

- 10 -

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 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

Find and Replace

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 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:

Find and Replace

- 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 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

Find and Replace

#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;

- 15 -

Skinning and Cognos 8

background-attachment: fixed; } .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 }

- 16 -

Skinning and Cognos 8

.clsMenuItemHeader { background-color: #c8ddca }

Modifies the selected item

.clsTreeTextBlack { text-decoration: underline; font-size: 70%; color: #2d5c3d; } .clsTreeTextHighlight{ font: bold 70% Tahoma, arial, geneva, helvetica, sans-serif; color: #2d5c3d; }

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 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.

Find and Replace

- 17 -

Skinning and Cognos 8 Other Configuration Changes 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:

#E72B41

#FFCE6D

#F8F8DC

#333399

5.1 Re-branding Cognos Connection

All branding related files are found in the <install_directory>/c8/webcontent/skins/your_style/portal folder. Task 1 Modify the Top Line Header in 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 -

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.
MY/Pharmacy
Exp e ct so me thing mo re

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

- 21 -

Skinning and Cognos 8

.tabSelected { 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;

- 23 -

Skinning and Cognos 8

padding-right: 4px; border: #ffce6d 1px solid; cursor: hand; background-color: #f8f8dc; } .toolbarDivider { width: 1px; background-color: #f8f8dc; } .toolbarImageDefaultCursor { cursor: default; }

Path
.pathLeafNode { font-weight: bold; color: #333399; } .pathSeparator { color: #333399; } .pathLink { color: #333399; }

List View
/* --- List control --- */ .pager_text { font-size: 70%; color: #333399; font-family: Tahoma; }

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 Tables Header

.tableHeader { background-color: #f8f8dc; } .tableHeaderDivider { background-color: #ffce6d; }

Determines the color of the font used for the tables 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; }

- 25 -

Skinning and Cognos 8

.boxButtonOver { 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) */

- 26 -

Skinning and Cognos 8

.commandButton { border: #ffce6d 1px solid; font-size: 90%; background-color: #ffffff; } .commandButtonOver { border: #ffce6d 1px solid; font-size: 90%; cursor: hand; background-color: #f8f8dc; }.commandButtonDown { border: #ffce6d 1px solid; font-size: 90%; cursor: hand; background-color: #f8f8dc; } .commandButtonInactive { font-size:90%; width: 100%; cursor: default; color: #f8f8dc; height: 100%; text-decoration: none; border: #ffce6d 1px solid; background-color: #ffffff; } .dialogDivider /* horizontal dividers e.g. actions dialog */ { background-color: #f8f8dc; }

Search path
.dialogSearchPathDisplayPanel { height: 45px; overflow: auto; word-wrap: break-word; border: #ffce6d 1px solid; padding:5px; margin-right:5px; }

Pop Up Windows
/* Modal dialogs */ .body_dialog_modal { background-color: #f8f8dc; } .dialogButtonBarPopup /* pop up dialog button bar- view search path */

- 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:

- 28 -

Skinning and Cognos 8

Studio links in the top header */
.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;

- 29 -

Skinning and Cognos 8

height:22px; border : 1px solid #ffcd6d; 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, well 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 {

- 30 -

Skinning and Cognos 8

color: #333399; border-collapse: collapse; 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 {

- 31 -

Skinning and Cognos 8

padding: 3px 5px; border: 1px solid #ffce6d; 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;

- 38 -

Skinning and Cognos 8

border-bottom: 1px solid #e72b41; } 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,

- 39 -

Skinning and Cognos 8

TD.clsToolbarButton_down, TD.clsToolbarButton_stuck, TD.clsMenuItem_selected, DIV.clsPaneHeader_inactive, .clsListItem_hover, .clsListItem_tb_selected, .clsTreeNode_hover, TD.clsPropertySheetLabel_active, .clsModalDlgHeader_inactive, BUTTON.clsXButton_inactive, TD.clsTabBox_active_hover, TD.clsBottomTabBox_active_hover, BUTTON.clsBigCoolButton_hover, TD.clsMenubarItem_up, TD.clsToolbarButton_up, BUTTON.clsBigCoolButton_pressed, TD.clsMenubarItem_down, TD.clsToolbarButton_down { background-color: #e72b41; }

All background items are now beige (#f8f8cd). Menu items, highlighted toolbars, and menu panes are in dark beige (#ffce6d). Since many of these UI elements are grouped together, many parameter changes span across the entire UI. In the screenshot above, suppose that we wanted the un-highlighted windows in the lefthand 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, were 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,

- 40 -

Skinning and Cognos 8

TD.clsMenubarItem_up, TD.clsToolbarButton_up, BUTTON.clsBigCoolButton_pressed, TD.clsMenubarItem_down, TD.clsToolbarButton_down { background-color: #ffce6d; } DIV.clsPaneHeader_inactive, TD.clsModalDlgHeader_inactive { background-color: #d6f0b1; } DIV.clsPaneHeader_active, .clsModalDlgHeader_active, .clsToolDlgHeader_active, #idProgressBar { background-color: #e72b41; }

Note: this will also change the color of the progress bar when you load Report Studio. If you want to change this, you can place the #idProgressBar class into its own section and assign your own background color to it. Since we changed the inactive left-hand menu header to light green, the white text will be difficult to view. So, in this case, well 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,*/

- 41 -

Skinning and Cognos 8

#idPropertiesPane, /*.clsPane_Toolbox_active, .clsPane_Toolbox_inactive,*/ .clsPane_Properties_inactive, .clsPane_Workarea_inactive, TABLE.clsModalDlg, BUTTON.clsDlgButton, BUTTON.clsXButton_active, BUTTON.clsXButton_inactive, #idExplorerBar, TD.clsExplorerButton, #idResizeBarToolboxBottom, #idResizeBarToolboxRight, .clsBigButtonBar, BUTTON.clsBigCoolButton, TD.clsToolbarButton, .clsQueryViewListViewHeader, .clsQueryTabBackground { background-color: #f8f8cd; } #idToolboxPane, .clsPane_Toolbox_active, .clsPane_Toolbox_inactive { background-color: #ffffff; }

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 Header CSS Class
.mainHeader1 .crnOptions .headerTitleMiddle .logoImageContainer #336699 #ffffff

Background
#336699

Border
#e7e7e7, #cc9966

Text
#ffffff

Description
Background color of the main header Text colors for hyperlinked studio links Color and images used in the middle of the main header Background color for the Cognos Connection image (icon_portal.gif)

Header 2 and Header 3 CSS Class Background

.mainHeader2 .mainHeader3 .ccOptions .authOption .ccToolsLabel .ccOptionsDivider .userName #f3f3f3 #f3f3f3

Border
#f3f3f3

Text

Description
Background and border colors used for Header 2. Background color used for Header 3. Hyperlinked colors for Preferences and Help. Hyperlink colors for Logon / Logoff. Hyperlink color for Tools Color of the vertical line separating Home and Preferences. Text color used to display the user logged in.

#0000cc #0000cc #0000cc #999999 #000000

Portal Tabs CSS Class

.tabBorder .tabLabel .tabLink .tabScrollButton .tabScrollButtonOver . tabScrollButtonDisab led .tabAnchor .tabNormal .tabSelected . tabNormalAfterSelec ted .tabCap .tabBase .tabTail

Background
#999999

Border

Text
#336699 #336699

Description

#ffffff #ffffff #ffffff

#999999 #999999 #cccccc #0000cc #e7e7e7, #999999 #999999 #e7e7e7, #999999 #e7e7e7, #999999 #999999 #999999

Background and border colors used for the scrolling button to the right of the portal tabs. Background and border colors used when you hover over the scrolling buttons. Background and border colors used when the scrolling button is disabled. #ff0000 #336699 #ff0000 Color used for non-selected portal tabs. Colors used for the selected portal tab. Colors used for the portal tab to the right of the one selected. Borders at the end of the portal tabs

#ffffff #ffffff #ffffff

Public Folders / My Folders Hyperlinks CSS Class

a

Background

Border

Text
#0000cc

Description
Color of most hyperlinked objects.

- 43 -

Skinning and Cognos 8 Path CSS Class

.pathLeafNode .pathSeparator .pathLink

Background

Border

Text
#336699 #0000cc #0000cc

Description
Color used to display the current folder you are in. Color used to display the folder separator >. Color used to display the hyperlinked breadcrumb path.

Toolbar CSS Class

.toolbarImageNormal .toolbarImageOver .toolbarImagePressed .toolbarImageOverPressed .toolbarImageUnavailable .toolbarFlyoutNormal .toolbarFlyoutOver .toolbarDivider

Background
#ffffff #ffffff #e3e9f3 #c6c6d7 #ffffff #ffffff #ffffff #cccccc

Border
#cccccc #e3e9f3 #666699 #666699

Text

Description
Colors for toolbar items. Colors when you hover over a toolbar item. Colors when you click on a toolbar item. Colors when a toolbar image is not found. Background and border colors used when the scrolling button is disabled.

#cccccc #666699

Table List View CSS Class Background

.cctable .tableHeader .tableHeaderDivider .tableTitle .tableSortTitle .tableText #ffffff #e7e7e7 #999999

Border
#000000, #999999

Text

Description
Outer borders surrounding the table Background color for the table header. Vertical line separating the columns in the table header. Text for column names in the table header. Text for Sort in table header. Text used for the table (except hyperlinks).

#336699 #336699 #000000

Table Detail View CSS Class Background

.objectName .objectOptions

Border

Text
#000000 #000000

Description
Text colors used to display descriptions and dates.

My Pages CSS Class

.boxborder .boxButtonNormal .boxButtonOver .boxHeaderBackground .boxBody table .boxHeader .pageEditorPortletColumn

Background
#ffffff #ffffff #99aacc

Border
#e7e7e7 #ffffff #ffffff

Text

Description
Outer border surrounding the portlets. The edit, minimize, and maximize buttons on the portlets. The edit, minimize, and maximize buttons on the portlets when hovered over. Background color of the portlet header. Text color used within the portlet. Text color used within the portlet header. Colors used in the portlet window within the page editor.

#000000 #ffffff #ffffff #cccccc #666699

Dialogs, Command Buttons, and Popups Image Buttons CSS Class Background
.button .button_hover #ffffff #bec8dc

Border
#cccccc #99aacc

Text

Description
Colors used for the image button. Colors used when hovering over the image buttons.

- 44 -

Skinning and Cognos 8

.button_pressed #bec8dc #336699 Colors used when you click on an image button.

Command Buttons, like OK and Cancel at the bottom of dialogs. CSS Class Background Border Text Description
.commandButton .commandButtonOver .commandButtonDown . commandButtonInactive .commandButtonActive .simpleCmdButtonActive #ffffff #cccccc #ffffff #e3e9f3 #e3e9f3 #ffffff #999999 #999999 #999999 #999999 #999999 #000000 #000000 Background and border colors used for command buttons. Colors used when hovering over a command button. Colors used when you click on a command button. Colors used when a command button is inactive. Text color used when a command button is active. Special command button that only used in a few pop-ups.

General Dialog CSS Class

.dialogHeader .dialogHeaderText .dialogHintText .dialogHeaderTitle .dialogClose .dialogCloseOver .dialogDivider .dialogButtonBar . dialogSearchPathDispl ayPanel .dialogHeaderLinkColor .body_dialog_modal .dialogButtonBarPopup .dialogWindowPopup .messageText .menuItemOver .menuItemNormal

Background
#99aacc

Border
#336699

Text
#336699 #336699 #ffffff

Description
Colors used around the dialog headers. Colors used in the introductory dialog text. Colors used for generic hints. Text color used for the dialog headers. Border surrounding the X button. Border surrounding the X button when hovered over. Background color for the horizontal divider used in dialogs, like the action button. Colors used in the bar that displays the OK and Cancel buttons. Borders used in the search path pop-up window.

#bec8dc #ffffff #cccccc #e7e7e7 #cccccc #336699 #ffffff #e3e9f3 #e7e7e7 #e3e9f3 #e3e9f3 #ffffff #cccccc, #bec8dc #cccccc, #eeecf3, #ffffff #000000 #000000 #000000

Colors used in modal dialogs. Colors used for the dialog button in the view search path pop-up.

Text color used for dialog messages.

Email Body, Links, and Attachments CSS Class Background

.emailItem .emailItem_active .emailItem_hover .emailBodyTableRow . emailLinksAttachmentTableRow #ffffff #e3e9f3 #e3e9f3

Border
#ffffff #191970 #191970 #99aacc #99aacc

Text

Description

Appendix B Query Studio QSRVCommonUI.css

Header Most 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.

- 45 -

Skinning and Cognos 8

Toolbar CSS Class

.toolbarButton .toolbarButtonOver .toolbarButtonPressed . toolbarButtonOverPressed .toolbarBody .dlgHeader .dialogButton .dialogButtonOver .dialogButtonText

Background
#ffffff #e3e9f3 #e3e9f3 #bec8dc #ffffff

Border
#cccccc #336699 #cccccc #336699

Text

Description
Colors used for the toolbar button. Colors used when you hover over a toolbar button. Colors used when you click on a toolbar button. Colors used when you click on a toolbar button.

#336699 #e3e9f3 #999999 #336699

#00000 0 #33669 9

Colors used for the section that contains all toolbar items. Border and text colors for the dialog headers. Border color for the dialog button. Colors when you hover over a dialog button.

#00000 0

Text color of the dialog buttons.

Menu Bar CSS Class

.menuBody .menuButtonBody .previewBody .previewBodyClosed .menuHeader .menuHeaderButton .menuItem .menuItemSpacer .menuAction .menuItemSelected .metadataLoading .menuContent .menuContentCollapsed .menuButton

Background
#ffffff #ffffff #e7e7e7 #ffffff

Border

Text
#00000 0 #00000 0 #00000 0 #00000 0 #33669 9 #33669 9 #0000cc #0000cc

Description
Controls the entire background behind the menu bar.

Colors used when in preview mode.

Text color used for the word Menu. Text color used in the menu button. Colors used in the menu pane. Text color used for the non-selected hyperlinked menu items. Colors used for the selected menu items. Text color used when loading metadata objects in the insertable objects pane. Text and borders used for menu content after you select a menu item. Text and border colors used when the menu has been collapsed. Border used around the menu button, when collapsed.

#e3e9f3 #e3e9f3

#336699 #336699

#336699

#336699 #336699 #336699

#33669 9 #00000 0 #33669 9 #33669 9

QSReport.css Blank Report Style CSS Class

.startPageText .startPageTextOver .startPageListColumnTitle .startPageListColumnTitleOver .startPageListColumn .startPageListColumnOver #bec8dc #000000 #e3e9f3 #99aacc #99aacc #99aacc #99aacc

Background

Border

Text
#00000 0 #33669 9

Description
Text instructions within the crosstab. Text when you hover over a section. Header colors for the crosstab. Header colors when you hover over. Body color of the crosstab. Color when you hover over the body of a crosstab.

Appendix C Analysis Studio - background.css

Headers

- 46 -

Skinning and Cognos 8 CSS Class

.menubar .menubar_content_div .menu .menu_hover .menu_pressed

Background
#ffffff title_bar_graphic_studios.gif #e3e9f3 #e3e9f3

Border
#e7e7e7, #deac77

Text

Description
Colors for the top menu bar. Image used in the background on the header. Text color used for menu items. Colors used when you hover over the menu list or a menu action. Color used when you click on a menu action.

#e3e9f3 #e3e9f3

#ffffff #12367 9 #12367 9

Content Menu Style - When you select an item from a drop down, toolbar, or menu. CSS Class Background Border Text Description
.contextMenu_body .contentMenu_body_NS .contextMenu_item .contextMenu_item_with_submenu .contextMenu_item_over . contextMenu_item_with_submenu_over .contextMenu_item_default_over .contextMenu_item_default .contextMenu_item_disabled .contextMenu_item_disabled_over White #336699 #ffffff #0000cc Colors for the entire menu section.

#e3e9f3

#99aacc

#0000cc

Colors for selected menu items.

#ffffff

Graytext

Toolbars CSS Class

.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 .toolbar_button_on_hover .toolbar_arrow .toolbar_arrow_hover .toolbar_arrow_pressed

Background

Border

Text

Description

#f3f3f3

#cccccc

Colors used in the main toolbar.

#cccce3 #bec8dc #f3f3f3

#cccccc #336699 #cccccc

Colors used for toolbar items. Colors used when you hover over a toolbar item. Colors used for dropdown toolbar items.

Insertable Objects CSS Class

.tab_td_selected .top_tab_td_selected .tab_td_none_selected .top_tab_td_none_selected .top_tab_dummy_td_none_selected .tap_dummy_td_none_selected .tab_right_border .tab_left_border

Background
#ffffff

Border
#cccccc

Text
#33669 9 #0000cc

Description
Colors for the selected tabs below insertable objects. Colors used for the non-selected tabs in insertable objects Border colors surrounding insertable objects

#cccccc

#cccccc

Toggle bar, Dimensional Viewer Title Bar, and Property Pane Title Bar CSS Class Background Border Text Description
.ToogleBar .DlgTitleBar .ToogleBarArrow .DlgCloseIcon .InfoContainer .ins_obj_title_bar #99aacc #336699 #99aacc #e7e7e7 #99aacc #99aacc #336699 #ffffff Colors used in the Information window. Colors used for the Insertable Objects title bar. #ffffff Colors used the header of the toogle bar.

- 47 -

Skinning and Cognos 8

- 48 -