Customizing the Cognos 8 Ui

Business Analytics

Proven Practice

Customizing the IBM Cognos 8 UI Product(s): Cognos 8.1 and 8.2

Area of Interest: Infrastructure

Customizing the IBM Cognos 8 UI 2

Business Analytics

Copyright and Trademarks Licensed Materials - Property of IBM. © Copyright IBM Corp. 2010 IBM, the IBM logo, and Cognos are trademarks or registered trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at http://www.ibm.com/legal/copytrade.shtml

While every attempt has been made to ensure that the information in this document is accurate and complete, some typographical errors or technical inaccuracies may exist. IBM does not accept responsibility for any kind of loss resulting from the use of information contained in this document. The information contained in this document is subject to change without notice. This document is maintained by the Best Practices, Product and Technology team. You can send comments, suggestions, and additions to [email protected].

http://www.ibm.com/legal/copytrade.shtml�

mailto:[email protected]�


Business Analytics

Contents

1. INTRODUCTION.............................................................................................4 2. UNDERSTANDING THE COLOR SCHEME USED IN STYLES ............................4 2.1 DEFAULT COLORS USED WITH THE “CORPORATE” STYLE .................................................... 4 2.2 UNDERSTANDING HEXADECIMAL COLORS....................................................................... 5 2.3 MAPPING COLORS TO SECTIONS OF THE USER INTERFACE .................................................. 5 3. CUSTOMIZING THE IBM COGNOS 8 UI .........................................................9 3.1 IMPORTING NEW STYLES .......................................................................................... 9 3.2 FILES USED WITH IBM COGNOS 8 STYLES................................................................... 10 3.3 CHANGING TEXT, FONT TYPES, AND IMAGES ................................................................ 10 4. EXAMPLE 1 – QUICKLY RE-BRANDING IBM COGNOS 8 ..............................11 4.1 RE-BRANDING IBM COGNOS CONNECTION................................................................... 12 4.2 RE-BRANDING QUERY STUDIO .................................................................................. 14 4.3 RE-BRANDING ANALYSIS STUDIO............................................................................... 15 4.4 RE-BRANDING REPORT STUDIO................................................................................. 16 4.5 RE-BRANDING METRICS MANAGER............................................................................. 17 4.6 RE-BRANDING EVENT STUDIO .................................................................................. 20 5. EXAMPLE 2 – UNDERSTANDING THE VARIOUS DIFFERENT UI PARAMETERS21 5.1 RE-BRANDING IBM COGNOS CONNECTION................................................................... 22 5.2 RE-BRANDING QUERY STUDIO .................................................................................. 32 5.3 RE-BRANDING ANALYSIS STUDIO............................................................................... 37 5.4 RE-BRANDING REPORT STUDIO................................................................................. 42 6. EXAMPLE 3 – USING BACKGROUND IMAGES..............................................47 6.1 BACKGROUND ...................................................................................................... 47 6.2 CREATING BACKGROUND IMAGES .............................................................................. 48 6.3 ADDING BACKGROUND IMAGES TO A STYLE .................................................................. 50 7. CONCLUSION...............................................................................................51 8. APPENDIX – LIST OF PARAMETERS ............................................................52 1.1 APPENDIX A – IBM COGNOS CONNECTION – DEFAULT.CSS .............................................. 52 1.2 APPENDIX B – QUERY STUDIO – QSRVCOMMONUI.CSS.................................................. 55 1.3 APPENDIX C – ANALYSIS STUDIO - BACKGROUND.CSS ..................................................... 56


Business Analytics

1. Introduction 1.1 Purpose This document provides some tips and techniques when creating a custom style (or “skin”) in IBM

Cognos 8.1 and 8.2. This document provides an overview of the concepts, colors schemes, and files

used for skinning in IBM Cognos 8. It also provides some task-related examples to better illustrate all

of the changes necessary to create your own custom style. Two examples are shown; one which

demonstrates how to quickly re-brand IBM Cognos 8 to match corporate branding using find-and-

replace techniques and a second example which explores many different parameters and how

tweaking these parameters changes the corresponding UIs. A list of all commonly used parameters

can be found in the appendix. This document does not provide instructions on how to customize the

existing report styles.

1.2 Applicability

This document only applies to IBM Cognos 8.1 and 8.2

2. Understanding the Color Scheme used in Styles

Default Colors used with the “Corporate” Style

Knowing the default color scheme allows you to match these default colors to your desired style. All

IBM Cognos components follow the same color scheme very closely. The figure below provides a list

of most of the colors used with the predefined “Corporate” styles. Some IBM Cognos components

may periodically use a color that is not listed in the figure below.


Business Analytics

Understanding Hexadecimal Colors

The best way to pick your colors is to go into your web site, snapshot the screen and take it into Paint

Shop Pro (PSP). Then use the paint dropper tool to find out the colors HEX values by clicking on the

color and double-clicking on the color on the right panel.

Mapping Colors to Sections of the User Interface

The diagrams below provide examples of the color scheme used with the default “corporate” style. It

can be used as a guide to determine how to match your color scheme with the predefined one.

#999999

#F3F3F3

#336699 #CC9966

#0000CC

#FFFFFF

#E3E9F3

#CCCCCC

#E7E7E7

#99AACC

#666699

#000000

#BEC8DC

#CCCCE3

#DEAC77

#123679


Business Analytics

IBM Cognos Connection

#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


Business Analytics

Query Studio

#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


Business Analytics

Analysis Studio

#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


Business Analytics

3. Customizing the IBM Cognos 8 UI

IBM Cognos 8 provides CSS files that control the colors for all IBM Cognos 8 UIs. You can customize

the UI by modifying parameters within the appropriate CSS files.

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

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.


Business Analytics

Files Used with IBM Cognos 8 Styles

All of the files required to modify styles across all IBM Cognos components can be found our newly

created “my_style” folder; <install location>/c8/webcontent/skins/my_style.

IBM Cognos Component

Directory Files Images

IBM Cognos Connection

/skins/my_style/port

al

default.css /skins/my_style/portal/images

/skins/my_style/branding

Welcome Page /skins/my_style/port

al

default.css /skins/my_style/portal/images

/skins/my_style/branding

Report Studio /skins/my_style/pat skin.css /skins/my_style/pat/images

background.css

explore.css Analysis Studio /skins/my_style/ans

scrollbarstyle.css

/skins/my_style/ans/images

crn.css

Query Studio /skins/my_style/qs QSRVCommonUI.c

ss

/skins/my_style/qs/images

ags.css Event Studio /skins/my_style/ags

crn.css /skins/my_style/ags/images

default.css /skins/my_style/cmm/images Metrics Manager

/skins/my_style/cm

m admin_styles.css /skins/my_style/cmm/presentatio

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

Changing Text, Font Types, and Images

Changing Component Names and Text Messages – You can change the names of IBM Cognos 8

components and modify the accompanying text messages by opening the relevant message file in a

text editor and performing a search-and-replace on the text strings and calls you want to change. The

message files are located in the c8_location/msgsdk directory. For changes to take effect, you must

restart the IBM Cognos 8 service.


Business Analytics

Changing IBM Cognos 8 Fonts – You can change the fonts used in IBM Cognos 8 by modifying the

font-family list in the file <install-location>/c8/webcontent/skins/my_style/fonts.css. Modify the

fonts.css file associated with the style you want. For example, we can change the default font used

on all HTML interfaces, except Report Studio, to one more suited to rendering special Asian

characters. Open the file fonts.css in a text editor, comment out the section that shows Tahoma as

the first item in the font-family list, and then remove the comment from an entry that better meets your

Unicode requirements.

Changing IBM Cognos Images – All images are located with the style directory. The table above

shows the location of all of the images by component. You can easily change the image location by

placing your own custom image in this directory and using the same file name.

4. Example 1 – Quickly Re-branding IBM Cognos 8

You can quickly re-brand IBM Cognos 8 by matching the default colors to your desired colors and

then replacing all of the instances of these colors in the appropriate CSS files. For example, suppose

that you have the following web site.

You may wish to re-brand IBM Cognos to match this same color scheme. To do this, you can first

map the default colors in the “corporate” style to that our desired colors.

The following HTML page predominantly uses the following three colors:

Using this color scheme, you will replace the default colors with the following colors, with a few

exceptions. Note: when picking out a color scheme, try to keep the same color accents, i.e.

match dark colors with dark colors and light colors with light colors.

#C8DDCA #8BB093 #2D5C3D


Business Analytics

4.1 Re-branding IBM 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 IBM Cognos Connection header:

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

#C8DDCA

#8BB093

#2D5C3D

#999999

#F3F3F3

#336699

#CC9966

#0000CC

#E3E9F3

#CCCCCC #E7E7E7

#99AACC

#666699

#BEC8DC

#CCCCE3

#DEAC77

#123679


Business Analytics

.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 IBM Cognos Connection text with a corporate logo 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>

1. 2. 3.


Business Analytics

<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 IBM Cognos 8 service for these changes to take effect.

End Result

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


Business Analytics

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

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


Business Analytics

4.4 Re-branding Report Studio

Files used: <install location>/c8/webcontent/skins/my_style/pat/skin.css <install location>/c8/webcontent/skins/my_style/ans/explore.css <install location>/c8/webcontent/skins/my_style/ans/scrollbarstyle.css

Find and Replace In all three CSS files above, perform a find and replace on the colors in the figure that we

matched above. Save and close this file.

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

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;


Business Analytics

}

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

4.5 Re-branding Metrics Manager

Files used:


Business Analytics

<install location>/c8/webcontent/skins/my_style/cmm/default.css <install location>/c8/webcontent/skins/my_style/cmm/admin_styles.css

Find and Replace Metrics Manager provides some slightly different accent colors. In all two CSS files above,

perform a find and replace on the colors in the figure that we matched above, but with the

following exceptions:

#999999 #8bb093

#99AACC #8bb093

#CCCCCC #c8ddca

Other Configuration Changes In the default.css file, modify the following parameters individually:

Modify the Main Header .mainHeader1 { BORDER-TOP: #c8ddca 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #c8ddca 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #2d5c3d 1px solid; HEIGHT: 25px; BACKGROUND-COLOR: #2d5c3d; } .headerTitle { PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 80%; COLOR: #ffffff; BACKGROUND-COLOR: #2d5c3d; } .headerTitleMiddle { BACKGROUND-COLOR: #2d5c3d; background-image: url(Images/title_bar_grapic.gif); background-repeat: repeat-y; background-position: left top; background-attachment: fixed; } .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;


Business Analytics

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

Modifies the “GO Metrics” heading


Business Analytics

.dialogHeader { BORDER-RIGHT: #c8ddca 1px solid; BORDER-TOP: #c8ddca 1px solid; BORDER-LEFT: #c8ddca 1px solid; BORDER-BOTTOM: #c8ddca 1px solid; HEIGHT: 24px; BACKGROUND-COLOR: #2d5c3d; }

End Result

4.6 Re-branding Event Studio

Files used: <install location>/c8/webcontent/skins/my_style/ags/crn.css <install location>/c8/webcontent/skins/my_style/ags/ags.css

Find and Replace In all two CSS files above, perform a find and replace on the colors in the figure that we matched

above. Save and close this file.

Other Configuration Changes In the crn.css file, modify the following parameters individually:


Business Analytics

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


Business Analytics

Using the same technique as the first approach and starting with the corporate style, you will modify

all IBM Cognos components one piece at a time. In this example, the main colors that you will use

will be:

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

#F8F8DC #FFCE6D #E72B41 #333399


Business Analytics

background-color: #e72b41; background-image: url(images/title_bar_grapic.gif); background-repeat: repeat-y; background-position: left top; } Color of the text that displays “IBM 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 “IBM Cognos Connection” text by making the

appropriate changes to the system.xml file. These steps are described in detail above in Example

1. The IBM Cognos 8 service needs to be restarted for all system.xml change to take effect.

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


Business Analytics

{ font-size: 70%; color: #333399; } .ccToolsLabel { font-size: 70%; color: #333399; }

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 {


Business Analytics

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


Business Analytics

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:

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


Business Analytics

.toolbarImageUnavailable { padding: 2px; border: #f8f8dc 1px solid; background-color: #ffffff; } .toolbarFlyoutNormal { padding-left: 2px; padding-top: 2px; padding-bottom: 2px; padding-right: 4px; border: #f8f8dc 1px solid; cursor: hand; background-color: #ffffff; } .toolbarFlyoutOver { padding-left: 2px; padding-top: 2px; padding-bottom: 2px; padding-right: 4px; border: #ffce6d 1px solid; cursor: hand; background-color: #f8f8dc; } .toolbarDivider { width: 1px; background-color: #f8f8dc; } .toolbarImageDefaultCursor { cursor: default; }

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

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


Business Analytics

} 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; } Controls the Background of the Table’s Header

.tableHeader { background-color: #f8f8dc; } .tableHeaderDivider { background-color: #ffce6d; } Determines the color of the font used for the table’s header

.tableTitle { font-weight: bold; font-size: 70%; color: #333399; } .tableSortTitle { font-weight: bold; color: #333399; text-decoration: none; } .tableText { font-size: 70%; color: #333399; } .tableItemCount { font-size: 70%; color: #333399; }


Business Analytics

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


Business Analytics

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


Business Analytics

border: #ffce6d 1px solid; background-color: #ffffff; } .dialogDivider /* horizontal dividers e.g. actions dialog */ { background-color: #f8f8dc; }

Search path .dialogSearchPathDisplayPanel { height: 45px; overflow: auto; word-wrap: break-word; border: #ffce6d 1px solid; padding:5px; margin-right:5px; } Pop Up Windows /* Modal dialogs */ .body_dialog_modal { background-color: #f8f8dc; } .dialogButtonBarPopup /* pop up dialog button bar- view search path */ { height: 40px; background: #f8f8dc; border-right: #ffce6d 1px solid; border-top: #ffce6d 1px solid; border-left: #ffce6d 1px solid; border-bottom: #ffce6d 1px solid; } .dialogWindowPopup /* pop up dialog - view search path */ { border-right: #ffce6d 1px solid; border-top: #ffce6d 1px solid; border-left: #ffce6d 1px solid; border-bottom: #ffce6d 1px solid; z-index: 50; padding-top: 10px; background-color: #f8f8dc; }


Business Analytics

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 IBM 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 */

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


Business Analytics

} .mainHeader2 { }

Task 2 – Modifying the Toolbar To modify the toolbar, perform the highlighted changes in the QSRVCommonUI.css files:

Crn.css

Modifies the background color for the toolbar.

.mainHeader3 { background-color: #ffffff; }

QSRVCommonUI

Controls the actual toolbar buttons and the borders surrounding them.

.toolbarButton { padding: 1px 0px 0px 0px; height:22px; border: 1px solid #f8f8dc; background-color: #ffffff; } Modifies the colors when you hover over a toolbar item.

.toolbarButtonOver { padding: 1px 0px 0px 0px; height:22px; border: 1px solid #ffcd6d; background-color: #f8f8dc; cursor: pointer; cursor: hand; } Controls the colors when you click on an item from the toolbar

.toolbarButtonPressed { padding: 1px 0px 0px 0px; height:22px; border : 1px solid #ffcd6d; background-color: #f8f8dc; cursor: pointer; cursor: hand; } Controls the colors when you hover over a toolbar item

.toolbarButtonOverPressed { padding: 1px 0px 0px 0px; height:22px; border : 1px solid #ffcd6d; background-color: #f8f8dc; cursor: pointer; cursor: hand; }


Business Analytics

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; cursor: default; padding: 3px 10px;


Business Analytics

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;


Business Analytics

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 –


Business Analytics

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;


Business Analytics

} .menu_hover { background-color: #ffce6d; border: 1px solid #ffce6d; color:#000000; padding: 2px; padding-left: 5px; padding-right: 5px; } .menu_pressed { padding: 2px; padding-left: 5px; padding-right: 5px; background-color: #ffce6d; border: 1px solid #ffce6d; color:#000000; }

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;


Business Analytics

padding: 1px; cursor: pointer; cursor: hand; } .toolbar_button_hover, .toolbar_dropdown_button_hover, .toolbar_arrow_hover { border : 1px solid #e72b41; background-color: #ffce6d; } .toolbar_button_pressed, .toolbar_arrow_pressed, .toolbar_dropdown_button_pressed { border : 1px solid #e72b41; background-color: #ffce6d; }

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;


Business Analytics

}

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


Business Analytics

border-bottom : 1px solid #ffce6d; } .tab_right_border { border-right: 1px solid #ffce6d; } .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; }


Business Analytics

.contextMenu_item_default_over { cursor: pointer; cursor: hand; font-weight : bold; background-color: #f8f8dc; border: 1px solid #ffce6d; }

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:


Business Analytics

DIV.clsMenubar, TD.clsMenubarItem { background-color: #e72b41; } TD.clsMenubarItem { color: white; border-top: 1px solid #e72b41; border-left: 1px solid #e72b41; border-right: 1px solid #e72b41; border-bottom: 1px solid #e72b41; } TD.clsMenubarItemLast { background-image: url(images/title_bar_graphic_rs.gif) ; background-repeat: no-repeat; background-position: right;

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,


Business Analytics

#idResizeBarToolboxRight, .clsBigButtonBar, BUTTON.clsBigCoolButton, TD.clsToolbarButton, .clsQueryViewListViewHeader, .clsQueryTabBackground { background-color: #f8f8cd; } BUTTON.clsCoolButton_hover, TD.clsMenubarItem_up, TD.clsToolbarButton_up, BUTTON.clsCoolButton_pressed, TD.clsMenubarItem_down, TD.clsToolbarButton_down, TD.clsToolbarButton_stuck, TD.clsMenuItem_selected, DIV.clsPaneHeader_inactive, .clsListItem_hover, .clsListItem_tb_selected, .clsTreeNode_hover, TD.clsPropertySheetLabel_active, .clsModalDlgHeader_inactive, BUTTON.clsXButton_inactive, TD.clsTabBox_active_hover, TD.clsBottomTabBox_active_hover, BUTTON.clsBigCoolButton_hover, TD.clsMenubarItem_up, TD.clsToolbarButton_up, BUTTON.clsBigCoolButton_pressed, TD.clsMenubarItem_down, TD.clsToolbarButton_down { background-color: #e72b41; }

All background items are now beige (#f8f8cd). Menu items, highlighted toolbars, and menu panes

are in dark beige (#ffce6d).

Since many of these UI elements are grouped together, many parameter changes span across

the entire UI. In the screenshot above, suppose that we wanted the un-highlighted windows in

the left-hand pane to appear in green (#d6f0b1) and the selected items in the menu pane to

appear in red (#e72b41). In this case, we remove these specific classes from the grouped list.

More specifically, we’re going to remove the following sections and then place them in their own

section:


Business Analytics

BUTTON.clsCoolButton_hover, TD.clsMenubarItem_up, TD.clsToolbarButton_up, BUTTON.clsCoolButton_pressed, TD.clsMenubarItem_down, TD.clsToolbarButton_down, TD.clsToolbarButton_stuck, TD.clsMenuItem_selected, /*DIV.clsPaneHeader_inactive,*/ DIV.clsListItem_hover, .clsListItem_tb_selected, .clsTreeNode_hover, TD.clsPropertySheetLabel_active, /*.clsModalDlgHeader_inactive,*/ BUTTON.clsXButton_inactive, TD.clsTabBox_active_hover, TD.clsBottomTabBox_active_hover, BUTTON.clsBigCoolButton_hover, TD.clsMenubarItem_up, TD.clsToolbarButton_up, BUTTON.clsBigCoolButton_pressed, TD.clsMenubarItem_down, TD.clsToolbarButton_down { background-color: #ffce6d; } DIV.clsPaneHeader_inactive, TD.clsModalDlgHeader_inactive { background-color: #d6f0b1; } DIV.clsPaneHeader_active, .clsModalDlgHeader_active, .clsToolDlgHeader_active, #idProgressBar { background-color: #e72b41; }

Note: this will also change the color of the progress bar when you load Report Studio. If you want

to change this, you can place the #idProgressBar class into its own section and assign your own

background color to it.

Since we changed the inactive left-hand menu header to light green, the white text will be difficult

to view. So, in this case, we’ll change it to black. DIV.clsPaneHeader_inactive, .clsModalDlgHeader_inactive { color: black; }

Again, since a lot of classes are grouped together, certain UI elements may not look exactly as

they should. For example, in the screenshot below, we may want to apply a “white” background

inside the frame.


Business Analytics

To do this, once again, we will need to place the associated classes in their own sections, as

shown below: BODY, BUTTON, DIV.clsMenubar, DIV.clsToolbar, TD.clsMenubarItem, TD.clsToolbarButton, TABLE.clsMenuPopup, .clsPopupDialog, TD.clsMenuItem, /*#idToolboxPane,*/ #idPropertiesPane, /*.clsPane_Toolbox_active, .clsPane_Toolbox_inactive,*/ .clsPane_Properties_inactive, .clsPane_Workarea_inactive, TABLE.clsModalDlg, BUTTON.clsDlgButton, BUTTON.clsXButton_active, BUTTON.clsXButton_inactive, #idExplorerBar, TD.clsExplorerButton, #idResizeBarToolboxBottom, #idResizeBarToolboxRight, .clsBigButtonBar, BUTTON.clsBigCoolButton, TD.clsToolbarButton, .clsQueryViewListViewHeader, .clsQueryTabBackground { background-color: #f8f8cd; } #idToolboxPane, .clsPane_Toolbox_active, .clsPane_Toolbox_inactive { background-color: #ffffff; }

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 –


Business Analytics

6. Example 3 – Using Background Images

Background

In the CSS files, instead of just specifying regular hexadecimal colors, you can use background

images. In fact, most common web sites heavily use background images to provide a nice fade affect

with their colors. This can be done with IBM Cognos 8 as well.


Business Analytics

Creating Background Images

The easiest way to create these background images would be to use PowerPoint. To do this:

1. Open PowerPoint

2. Using the drawing tools, drag a “rectangle” object onto the slide.

3. Double-click on the new object.

4. For the “Color:” picker, select “Fill Effects”.


Business Analytics

5. Choose a two-color gradient using.

6. In PowerPoint, resize the object so that it’s roughly the same size as where you want to place it.

For example, if you want to use this as a header, resize it “vertically” so that it’s roughly the right

size.

7. Copy and paste this object into Paint.

8. Go to Image > Attributes to verify the size of the image. As a guide, the IBM Cognos Connection

headers are roughly 25 pixels in height.

9. Go to Images > Stretch and Skew to adjust the image so that it fits vertically.

10. Save this image into either the branding or portal/images folder.

11. Repeat these steps for all of the images that you want to create.


Business Analytics

Adding Background Images to a Style

In this example, we’ll just look at how to quickly change the headers in IBM Cognos Connection, but

this same principle can be used for the other studios.

The “background-image” and “background-repeat” parameters can be used for any style attribute,

regardless of whether or not this parameter is already present by default. Additionally, the

background-image parameter will take precedence over the background-color parameter. This

means that it is not already present in an attribute, it can be added. For example, in the screenshot

above, the following parameters were changes:

.mainHeader1 { border-right: #fffff 1px solid; border-left: #fffff 1px solid; border-bottom: #afbac7 0px solid; height: 25px; background-image: url(images/header3.bmp); background-color: #336699; background-repeat: repeat; background-position: left bottom; }

.mainHeader2 { border: #e3e9f3 0px solid; padding: 0px; height: 25px; background-image: url(images/header4.bmp); background-repeat: repeat; }

.mainHeader3 { padding-top: 5px; background-image: url(images/header5.bmp); background-repeat: repeat; border: #e3e9f3 0px solid; }

.tabNormal { padding-right: 20px; padding-left: 20px; font-size: 70%; color: #ff0000; text-align: center; background-image: url(images/portaltab.bmp); background-repeat: repeat; border-top: #afbac7 1px solid; border-left: #afbac7 1px solid; border-bottom: #afbac7 1px solid;


Business Analytics

} .tabNormalAfterSelected { padding-right: 20px; padding-left: 20px; font-size: 70%; color: #ff0000; text-align: center; background-image: url(images/portaltab.bmp); background-repeat: repeat; border-top: #afbac7 1px solid; border-bottom: #afbac7 1px solid; }

.boxHeaderBackground { background-color: #99aacc; background-image: url(images/header4.bmp); background-repeat: repeat; }

After these background images have been added, other style changes shown in Example 1 and 2 can

be used to brand IBM Cognos 8.

7. Conclusion IBM Cognos 8 provides administrators with the ability to drastically modify the look of IBM Cognos 8 and all of its components. IBM Cognos provides CSS files that govern the look and the color scheme of IBM Cognos. By modifying these CSS files, admins can “skin” Cognos 8 to match their corporate branding. This document provides a few tips and techniques on how users can better understand how to modify the default IBM Cognos UIs.


Business Analytics

8. Appendix – List of Parameters

1.1 Appendix A – IBM Cognos Connection – Default.css Top Header CSS Class Background Border Text Description

.mainHeader1 #336699 #e7e7e7, #cc9966 Background color of the main header

.crnOptions #ffffff Text colors for hyperlinked studio links

.headerTitleMiddle #336699 Color and images used in the middle of the main header

.logoImageContainer #ffffff Background color for the IBM Cognos Connection image (icon_portal.gif)

Header 2 and Header 3 CSS Class Background Border Text Description

.mainHeader2 #f3f3f3 #f3f3f3 Background and border colors used for Header 2.

.mainHeader3 #f3f3f3 Background color used for Header 3.

.ccOptions #0000cc Hyperlinked colors for “Preferences” and “Help”.

.authOption #0000cc Hyperlink colors for Logon / Logoff.

.ccToolsLabel #0000cc Hyperlink color for “Tools”

.ccOptionsDivider #999999 Color of the vertical line separating “Home” and “Preferences”.

.userName #000000 Text color used to display the user logged in.

Portal Tabs CSS Class Background Border Text Description .tabBorder #999999

.tabLabel #336699

.tabLink #336699

.tabScrollButton #ffffff #999999 Background and border colors used for the “scrolling” button to the right of the portal tabs.

.tabScrollButtonOver #ffffff #999999 Background and border colors used when you hover over the “scrolling” buttons.

.tabScrollButtonDisabled #ffffff #cccccc Background and border colors used

when the “scrolling” button is disabled.

.tabAnchor #0000cc

.tabNormal #ffffff #e7e7e7, #999999 #ff0000 Color used for non-selected portal

tabs.

.tabSelected #ffffff #999999 #336699 Colors used for the selected portal tab.

.tabNormalAfterSelected #ffffff #e7e7e7,

#999999 #ff0000 Colors used for the portal tab to the right of the one selected.


Business Analytics

.tabCap #e7e7e7, #999999

.tabBase #999999

.tabTail #999999

Borders at the end of the portal tabs

Public Folders / My Folders Hyperlinks CSS Class Background Border Text Description a #0000cc Color of most hyperlinked objects. Path CSS Class Background Border Text Description

.pathLeafNode #336699 Color used to display the current folder you are in.

.pathSeparator #0000cc Color used to display the folder separator “>”.

.pathLink #0000cc Color used to display the hyperlinked breadcrumb path.

Toolbar CSS Class Background Border Text Description .toolbarImageNormal #ffffff #cccccc Colors for toolbar items.

.toolbarImageOver #ffffff #e3e9f3 Colors when you hover over a toolbar item.

.toolbarImagePressed #e3e9f3 #666699

.toolbarImageOverPressed #c6c6d7 #666699 Colors when you click on a toolbar item.

.toolbarImageUnavailable #ffffff Colors when a toolbar image is not found.

.toolbarFlyoutNormal #ffffff #cccccc Background and border colors used when the “scrolling” button is disabled.

.toolbarFlyoutOver #ffffff #666699

.toolbarDivider #cccccc Table – List View CSS Class Background Border Text Description

.cctable #ffffff #000000, #999999 Outer borders surrounding the table

.tableHeader #e7e7e7 Background color for the table header.

.tableHeaderDivider #999999 Vertical line separating the columns in the table header.

.tableTitle #336699 Text for column names in the table header.

.tableSortTitle #336699 Text for “Sort” in table header.

.tableText #000000 Text used for the table (except hyperlinks).

Table – Detail View CSS Class Background Border Text Description .objectName #000000 Text colors used to display descriptions


Business Analytics

.objectOptions #000000 and dates.

My Pages CSS Class Background Border Text Description

.boxborder #e7e7e7 Outer border surrounding the portlets.

.boxButtonNormal #ffffff #ffffff The “edit”, “minimize”, and “maximize” buttons on the portlets.

.boxButtonOver #ffffff #ffffff The “edit”, “minimize”, and “maximize” buttons on the portlets – when hovered over.

.boxHeaderBackground #99aacc Background color of the portlet header.

.boxBody table #000000 Text color used within the portlet.

.boxHeader #ffffff Text color used within the portlet header.

.pageEditorPortletColumn #ffffff #cccccc #666699 Colors 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. Command Buttons, like OK and Cancel at the bottom of dialogs. CSS Class Background Border Text Description

.commandButton #ffffff #999999 Background and border colors used for command buttons.

.commandButtonOver #e3e9f3 #999999 Colors used when hovering over a command button.

.commandButtonDown #e3e9f3 #999999 Colors used when you click on a command button.

.commandButtonInactive #ffffff #999999 #999999 Colors used when a command button is inactive.

.commandButtonActive #000000 Text color used when a command button is active.

.simpleCmdButtonActive #ffffff #cccccc #000000 Special command button that only used in a few pop-ups.

General Dialog CSS Class Background Border Text Description .dialogHeader #99aacc #336699 Colors used around the dialog headers.

.dialogHeaderText #336699 Colors used in the introductory dialog text.

.dialogHintText #336699 Colors used for generic hints.

.dialogHeaderTitle #ffffff Text color used for the dialog headers.

.dialogClose #bec8dc Border surrounding the “X” button.

.dialogCloseOver #ffffff Border surrounding the “X” button when hovered over.


Business Analytics

.dialogDivider #cccccc Background color for the horizontal divider used in dialogs, like the “action” button.

.dialogButtonBar #e7e7e7 #cccccc Colors used in the bar that displays the “OK” and “Cancel” buttons.

.dialogSearchPathDisplayPanel #336699 Borders 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 Attachments CSS Class Background Border Text Description .emailItem #ffffff #ffffff

.emailItem_active #e3e9f3 #191970

.emailItem_hover #e3e9f3 #191970

.emailBodyTableRow #99aacc

.emailLinksAttachmentTableRow #99aacc

1.2 Appendix B – Query Studio – QSRVCommonUI.css Header Most header items are inherited from the IBM Cognos Connection style.

CSS Class Background Border Text Description .topbar_hyperlink_text #ffffff Text color of the hyperlinks on the top header. Toolbar CSS Class Background Border Text Description .toolbarButton #ffffff #cccccc Colors used for the toolbar button.

.toolbarButtonOver #e3e9f3 #336699 Colors used when you hover over a toolbar button.

.toolbarButtonPressed #e3e9f3 #cccccc Colors used when you click on a toolbar button.

.toolbarButtonOverPressed #bec8dc #336699 Colors used when you click on a toolbar button.

.toolbarBody #ffffff #000000 Colors 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.


Business Analytics

Menu Bar CSS 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 #0000cc Text color used for the non-selected hyperlinked menu items.

.menuItemSelected #336699 #336699 Colors used for the selected menu items.

.metadataLoading #000000 Text color used when loading metadata objects in the insertable objects pane.

.menuContent #336699 #336699 Text and borders used for menu content after you select a menu item.

.menuContentCollapsed #336699 #336699 Text and border colors used when the menu has been collapsed.

.menuButton #336699 Border used around the menu button, when collapsed.

QSReport.css Blank Report Style CSS 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.

1.3 Appendix C – Analysis Studio - background.css Headers CSS 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 #123679 Colors 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.


Business Analytics

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 White #336699 Colors for the entire menu

section.

.contextMenu_item

.contextMenu_item_with_submenu #ffffff #0000cc

.contextMenu_item_over

.contextMenu_item_with_submenu_over

.contextMenu_item_default_over

.contextMenu_item_default

#e3e9f3 #99aacc #0000cc

.contextMenu_item_disabled

.contextMenu_item_disabled_over #ffffff Graytext

Colors for selected menu items.

Toolbars CSS Class Background Border Text Description .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

#f3f3f3 #cccccc Colors used in the main toolbar.

.toolbar_button_on #cccce3 #cccccc Colors used for toolbar items.

.toolbar_button_on_hover #bec8dc #336699 Colors used when you hover over a toolbar item.

.toolbar_arrow

.toolbar_arrow_hover

.toolbar_arrow_pressed

#f3f3f3 #cccccc Colors used for dropdown toolbar items.

Insertable Objects CSS Class Background Border Text Description .tab_td_selected

.top_tab_td_selected #ffffff #cccccc #336699 Colors for the selected tabs below

“insertable objects”.

.tab_td_none_selected

.top_tab_td_none_selected

.top_tab_dummy_td_none_selected

.tap_dummy_td_none_selected

#cccccc #0000cc Colors used for the non-selected tabs in “insertable objects”

.tab_right_border

.tab_left_border #cccccc Border colors surrounding

“insertable objects”

Toggle bar, Dimensional Viewer Title Bar, and Property Pane Title Bar


Business Analytics

CSS Class Background Border Text Description .ToogleBar #99aacc #336699 #ffffff Colors used the header of the toogle bar.

.DlgTitleBar

.ToogleBarArrow #99aacc

.DlgCloseIcon

.InfoContainer #e7e7e7 #99aacc Colors used in the “Information” window.

.ins_obj_title_bar #99aacc #336699 #ffffff Colors used for the “Insertable Objects” title bar.

Date post:	27-Nov-2014
Category:	Documents
Upload:	srihari-jilakara
View:	720 times
Download:	0 times

Customizing the Cognos 8 Ui

Documents