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 -


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


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


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


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


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 -


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 -


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


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

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

4. You will notice that this section is commented out. Un-comment out this section and add the

following section for your new style:

<param name="OEM">



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


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 -


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.


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



In the skin.css file, modify the following parameters individually:

- 13 -


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 -


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


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 -


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


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



- 17 -


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 -


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


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 {


}.ccToolsLabel {


}

- 20 -


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 -


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


Toolbar:

.objectName {


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


}.toolbarImagePressed {


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


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 -


Controls the Background of the Table’s Header

.tableHeader {

background-color: #f8f8dc;}.tableHeaderDivider {


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 {


}.tableItemCount {


}

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 -


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


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


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 -


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


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 -


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 -


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 -


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 -


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 -


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 -


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


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


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


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 -


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


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 -


BUTTON.clsBigCoolButton_pressed,TD.clsMenubarItem_down,TD.clsToolbarButton_down{


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 -


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


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 -


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 -


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 -


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 -


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 -


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

cognos skinning

Documents

1px solid

1px solid

e72b41 1px

branding report

branding query

branding analysis

1px solid

ffce6d 1px