Sie sind auf Seite 1von 58
Proven Practice Customizing the IBM Cognos 8 UI Product(s): Cognos 8.1 and 8.2 Area of

Proven Practice

Customizing the IBM Cognos 8 UI

Product(s): Cognos 8.1 and 8.2 Area of Interest: Infrastructure

Business Analytics

Business Analytics

Customizing the IBM Cognos 8 UI

2

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 cscogpp@ca.ibm.com.

Business Analytics

and Technolo gy team. You can send comments, suggestions, and additions to cscogpp@ca.ibm.com . Business Analytics

Customizing the IBM Cognos 8 UI

3

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

– QSRVC OMMON UI. CSS 55 1.3 A PPENDIX C – A NALYSIS S TUDIO -

Customizing the IBM Cognos 8 UI

4

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.

on how to customize the existing report styles. 1.2 Applicability This document only applies to IBM
on how to customize the existing report styles. 1.2 Applicability This document only applies to IBM
on how to customize the existing report styles. 1.2 Applicability This document only applies to IBM

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

Some IBM Cognos components may periodically use a color that is not listed in the figure

Customizing the IBM Cognos 8 UI

5

#0000CC

#CCCCE3

#000000

#F3F3F3

#123679

#99AACC

#999999

#FFFFFF

#336699

#BEC8DC

#CCCCCC

#CC9966

#666699

#E3E9F3

#E7E7E7

#DEAC77

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.

Business Analytics

style. It can be used as a guide to determine how to matc h your color

Customizing the IBM Cognos 8 UI

6

IBM Cognos Connection

Background

Colors

Borders

Text

Screenshot

#336699 #E7E7E7 #FFFFFF #FFFFFF #F3F3F3 #0000CC Headers #F3F3F3 #999999 #000000 #999999 #FFFFFF #CC9900
#336699
#E7E7E7
#FFFFFF
#FFFFFF
#F3F3F3
#0000CC
Headers
#F3F3F3
#999999
#000000
#999999
#FFFFFF
#CC9900
#336699
Toolbar
#E3E9F3
#E3E9F3
#CCCCCC
#CCCCCC
#666699
#FFFFFF
#000000
#0000CC
List View
#E7E7E7
#999999
#336699
#999999
#000000
#FFFFFF
#E7E7E7
#FFFFFF
My Pages
#99AACC
#FFFFFF
#000000
#CCCCCC
#666699
#FFFFFF
#CCCCCC
#999999
#BEC8DC
#999999
#000000
Dialogs
#E3E9F3
#336699
#336699
#E7E7E7
#BEC8DC
#FFFFFF
#FFFFFF
#EEECF3

Business Analytics

#999999 #000000 Dialogs #E3E9F3 #336699 #336699 #E7E7E7 #BEC8DC #FFFFFF #FFFFFF #EEECF3 Business Analytics

Customizing the IBM Cognos 8 UI

7

Query Studio

Background

Colors

Borders

Text

Screenshot

Headers

#FFFFFF
#FFFFFF
Headers #FFFFFF

Toolbar

#FFFFFF #CCCCCC #000000 #E3E9F3 #336699 #336699 #BEC8DC #999999
#FFFFFF
#CCCCCC
#000000
#E3E9F3
#336699
#336699
#BEC8DC
#999999
Toolbar #FFFFFF #CCCCCC #000000 #E3E9F3 #336699 #336699 #BEC8DC #999999

Menu

#FFFFFF #000000 #336699 #E7E7E7 #336699 #E3E9F3 #0000CC
#FFFFFF
#000000
#336699
#E7E7E7
#336699
#E3E9F3
#0000CC
Menu #FFFFFF #000000 #336699 #E7E7E7 #336699 #E3E9F3 #0000CC

Bar

Blank

#E3E9F3 #000000 #99AACC #BEC8DC #336699 #000000
#E3E9F3
#000000
#99AACC
#BEC8DC
#336699
#000000
Blank #E3E9F3 #000000 #99AACC #BEC8DC #336699 #000000

Report

Style

Business Analytics

Bar Blank #E3E9F3 #000000 #99AACC #BEC8DC #336699 #000000 Report Style Business Analytics

Customizing the IBM Cognos 8 UI

8

Analysis Studio

Background

Colors

Borders

Text

Screenshot

Headers

#FFFFFF #E7E7E7 #FFFFFF #E3E9F3 #DEAC77 #123679 #E3E9F3
#FFFFFF
#E7E7E7
#FFFFFF
#E3E9F3
#DEAC77
#123679
#E3E9F3
Headers #FFFFFF #E7E7E7 #FFFFFF #E3E9F3 #DEAC77 #123679 #E3E9F3

Menu

white #336699 #0000CC #E3E9F3 graytext
white
#336699
#0000CC
#E3E9F3
graytext
Menu white #336699 #0000CC #E3E9F3 graytext

Style

Toolbar

#F3F3F3 #CCCCCC #CCCCE3 #336699 #BEC8DC
#F3F3F3
#CCCCCC
#CCCCE3
#336699
#BEC8DC
Toolbar #F3F3F3 #CCCCCC #CCCCE3 #336699 #BEC8DC

Insertable

#FFFFFF #CCCCCC #0000CC #336699
#FFFFFF
#CCCCCC
#0000CC
#336699
Insertable #FFFFFF #CCCCCC #0000CC #336699

Objects

Object

#99AACC #336699 #FFFFFF #E7E7E7 #99AACC
#99AACC
#336699
#FFFFFF
#E7E7E7
#99AACC
Object #99AACC #336699 #FFFFFF #E7E7E7 #99AACC

Headers

Business Analytics

#0000CC #336699 Objects Object #99AACC #336699 #FFFFFF #E7E7E7 #99AACC Headers Business Analytics

Customizing the IBM Cognos 8 UI

9

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

of your existing styles. Click on “ New Styles ” icon 5. This will now open

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.

style. The location for this preview page is shown below. 7. Once the style has been

7. Once the style has been imported, you can view the style in the drop-down list in the preferences.

7. Once the style has been imported, you can view t he style in the drop-down

Business Analytics

7. Once the style has been imported, you can view t he style in the drop-down

Customizing the IBM Cognos 8 UI

10

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

Directory

Files

Images

Component

IBM Cognos

/skins/my_style/port

default.css

/skins/my_style/portal/images

Connection

al

/skins/my_style/branding

Welcome Page

/skins/my_style/port

default.css

/skins/my_style/portal/images

al

/skins/my_style/branding

Report Studio

/skins/my_style/pat

skin.css

/skins/my_style/pat/images

   

background.css

 

Analysis Studio

/skins/my_style/ans

explore.css

/skins/my_style/ans/images

scrollbarstyle.css

   

crn.css

 

Query Studio

/skins/my_style/qs

QSRVCommonUI.c

/skins/my_style/qs/images

ss

Event Studio

 

ags.css

 

/skins/my_style/ags

crn.css

/skins/my_style/ags/images

Metrics

 

default.css

/skins/my_style/cmm/images

/skins/my_style/cm

   

Manager

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

c8_location/msgsdk directory. For changes to take effect, you must restart the IBM Cognos 8 service. Business

Customizing the IBM Cognos 8 UI

11

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.

For example, suppose that you have the following web site. You may wish to re-brand IBM

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:

#2D5C3D

 

#C8DDCA

 

#8BB093

 

Using this color scheme, you will replace the default colors with the following colors, with a few exceptions. Note: when picking out a color scheme, try to keep the same color accents, i.e. match dark colors with dark colors and light colors with light colors.

Business Analytics

the same color accents, i.e. match dark colors with dark colors and light colors with light

Customizing the IBM Cognos 8 UI

12

#0000CC #123679 #336699 #666699 #99AACC #999999 #CCCCCC #CC9966 #DEAC77
#0000CC
#123679
#336699
#666699
#99AACC
#999999
#CCCCCC
#CC9966
#DEAC77

#2D5C3D

#CCCCE3 #BEC8DC #E3E9F3
#CCCCE3
#BEC8DC
#E3E9F3
#E7E7E7 #F3F3F3
#E7E7E7
#F3F3F3

#8BB093

#C8DDCA

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:

1.
1.
2.
2.
3.
3.
1. 2. 3. .headerTitle

.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

Business Analytics

} .crnOptions { font-size: 70%; color: #c8ddca ; } 2. Modify the Portal Tabs Business Analytics

Customizing the IBM Cognos 8 UI

13

1. 2. 3.
1.
2.
3.

.tabNormal

{

padding-right: 20px; padding-left: 20px; font-size: 70%; color: #ff0000; text-align: center; background-color: #c8ddca; border-left: #c8ddca 1px solid; border-bottom: #2d5d3d 1px solid; border-top: #c8ddca 1px solid;

}

.tabSelected

{

padding-right: 20px; padding-left: 20px; font-weight: bold; font-size: 70%; color: #ffffff; border-right: #2d5d3d 1px solid; border-left: #2d5d3d 1px solid; border-top: #2d5d3d 1px solid; text-align: center; background-color: #8bb093;

}

.tabNormalAfterSelected

{

padding-right: 20px; padding-left: 20px; font-size: 70%; color: #ff0000; text-align: center; background-color: #c8ddca; border-bottom: #2d5d3d 1px solid; border-top: #c8ddca 1px solid;

}

3. Replacing the 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 “<!-- Custom OEM headers -->”.

4. You will notice that this section is commented out. Un-comment out this section and add the following section for your new style:

<!-- Custom OEM headers --> <param name="OEM">

<!--

Specify custom Cognos Connection / Cognos Viewer left side header here in the form of XHTML snippets. Custom headers can be style-specific. Example:

-->

<customHeader showContext="false" contextDelimiter=""> <style styleFolderName="my_style"> <table style="background-color:#2d5d3d"> <tr>

Business Analytics

<table style="background-color:#2d5d3d"> <tr> Business Analytics

Customizing the IBM Cognos 8 UI

14

<td><img src=" /skins/my_style/branding/bank_logo.gif"/></td> </tr>

</table>

</style> <style styleFolderName="corporate"> <table style="background-color:#ffffff"> <tr>

space:nowrap"> My company </td>

</tr>

</table>

<td><img src=" /skins/corporate/branding/my_logo.gif"/></td> <td class="headerTitle" style="padding-right:2px;white-

</style> <style styleFolderName="classic"> <table style="background-color:#cccccc"> <tr>

space:nowrap"> My company </td>

</style>

</customHeader>

</param>

</tr>

</table>

<td><img src=" /skins/classic/branding/my_logo.gif"/></td> <td class="headerTitle" style="padding-right:2px;white-

5. Restart the IBM Cognos 8 service for these changes to take effect.

End Result

8 service for these changes to take effect. End Result 4.2 Re-branding Query Studio Files used

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

perform a find and re place on the colors in the figure above. Save and close

Customizing the IBM Cognos 8 UI

15

Customizing the IBM Cognos 8 UI 15 4.3 Re-branding Analysis Studio Files used <install

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

.gif); padding: 2px; border: 0px; width: 578px; } End Result Business Analytics

Customizing the IBM Cognos 8 UI

16

Customizing the IBM Cognos 8 UI 16 4.4 Re-branding Report Studio Files used: <install

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

1px solid #c8ddca ; } DIV.clsPropertyDescriptionBox, .clsWelcomeBanner { border: 1px solid #c8ddca ; Business Analytics

Customizing the IBM Cognos 8 UI

17

}

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

{ background-color: #ffffff ; } End Result 4.5 Re-branding Metrics Manager Files used: Business

4.5 Re-branding Metrics Manager

Files used:

Business Analytics

{ background-color: #ffffff ; } End Result 4.5 Re-branding Metrics Manager Files used: Business Analytics

Customizing the IBM Cognos 8 UI

18

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

}

5px; PADDING-LEFT: 3px; BACKGROUND-COLOR: #2d5c3d ; } Modify the Table Style .tableTitle { font: 70% Tahoma,

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

#c8ddca ; } .tableTitleHover { font: 70% Tahoma, arial, geneva, helvetica, sans-serif; Business Analytics

Customizing the IBM Cognos 8 UI

19

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;

}

{ font-size: 70%; font-weight: normal; color: #2d5c3d ; } Modify the colors of the links and

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

arial, geneva, helvetica, sans-serif; color: #2d5c3d ; } Modifies the “GO Metrics” heading Business Analytics

Customizing the IBM Cognos 8 UI

20

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

}

1px solid; HEIGHT: 24px; BACKGROUND-COLOR: #2d5c3d ; } End Result 4.6 Re-branding Event Studio Files used:

End Result

HEIGHT: 24px; BACKGROUND-COLOR: #2d5c3d ; } End Result 4.6 Re-branding Event Studio Files used: <install

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

file. Other Configuration Changes In the crn.css file, modify t he following parameters individually: Business Analytics

Customizing the IBM Cognos 8 UI

21

.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

solid; height: 25px; width:100%; padding: 1px } End Result 5. Example 2 – Understanding the Various

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

the parameters that make out the layout and select ively replace certain colors with your own

Customizing the IBM Cognos 8 UI

22

Customizing the IBM Cognos 8 UI 22 Using the same technique as the first approach and

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:

#E72B41

#FFCE6D

#F8F8DC

#333399

5.1 Re-branding Cognos Connection

All branding related files are found in the <install_directory>/c8/webcontent/skins/your_style/portal folder.

Task 1 – Modify the Top Line Header in IBM Cognos Connection To modify the top header, perform the highlighted changes in the default.css file:

perform the highlighted changes in the default.css file: Main Header Modifies the background of the main

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

{

Business Analytics

color: #ffffff ; } Displays colors and images in the middle of the main header .headerTitleMiddle

Customizing the IBM Cognos 8 UI

23

}

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.

MY /Pharmacy
MY /Pharmacy

Expect something more

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

#f8f8dc ; } Modifies the Hyperlinked Text .ccOptions { font-size: 70%; color: #333399 ; } .authOption

Customizing the IBM Cognos 8 UI

24

{

font-size: 70%;

color: #333399;

}

.ccToolsLabel

{

font-size: 70%;

color: #333399;

}

; } .ccToolsLabel { font-size: 70%; color: #333399 ; } Dynamic Scroll Button .tabScrollButton { padding:

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;

}

1px solid; cursor: default; background-color: #f8f8dc ; } Portal Tab Bars .tabBorder { background-color: #e72b41 ;

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

{ color: #e72b41 ; } Modifies the Colors and borders for non-selected tabs .tabNormal { Business

Customizing the IBM Cognos 8 UI

25

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;

}

1px; border-left: #ffce6d 1px solid; height: 20px; } Task 3 – Modifying Public Folders / My

Task 3 – Modifying Public Folders / My Folders

Business Analytics

border-left: #ffce6d 1px solid; height: 20px; } Task 3 – Modifying Public Folders / My Folders

Customizing the IBM Cognos 8 UI

26

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

{ padding: 2px; border: #ffce6d 1px solid; cursor: hand; background-color: #f8f8dc ; } Business Analytics

Customizing the IBM Cognos 8 UI

27

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

}

#f8f8dc ; } .toolbarImageDefaultCursor { cursor: default; } Path .pathLeafNode { font-weight: bold; color: #333399 ;

Path

.pathLeafNode

{

font-weight: bold;

color: #333399;

}

.pathSeparator

{

color: #333399;

}

.pathLink

{

color: #333399;

}

{ color: #333399 ; } .pathLink { color: #333399 ; } List View /* --- List

List View

/* --- List control --- */ .pager_text

{

font-size: 70%;

color: #333399;

font-family: Tahoma;

Business Analytics

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

Customizing the IBM Cognos 8 UI

28

}

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

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

Customizing the IBM Cognos 8 UI

29

Customizing the IBM Cognos 8 UI 29 3. Modifying the table used for displaying the Portlets

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;

}

1px solid; padding: 0px; background-color: #ffce6d ; } Task 4 – Clean up other Dialogs and

Task 4 – Clean up other Dialogs and Pages Dialogs:

.pageEditorPortletColumn

{

border: #ffce6d 1px solid; color: #333399; background-color: #ffffff;

Business Analytics

.pageEditorPortletColumn { border: #ffce6d 1px solid; color: #333399 ; background-color: #ffffff; Business Analytics

Customizing the IBM Cognos 8 UI

30

}

.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

{ font-size:90%; width: 100%; cursor: default; color: #f8f8dc ; height: 100%; text-decoration: none; Business Analytics

Customizing the IBM Cognos 8 UI

31

border: #ffce6d 1px solid; background-color: #ffffff;

}

.dialogDivider /* horizontal dividers e.g. actions dialog */

{

background-color: #f8f8dc;

}

e.g. actions dialog */ { background-color: #f8f8dc ; } Search path .dialogSearchPathDisplayPanel {  

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

border-bottom: #ffce6d 1px solid; z-index: 50; padding-top: 10px; background-color: #f8f8dc ; } Business Analytics

Customizing the IBM Cognos 8 UI

32

Customizing the IBM Cognos 8 UI 32 Hovering Over Menu Items .menuItemOver { padding: 1px; color:

Hovering Over Menu Items

.menuItemOver

{

padding: 1px; color: #000000; height: 20px; background-color: #f8f8dc;

}

#000000; height: 20px; background-color: #f8f8dc ; } 5.2 Re-branding Query Studio All branding related files are

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.

made in IBM Cognos Connection, including the main header. Task 1 – Modifying the Header and

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

!important; } To place in a different colored header, add the appropriate parameters: .mainHeader1 { Business

Customizing the IBM Cognos 8 UI

33

}

.mainHeader2

{

}

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

m the highlighted changes in the QSRVCommonUI.css files: Crn.css Modifies the background color for the toolbar.

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

border : 1px solid #ffcd6d ; background-color: #f8f8dc ; cursor: pointer; cursor: hand; } Business Analytics

Customizing the IBM Cognos 8 UI

34

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

}

vertical-align: bottom; font-weight: bold; width:100%; } The show/hide menu arrow .menuHeaderButton { border: solid

The show/hide menu arrow

.menuHeaderButton { border: solid #ffce6d; border-width: 1px 1px 0px; border-collapse: collapse; cursor: pointer; cursor: hand;

}

collapse; cursor: pointer; cursor: hand; } Background color of the Menu Pane .menuItem,

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

{ color: #333399 ; border-collapse: collapse; cursor: default; padding: 3px 10px; Business Analytics

Customizing the IBM Cognos 8 UI

35

border: 1px solid #ffce6d;

height:20px;

font-size: 70%;

font-weight: bold;

}

#ffce6d ; height:20px; font-size: 70%; font-weight: bold; } Controls the border around the entire menu tree

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;

}

collapse; cursor: pointer; cursor: hand; } Task 4 – Modify the grid section To modify the

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

font-weight: normal; font-size: 70%; color: #333399 ; } .startPageListColumnTitle { padding: 3px 5px; Business Analytics

Customizing the IBM Cognos 8 UI

36

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;

}

border: 1px solid #ffce6d ; background-color: white; } Note: When objects are placed onto the grid,

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

Use Find and Replace using the same colors scheme on all CSS files in the qs/

Customizing the IBM Cognos 8 UI

37

Customizing the IBM Cognos 8 UI 37 5.3 Re-branding Analysis Studio All branding related files are

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:

orm the highlighted changes in the background.css files: .menubar { position: absolute; overflow: hidden;

.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

; display: inline-block; font-family: Tahoma; font-weight: bold; text-decoration: underline; Business Analytics

Customizing the IBM Cognos 8 UI

38

}

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

m the highlighted changes in the background.css files: .main_toolbar { position: absolute; white-space:

.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

#ffce6d ; border : 1px solid #e72b41 ; border-left-width: 0px; display: inline-block; Business Analytics

Customizing the IBM Cognos 8 UI

39

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

#333399 ; background-color: #ffce6d ; padding: 3px; border : 1px solid; border-color : #e72b41 ; Business

Customizing the IBM Cognos 8 UI

40

}

Customizing the IBM Cognos 8 UI 40 } .tab_td_selected, .top_tab_td_selected { text-align: left; white-space: nowrap;

.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

.tab_td_none_selected { border-top : 1px solid #ffce6d ; } .top_tab_td_none_selected { Business Analytics

Customizing the IBM Cognos 8 UI

41

border-bottom : 1px solid #ffce6d;

}

.tab_right_border

{

border-right: 1px solid #ffce6d;

}

.tab_left_border

{

border-left: 1px solid #ffce6d;

}

; } .tab_left_border { border-left: 1px solid #ffce6d ; } Task 4 – Context Menu Style

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_disabled_over {   color: graytext; text-decoration: none; } Business Analytics

Customizing the IBM Cognos 8 UI

42

.contextMenu_item_default_over

{

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

}

background-color: #f8f8dc ; border: 1px solid #ffce6d ; } End Result – 5.4 Re-branding Report Studio

End Result –

#f8f8dc ; border: 1px solid #ffce6d ; } End Result – 5.4 Re-branding Report Studio All

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:

the Main Header To modify the main header, perform the highlighted changes in the skin.css files:

Business Analytics

the Main Header To modify the main header, perform the highlighted changes in the skin.css files:

Customizing the IBM Cognos 8 UI

43

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:

perform the highlighted changes in the skin.css files: BODY, BUTTON, DIV.clsMenubar, DIV.clsToolbar,

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

BUTTON.clsXButton_inactive, #idExplorerBar, TD.clsExplorerButton, #idResizeBarToolboxBottom, Business Analytics

Customizing the IBM Cognos 8 UI

44

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