Introduction

Purpose

This document provides some tips and techniques when creating a custom style, or “skin”, in IBM Cognos 10. This document provides an overview of the concepts, colours, schemes, and files used for skinning in IBM Cognos 10.

Applicability

This document applies to IBM Cognos 10.x.

Exclusions and Exceptions

Before reading this document, please read the chapter titled Customizing the Appearance of IBM Cognos BI chapter in the “IBM Cognos 10 Administration and Security Guide”.

Back to top

Creating a new style

IBM Cognos 10 provides custom cascading style sheet (CSS) files that control the colours, borders, images and font properties of the portal.

Creating a new style

Before starting, create a new style based off an already defined style. To do this, refer to the section titled Using the Style Management Utility in the Customizing the Appearance of IBM Cognos BI chapter in the “IBM Cognos 10 Administration and Security Guide”.

In this document, the corporate style will be used as the basis for the new style. The folder that contains the new style will be referred to as my_style and will be located under the directory <c10_install>/webcontent/skins.

Add style to portal

Once the style is created, it then needs to be added to the portal. Refer to the section titled Add a New Style of the Managing Portlets and Styles chapter in the “IBM Cognos 10 Administration and Security Guide”.

Files Used with IBM Cognos 10 Styles

All of the files required to modify styles across all IBM Cognos components can be found in the newly created style folder that was established in the Create a new style section of this document. All locations listed in the following table are relative to the <c10_install>/webcontent folder.

Changing Component Names and Text Messages

You can change the names of IBM Cognos 10 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 <c10_install>/msgsdk directory. For changes to take effect, you must install and run the Localization Development Kit (LDK) in accordance with the LDK Installation and User Guide.

Changing IBM Cognos 10 Fonts

You can change the fonts used in IBM Cognos 10 by modifying the font-family list in the file <c10_install>/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.

Back to top

Rebranding IBM Cognos 10

The following section is based off of the corporate theme. This section does not show all the parameters to change in the user interface but it gives a good sense of the most commonly changed items.

IBM Cognos Connection

The following files are used to modify the look of IBM Cognos Connection.

• <c10_install>/webcontent/skins/my_style/portal/default.css
• <c10_install>/webcontent/skins/my_style/shared/banner.css
• <c10_install>/templates/ps/messages/portal_xx.xml

Note: The xx in portal_xx.xml refers to the language selection. For example, portal_fr.xml refers to the French version of the portal XML file.

Main banner

The default main banner of IBM Cognos Connection is shown in Figure 1. The main banner contains the IBM Cognos Connection title, the Log On link, the refresh button, the search text box and drop-down, the home button, the personal preferences button and drop-down, the launch link and drop-down, help button and drop-down and the IBM logo.

Modification of the main banner happens in the banner.css file. The main banner is a shared component, so keep in mind that modifications here will also appear in other studios. In this section, the following items are going to be discussed.

• Background Image
• Background Colour
• Banner Title Text
• Banner Title font
• IBM Logo
• Adding a logo on left side of banner
• Dividers

Banner title text

The title text can be changed by editing the portal_xx.xml file. Change the text “IBM Cognos Connection” in the following string ids in portal_xx.xml.

• string id="IDS_PORTAL”
• string id="IDS_ABOUT_PORTAL"
• string id="IDS_RSSVIEW_INTRO_1"
• string id="IDS_BVE_INCOMPATIBLE_ENVIRONMENT"

Portal tab bar

The portal tab bar is shown in Figure 2. It contains the home tab button, the Public Folders tab, the My Folders tab, all of the user-added tabs and the scroll tab buttons.

Modification of the portal tab bar happens in the default.css file.

Breadcrumb path

The breadcrumb path shows the path of the current folder that the user is currently working in. For example, in Figure 3, the user is working in the Public Folders > Samples > Cubes > Sales and Marketing (cube) folder.

Modification of the breadcrumb path happens in the default.css file.

Content table

The content table (see Figure 4) contains the list of reports, folders, events and other IBM Cognos objects that are the current folder. Each item in the list has a last modified date and a set of action buttons.

Content table

The content table (see Figure 4) contains the list of reports, folders, events and other IBM Cognos objects that are the current folder. Each item in the list has a last modified date and a set of action buttons.

Modification of the content table happens in the default.css file.

Fly-out menu

The fly-out menus are any menu buttons that when clicked on give you an additional pop-up menu. Figure 5 shows the fly-out menus when the search, personal preferences, launch and help dropdown buttons have been selected.

Modification of the fly-out menu happens in the default.css file.

IBM Cognos Query Studio

The following files are used to modify the look of IBM Cognos Query Studio.

• <c10_install>/webcontent/skins/my_style/qs/CRN.css
• <c10_install>/webcontent/skins/my_style/portal/default.css
• <c10_install>/webcontent/skins/my_style/qs/QSRVCommonUI.css
• <c10_install>/webcontent/skins/my_style/shared/banner.css
• <c10_install>/webcontent/skins/my_style/qs/QSReport.css

Main banner

The main banner for IBM Cognos Query Studio as shown in Figure 6 consists of the studio name, a Log On link, the home button, the return button, the help link and drop-down and the IBM logo.

As previously mentioned in the section titled “IBM Cognos Connection”, changes to the main banner are impact other components and the changes are made in the banner.css file.

Side menu

The side menu as shown in Figure 7, contains items such Insert Data, Edit Data and Change Layout that aid in creating a report in IBM Cognos Query Studio.

The side menu can be changed in the QSRVCommonUI.css file. In this section, the following items are going to be talked about.

• Menu
• Data Tree Pane
• Information Pane

“Select and insert items…” image

The “Select and insert items…” image as shown in Figure 8 is the default image that is displayed when no data items have added to the report. The image contains instructions such as using Right-click on report item heading to access commonly-used actions.

The “Select and insert item…” image is controlled by the QSReport.css file.

Fly-out menu

The fly-out menus are any menu buttons that when clicked on give you an additional pop-up menu. Figure 9 shows the fly-out menu for the drill-through button on the toolbar.

The fly-out menus for IBM Cognos Query Studio are controlled by the CRN.css file.

IBM Cognos Analysis Studio

The following files are used to modify the look of IBM Cognos Analysis Studio.

• <c10_install>/webcontent/skins/my_style/ans/background.css
• <c10_install>/webcontent/skins/my_style/ans/explore.css

Menu bar

The IBM Cognos Analysis Studio menu bar appears at the very top of the screen and contains the menu items File, Edit, View, Settings, Run and Help as shown in Figure 10.

The IBM Cognos Analysis Studio menu bar is controlled by the background.css file.

.menu, .menu_hover, .menu_pressed {
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: Tahoma;
    font-size: 8pt;
    font-weight: bold;
    padding: 3px 6px;
}

.menu_pressed {
    background-color: #E3E9F3;
    border: 1px solid #FFFFFF;
    color: #134679;
    padding: 2px 5px;
}

Tool Bar

The tool bar consists of buttons that perform various tasks in IBM Cognos Analysis Studio and it resides directly underneath the menu bar. Some of the buttons that are on the tool bar as shown in Figure 11 are New Report, Open Report and Sort Data Item.

The IBM Cognos Analysis Studio tool bar is controlled by the background.css file.

Insertable Objects pane

The Insertable Objects pane shows all query items that can be added to the IBM Cognos Analysis Studio report (see Figure 12). The pane consists of a header with the text Insertable Objects, the area that contains the query items and along the bottom of the pane, a set of tabs where one will always be selected and the others unselected.

The Insertable Objects pane is controlled by multiple sources. Check the individual location for the file to modify. In this section, the following items are going to be talked about.

• header
• tabs

Context menus

The context menus are the drop-down menus that appear when clicking on certain buttons in the tool bar. Examples of buttons that contain a drop-down menu are Run Report and Filters. Figure 13 shows a context menu associated with the Display button on the toolbar.

The context menus are controlled by the background.css file.

Show/Hide button

The show/hide button, as shown in Figure 14, is the arrow beside the Insertable Objects pane and will show and hide the Insertable Objects pane.

The show/hide button is controlled by the explore.css file.

Crosstab drag and drop area

The crosstab drag and drop area (Figure 15) is where a user places a data item into one of the sections that maps to a row, column or measure.

The drag and drop area is controlled by the explore.css file

The properties pane

The properties pane (Figure 16) describes what data items that have been used in the crosstab. There is also a set of buttons that allow a user to save or discard any changes made through this pane. This area changes to an open window when opening an analysis.

The properties pane is controlled by multiple .css files. In this section, the following items are going to be talked about.

• buttons
• header
• container

The buttons can be modified in the explorer.css file.

The header can be modified in the background.css file.

The container can be modified in the background.css file.

Information pane

The information pane as shown in Figure 17 describes the data item that has been selected in the Insertable Objects pane. The information includes the name, type, level and aggregation for the data item.

The information pane can be modified in the background.css file.

IBM Cognos Report Studio

The following files are used to modify the look of IBM Cognos Report Studio.

• <c10_install>/webcontent/skins/my_style/pat/skin.css
• <c10_install>/webcontent/skins/my_style/hal/hal_skin_corporate.css

In the IBM Cognos Report Studio style sheets, sections have been grouped together to keep common themes.

Background

This section controls the background behind the Source, Data Item and Toolbox tabs (see Figure 18), the information pane and the explorer bar.

The background is controlled in the skin.css file.

Button colour, selected tab colour and Page Explorer colour

This setting controls most of the button, tab and button/tab bar colours. Figure 19 shows the button bar changed from white to black.

The background is controlled in the hal_skin_corporate.css file.

Header bar colour and button hover colour

The header bar is the header in both the Source and Properties panes. The header bar for the Properties pane is shown in Figure 20.

The header bar colour and button hover colour is controlled in the hal_skin_corporate.css file.

Inactive tabs

These are the tabs that have Source, Data Item and Toolbox in the top right corner of the screen (see Figure 21).

The inactive tabs are controlled in the hal_skin_corporate.css file.

Button Bar

The main button bar is located at the top of the screen directly below the menu bar and, as shown in Figure 22, contains buttons for actions such as New, Open, Save and Run Report.

The button bar is controlled in the hal_skin_corporate.css file.

Menu Bar

The menu bar is located at the very top of the screen and contains items that are used to create and modify reports. As seen in Figure 23, the first level items on the menu bar are File, Edit, View, Structure, Table, Data, Run, Tools and Help.

The menu bar is controlled in the hal_skin_corporate.css file.

IBM Cognos Event Studio

The following files are used to modify the look of IBM Cognos Event Studio.

• <c10_install>/webcontent/skins/my_style/portal/default.css
• <c10_install>/webcontent/skins/my_style/prompting/promptCommon.css
• <c10_install>/webcontent/skins/my_style/ags/ags.css
• <c10_install>/webcontent/skins/my_style/ags/crn.css

Menu bar

The menu bar is located at the very top of the screen and contains items that are used to create and modify events. As seen in Figure 24, the first level items on the menu bar are File, Edit, View, Insert, Actions and Help.

The menu bar is controlled in the crn.css file.

Button bar

The button bar is located at the top of the studio directly beneath the menu bar and performs actions such as New, Save, Cut and Delete as shown in Figure 25.

The button bar is controlled in the crn.css file.

Fly-out menu

The fly-out menus are any menu buttons when clicked on, giving you an additional pop-up menu. As seen in Figure 26, the options available from the fly-out menu for the Run button are HTML, PDF, Excel 2007, Excel 2002, CSV, XML and a selection to specify additional options when running a report.

The fly-out window is controlled by the crn.css file.

3.5.4 “I want to…” pane

The “I want to…” pane is a menu that presents the specific steps used to create an event. As seen in Figure 27, these steps include specifying an event condition, adding tasks, managing task execution rules and scheduling an agent.

The “I want to…” pane is controlled by the crn.css file.

Insertable Objects pane

The Insertable Objects pane as shown in Figure 28, contains all data items that allowed to be added to the event.

The Insertable objects pane is controlled by the crn.css file.

Decision bar

The decision bar displays what has been added to the event. Figure 29 shows that no event has been set but new email message task has been set.

The decision bar is controlled in the crn.css file.

Tab bar

The tab bar (see Figure 30) is located at the bottom of the Insertable Objects pane.

The tab bar is controlled by the crn.css file.

IBM Cognos Administration

The following files are used to modify the look of IBM Cognos Administration.

• <c10_install>/webcontent/skins/my_style/fragments\portlet.css
• <c10_install>/webapps/p2pd/WEB-INF/fragments/applications /cogadmin/fragments/banner.xml

Main banner

The main banner contains the IBM Cognos Administration title, log on link, refresh button, search box, home link, personal preference link, launch link, help and IBM logo (see Figure 31). IBM Cognos Administration uses most of the same properties as IBM Cognos Connection.

The main banner is controlled in the portlet.css file.

Banner title text

The title text of the main banner can be changed by editing the banner.xml file. Change the text “IBM Cognos Administration” in the parameter “displayText”.

Horizontal tab bar

The horizontal tab bar is on the top of the screen and contains various tabs and screens needed to administer IBM Cognos BI (see Figure 32). The tabs Security, Status, and Configuration are always available and if a cohort product such as IBM Cognos PowerPlay have been installed, a tab may appear that will allow for the management of the cohort product.

The horizontal tab bar is controlled in the Portlet.css file.

About the author

Rate this article

Comments

Back to top

Table of contents

• Introduction
• Creating a new style
• Rebranding IBM Cognos 10
• About the author
• Comments

Next steps from IBM

• Try: Cognos Business Intelligence
• Demo: Video: Cognos 8 BI
• Community: Cognos BI
• Buy: Cognos Business Intelligence

Dig deeper into Business analytics on developerWorks

IBM SmartCloud trial. No charge.

Unleash the power of hybrid cloud computing today!

---

Public and private solutions in one trial.

Special offers