IBM Business Analytics Proven Practices: Customising the IBM Cognos 10.x User Interface

Product(s): IBM Cognos 10; Area of Interest: Infrastructure

This document provides some tips and techniques when creating a custom style, or “skin”, in IBM Cognos 10.

Share:

Business Analytics Proven Practices Team, Business Analytics Proven Practices Team, IBM

Business Analytics Proven Practices Team



10 October 2012

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


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

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.

Files Used with IBM Cognos 10 Styles
IBM Cognos ComponentStyle File and LocationImage File Location
IBM Cognos Connection/skins/my_style/portal/default.css
/skins/my_style /shared/banner.css
/skins/my_style/portal/images
/skins/my_style/branding
Report Studio/skins/my_style /pat/skin.css
/skins/my_style /pat/hal_skin_corporate.css
/skins/mystyle/hal/images
Analysis Studio/skins/my_style/ans/background.css
/skins/my_style/ans/explore.css
/skins/my_style/ans/images
Query Studio/skins/my_style/qs/crn.css
/skins/my_style/portal/default.css
/skins/my_style/qs/QSRVCommonUI.css
/skins/my_style /shared/banner.css
/skins/my_style/prompting/QSReport.css
/skins/my_style/qs/images
Event Studio/skins/my_style/portal/default.css
/skins/my_style/prompting/promptCommon.css
/skins/my_style/ags/ags.css
/skins/my_style/ags/crn.css
/skins/my_style/ags/images
IBM Cognos Administration/skins/corporate/fragments/portlet.css
/webapps/p2pd/WEB-INF/fragments/applications/
cogadmin/fragments/banner.xml

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.


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.

Figure 1 - IBM Cognos Connection main banner
Figure 1 - IBM Cognos Connection main banner

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
Background image
ItemFunction
#headerBackControls the image behind the words “IBM Cognos Connection” in the banner. To remove the image all together, comment out the #headerBack section.
.mainHeader1Controls the image behind the rest of the banner. To remove the image all together, comment out the .mainHeader1 section.
Background colour
ItemFunction
#headerBackControls the background colour. Note that the background colour will not show if there is a background image. To do that, comment out the background property.

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"
Banner title font
ItemFunction
.headerTitleControls the font properties of the banner title.
IBM logo
ItemFunction
#ibmLogoControls the image properties in the top right corner of IBM Cognos Connection. To change the image, modify the background property value. The height property value might have to be modified according with the new image. If the IBM logo is to be removed, comment out the entire #ibmLogo selector.
Adding a logo on left side of banner
ItemFunction
.logoControls the image placed in the top right of the banner. Modify the background-image property value to add the image then comment out the display property so the image will be shown. The height and width property values might have to be modified to accommodate the new image.
Dividers
ItemFunction
bannerDividerControls the separator image in the main banner. Modify the background-image property value to replace the image. The height and width property values might have to be modified to accommodate the new image. To remove the divider, comment out the bannerDivider section.

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.

Figure 2 - IBM Cognos Connections portal tab bar
Figure 2 - IBM Cognos Connections portal tab bar

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

ItemFunction
.tabNormalControls the background, border and font of the unselected tab(s).
.tabSelectedControls the background, border and font inside of the selected tab.
.tabBarContainer
.mainheader3
Controls the background behind the tabs.
.tabLeftSelected
.tabRightSelected
These two sections control the sides of the selected tabs. Change the background-image property value to replace the image. The height and width property values might have to be modified to accommodate the new image.
.tabLeftNormal
.tabRightNormal
These two sections control the sides of the unselected tabs. Change the background-image property value to replace the image. The height and width property values might have to be modified to accommodate the new image.
.bannerDividerControls the unselected tab font colour.

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.

Figure 3 – IBM Cognos Connection breadcrumb path
Figure 3 – IBM Cognos Connection breadcrumb path

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

ItemFunction
aControls the font colour of the parent node. This also changes the selectable text font inside content table.
.pathLeafNodeControls the font colour of the child node.
.pathSeparatorControls the font properties of the “>” separator

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.

Figure 4 - Content table showing a list of reports
Figure 4 - Content table showing a list of reports

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

ItemFunction
.tableHeaderControls the table header background colour.
.tableTitleControls the title heading font for each column
.tableSortTitleControls the titles that are sort enabled.
aControls the selectable text in the table.
.tabletextControls the non-selectable text in the table

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.

Figure 5 –Selection of fly-out menus from the dropdown buttons
Figure 5 –Selection of fly-out menus from the dropdown buttons

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

ItemFunction
.textControls the text inside the fly-out menus.
.flyoutMenuControls the background and border of the fly-out menu.
.menuItemOverControls the mouse over style of a menu item.
menuItemNormalControls the non-selected style of a menu item.

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.

Figure 6 - IBM Cognos Query Studio main banner
Figure 6 - IBM Cognos Query Studio main banner

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.

Figure 7 - IBM Cognos Query Studio side menu highlighting the Insert Data item
Figure 7 - IBM Cognos Query Studio side menu highlighting the Insert Data item

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
Menu
ItemFunction
.menuHeaderControls the borders and font of the menu title.
.menuItem, .menuItemSpacer, .menuItemSpacerTopControls the menu background and borders.
.menuItem, .menuActionControls the font of the unselected menu items.
.menuItemSelectedControls the font of the selected menu item.
Data tree pane
ItemFunction
.menuContent
.menuContentCollapsed
Controls the metadata tree properties.
Information pane
ItemFunction
.informationTitleHeader Controls the information pane font properties in the header.
.metaContentControls the background, border properties of the information pane.
.dialogHeaderThe information pane header title can be edited in the default.css file. This setting controls the headers in all dialog boxes. Controls the background of the header.

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

Figure 8 – The default 'Select and insert items...' image
Figure 8 – The default 'Select and insert items...' image

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

ItemFunction
.startPageListColumnTitleControls the header background and borders.
.startPageListColumnControls the column properties for border, colours and background

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.

Figure 9 - IBM Cognos Query Studio fly-out menu
Figure 9 - IBM Cognos Query Studio fly-out menu

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

ItemFunction
.menuItem_normalControls the fly-out menus text, borders, margins and colour.
menuItem_pressedControls the fly-out menus text, borders, margins and colour when the text item is selected.
menuItem_hoverControls the fly-out menus text, borders, margins and colour when the mouse hovers over a text item.

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.

Figure 10 – IBM Cognos Analysis Studio menu bar
Figure 10 – IBM Cognos Analysis Studio menu bar

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

ItemFunction
.menubarControls the background colour and border of the menu bar.
.menubar_content_divControls the background image and borders.
.menu,
.menu_hover,
.menu_pressed
Controls the font properties. In the background.css file these three are in a section together.
.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_pressedAdditional control just for the menu_pressed action. Controls the mouse over hover colours and background. This instance of .menu_pressed is the one that is a standalone item.
.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.

Figure 11 – IBM Cognos Analysis Studio tool bar
Figure 11 – IBM Cognos Analysis Studio tool bar

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

ItemFunction
.main_toolbarControls the background colour and borders.
.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_pressedControls the button properties.

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.

Figure 12 - Insertable Objects pane
Figure 12 - Insertable Objects pane

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
Header
ItemFunction
ins_obj_title_barControls the background, font and borders of the header. The Insertable Objects header is controlled by the background.css file.
mdmetadata, .analysis_itemControls the font colours and borders in the dimension tree. This is modified in the explore.css file.
Tabs
ItemFunction
PaneControls background colour behind the tabs. This is modified in the explorer.css file.
.tab_td_selected, .top_tab_td_selectedControls the background and borders of the selected tab. This is modified in the explorer.css file.
.tab_td_none_selected, .top_tab_td_none_selected, .top_tab_dummy_td_none_selected, tab_dummy_td_none_selectedControls the background and borders of the unselected tab. This is modified in the explorer.css file.

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.

Figure 13 - Sample of a context menu
Figure 13 - Sample of a context menu

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

ItemFunction
.contextMenu_body, .contextMenu_body_NS, visibility: visible;This controls the background and borders in the context menu.
contextMenu_item_defaultControls the font and background properties in the context menu.
contextMenu_item_with_submenu_overControls the font and background properties in the context menu when on-hover.

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.

Figure 14 - The show/hide button that determines if the Insertable Objects pane is displayed
Figure 14 - The show/hide button that determines if the Insertable Objects pane is displayed

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

ItemFunction
.hide_showControls the background colour and borders.
.hide_show_hoverControls the background colour of the button on-hover.

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.

Figure 15 – IBM Cognos Analysis Studios drag and drop area
Figure 15 – IBM Cognos Analysis Studios drag and drop area

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

ItemFunction
.ColMemberCellTemplateControls the background, font and borders of the column members.
.RowMemberCellTemplateControls the background, font and borders of the row members.

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.

Figure 16 – The properties pane
Figure 16 – The properties pane

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.

Buttons
ItemFunction
.dialogbuttons, .blockproppanebuttonControls the background colour and borders of the bottom task button.
.dialogButton_hoverControls the background colour and borders of the bottom task button when on hover.

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

Header
ItemFunction
.ToggleBar, .DlgTitleBarControls the background, font and borders of the header.

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

Container
ItemFunction
.BlockPropertiesContainerControls the background of the information container.

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.

Figure 17 – The information pane
Figure 17 – The information pane

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

ItemFunction
.InfoContainerControls the background and borders.

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.

Figure 18 – Source, Data Item and Toolbox tabs
Figure 18 – Source, Data Item and Toolbox tabs

The background is controlled in the skin.css file.

ItemFunction
#idToolboxTabPanels_Pane, #idToolboxTabBox_Pane, #idAppBehaviorTabPanels_Pane, #idAppBehaviorTabBox_Pane, #idProperties_Pane, #idDescription_Pane, .clsPane_Toolbox_active, .clsPane_Toolbox_inactive, .clsPane_Properties_inactive, .clsPane_Workarea_inactive, #idExplorerBar, .clsBigButtonBar, .clsQueryViewListViewHeader, .clsQueryTabBackground, DIV.clsFontComboBoxGroupListItem, TD.clsGridHeaderControls the majority of the background colour in IBM Cognos Report Studio.

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.

Figure 19 - Example to the button colour changed to black
Figure 19 - Example to the button colour changed to black

The background is controlled in the hal_skin_corporate.css file.

ItemFunction
BODY, BUTTON, DIV.clsMenubar, DIV.clsToolbar, DIV.clsDlgToolbar, TD.clsMenubarItem, TD.clsToolbarButton, .clsMenuPopup, .clsPopupDialog, .clsMenuItem, TABLE.clsModalDlg, TABLE.clsModelessDlg, TABLE.clsModelessInfoDlg, BUTTON.clsDlgButton, BUTTON.clsDlgButton_hover, BUTTON.clsXButton_active, BUTTON.clsXButton_inactive, TD.clsExplorerButton, .clsBigButtonBar, BUTTON.clsBigCoolButton, TD.clsToolbarButton, TD.clsTabBox_inactive, TD.clsTabBox_active, TD.clsTabBox_inactive_hover, TD.clsTabBox_active_hover, TD.clsBottomTabBox_inactive, TD.clsBottomTabBox_active, TD.clsBottomTabBox_inactive_hover, TD.clsBottomTabBox_active_hover, DIV.clsTabPanels, DIV.clsBottomTabPanels, TD.clsComboBoxArrow, TD.clsComboBoxArrow_disabled, DIV.clsListViewColumnHeaderControls the majority of the background colour set on buttons, tabs and the page explorer background colour.
BUTTON.clsCoolButton_hover, TD.clsMenubarItem_up, TD.clsToolbarButton_up, BUTTON.clsCoolButton_pressed, TD.clsMenubarItem_down, TD.clsToolbarButton_down, TD.clsToolbarButton_stuck, BUTTON.clsBigCoolButton_hover, TD.clsMenubarItem_up, TD.clsToolbarButton_up, BUTTON.clsBigCoolButton_pressed, TD.clsMenubarItem_down, TD.clsToolbarButton_down, DIV.clsListViewColumnHeaderControls the buttons borders when pressed and hovered.
HR, BUTTON.clsCoolButton, TD.clsToolbarButton, BUTTON.clsBigCoolButton, TD.clsToolbarButton, .clsListItem_colorCell_normalControls the buttons borders when not selected.

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.

Figure 20 – The header bar of the Properties pane
Figure 20 – The header bar of the Properties pane

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

ItemFunction
BUTTON.clsCoolButton_hover, TD.clsMenubarItem_up, TD.clsToolbarButton_up, BUTTON.clsCoolButton_pressed, TD.clsMenubarItem_down, TD.clsToolbarButton_down, TD.clsToolbarButton_stuck, .clsMenuItem_selected, DIV.clsPaneHeader_inactive, .clsListItem_hover, .clsListItem_tb_selected, .clsTreeNode_hover, TD.clsPropertySheetLabel_active, .clsModalDlgHeader_inactive, .clsModelessDlgHeader_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, TD.clsComboBoxArrow_downControls the header bar colour and the button hover colour.

Inactive tabs

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

Figure 21 - Tabs in active and inactive state
Figure 21 - Tabs in active and inactive state

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

ItemFunction
TD.clsTabBox_inactive, TD.clsBottomTabBox_inactive, TD.clsTabBox_inactive_hover, TD.clsBottomTabBox_inactive_hoverControls the normal and hover properties for the inactive tabs.
TD.clsTabBox_active, TD.clsBottomTabBox_active, TD.clsTabBox_active_hover, TD.clsBottomTabBox_active_hoverControls the normal and hover properties of the active tabs.

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.

Figure 22 - Section of the IBM Cognos Report Studio button bar
Figure 22 - Section of the IBM Cognos Report Studio button bar

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

ItemFunction
td.clstoolbarbutton*This property controls the background, fonts and borders of the buttons. The property show multiple times in the file.
div.clstoolbar*This property controls the background and borders of the bar. The property show multiple times in the 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.

Figure 23 – The IBM Cognos Report Studio menu bar
Figure 23 – The IBM Cognos Report Studio menu bar

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

ItemFunction
DIV.clsMenubar*, TD.clsMenubarItem*This property controls the background, fonts and borders of the menu bar. The property show multiple times in the 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.

Figure 24 – IBM Cognos Event Studio menu bar
Figure 24 – IBM Cognos Event Studio menu bar

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

ItemFunction
.menuBarControls the background and menu bar images.
.menuTitle_normalControls the menu font properties.
.menuTitle_hoverControls the menu background and font when menu pointer is hovering over a menu item.
.menuTitle_pressedControls the menu background and font when menu item is selected.

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.

Figure 25 - Section of the IBM Cognos Event Studio button bar
Figure 25 - Section of the IBM Cognos Event Studio button bar

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

ItemFunction
.toolbar_studio.toolbarImageNormalControls the background colour and borders on the bar.
.toolbarDropdownImageNormal_studioControls the background colour and borders on drop down boxes.
.toolbarDropdownImageOver_studioControls the background colour and borders when hovering over a drop down box.
.dropDownArrowControls the background colour and borders on drop down arrow.
.dropDownArrowOverControls the background colour and borders when hovering over a drop down arrow.

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.

Figure 26 – The fly-out menu for the Run button
Figure 26 – The fly-out menu for the Run button

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

ItemFunction
.menuItem_normalControls the background, font and border.
.menuItem_hoverControls the background, font and border when a fly-out menu item is hovered over.
.menuItem_pressedControls the background, font and border when a fly-out menu item is pressed (selected).
.menuContainerControls the background and border of the fly-out menu container.

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.

Figure 27 – The 'I want to...' pane in IBM Cognos Event Studio
Figure 27 – The 'I want to...' pane in IBM Cognos Event Studio

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

ItemFunction
.task_inactiveControls the font properties of the active menu item.
.task_activeControls the font properties of the inactive menu item.
.areaControls the background and borders of the main pane.
.area_headerControls the background, font and borders of the header.
.hide_show_taskspaneControls the background and border of the Show/hide pane button (double arrow down).
.hide_show_hover Controls the background and border of the Show/hide pane button when hovered (double arrow down).
.hide_show_pressedControls the background and border of the Show/hide pane button when button is pressed (double arrow down).

Insertable Objects pane

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

Figure 28 - Insertable Objects pane
Figure 28 - Insertable Objects pane

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

ItemFunction
.area_headerControls the font, background and border of the header. This property can be changed in the crn.css file.
.insertableItemsPaneBorderControls the background colour and borders of the bottom tabs. This property can be changed in the crn.css file.
.clsTreeNode_unselected.clsTreeNode_hoverControls the font properties on the unselected and on-hover text items. This property can be changed in the promptCommon.css file.
.treeBorderControls the background and border in the metadata tree box. This property can be changed in the ags.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.

Figure 29 – IBM Cognos Event Studio decision bar
Figure 29 – IBM Cognos Event Studio decision bar

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

ItemFunction
.itemControls the background and borders of the unselected task item.
.item_activeControls the background and borders of the selected task item.
.item_label_activeControls the font properties of the selected task item.
.item_labelControls the font properties of the unselected task item.

Tab bar

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

Figure 30 - The tab bar
Figure 30 - The tab bar

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

ItemFunction
aControls the font properties of the unselect tab. This is found in the crn.css file.
.tabLabel Controls the font properties of the select tab. This is found in the Default.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.

Figure 31 – IBM Cognos Administration main banner
Figure 31 – IBM Cognos Administration main banner

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

Background image
ItemFunction
.cogstyle-header-backControls the image behind the words “IBM Cognos Connection” in the banner. To remove the image all together, remark out the .cogstyle-header-back section.
.cogstyle-header-main Controls the image behind the rest of the banner. To remove the image all together, remark out the .cogstyle-header-main section.
Background Colour
ItemFunction
.cogstyle-header-backControls the background colour. Note that the background colour will not show if there is a background image. To do that, remark out the background-image property.

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

Banner font
ItemFunction
.cogstyle-header-titleControls the font properties of the banner title.
.cogstyle-header-menu-labelControls the font properties of the log-off text.
.cogstyle-header-menu-label-linkControls the font properties of the Launch link.
.cogstyle-header-menu-labelControls the font properties of the Log-off link.
.cogstyle-header-user-idControls the font properties of the User id text.
IBM logo
ItemFunction
.cogstyle-header-ibm-logoControls the image properties in the top right corner of IBM Cognos Administration. To change the image, modify the background-image property value. The height and width property value might have to be added. If the IBM logo is to be removed, comment out the entire .cogstyle-header-ibm-logo selector.
Add logo on left side of banner
ItemFunction
.cogstyle-header-logoControls the image that is placed in the top right of the banner. Modify the background-image property value to add the image, then comment out the display property so the image will be shown. The height and width property values might have to be modified to accommodate the new image.

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.

Figure 32 – The horizontal tab bar for IBM Cognos Administration
Figure 32 – The horizontal tab bar for IBM Cognos Administration

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

ItemFunction
.cogstyle-htabsControls the background of the inactive tab.
.cogstyle-htabs AControls the font properties of the inactive tab.
.cogstyle-htabs-activeControls the background of the active tab.
.cogstyle-htabs-active AControls the background of the active tab.
.cogstyle-htabs-active-left-edge
.cogstyle-htabs-active-right-edge
Controls the border of the active tab.
.cogstyle-htabs-left-edge
.cogstyle-htabs-right-edge
Controls the border of the inactive tab.

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Big data and analytics on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Big data and analytics
ArticleID=838756
ArticleTitle=IBM Business Analytics Proven Practices: Customising the IBM Cognos 10.x User Interface
publish-date=10102012