Modifying the Appearance of IBM Cognos Connection

The style sheet default.css in the c8_location/webcontent/skins/style/portal directory defines the overall appearance of the IBM Cognos Connection interface for each style . Portal-specific graphics, if present, are located in the images subdirectory.

You make changes to the appearance of IBM Cognos Connection by modifying the default.css file for the styles you want. Before you begin, we recommend that you back up the original default.css file.

Other changes to the appearance of IBM Cognos Connection are made in the c8_location/templates/ps/portal/system.xml file.

Tip: Remember to restart IBM Cognos 8 after completing your modifications, so that the changes take effect.

This documentation provides the following examples of customizations in IBM Cognos Connection:

• Customizing the default Welcome page

• Changing the background color in the IBM Cognos Connection main header

• Changing the branding details in the IBM Cognos Connection main header

• Changing the portal graphics

• Changing the fonts for page titles and instructions

Example - Customize the Default Welcome Page

You can customize the default Welcome page to apply your organization look and feel to it. You can change the colors, fonts, graphics, and some layout properties.

To customize the Welcome page for the style you want, in the c8_location/webcontent/skins/style/portal/default.css file, search for the classes that start with welcome and modify the values as required.

Example - Change the Branding Details in the IBM Cognos Connection Main Header

You can customize the IBM Cognos Connection main header by changing the branding details on the left-hand side. You can change the graphic, the title, and the background color. This change affects also Cognos Viewer and the administration tools.

The branding details are defined by the OEM parameter in the portal system.xml file. You must modify this file.

Steps

1. Open the system.xml file in a text or XML editor.

   This file is located in the c8_location/templates/ps/portal directory.

2. Locate the OEM parameter and add the custom branding details as specified in the following code.

   The sequence in bold font must be repeated for each style in which you want this change to appear.

   <param name="OEM"> 
     <customHeader showContext="true" contextDelimiter="-"> 
      <style styleFolderName="corporate"> <!--Insert well-formedHTMLhere --></style> 
       <style styleFolderName="classic"> 
       </style> 
           ...
     </customHeader> 
   </param>

   Setting the showContext attribute to true adds a report or a page name to the title. The contextDelimiter attribute, which can be represented by any character or sequence of characters, separates the title from the report or page name.

   Here is a code example for this change:

   <customHeader showContext="true" contextDelimiter="-
   ">
     <style styleFolderName="corporate">
      <table style="background-color:#ffffff"> 
       <tr>
        <td><img src="../skins/corporate/branding/my_logo.gif"/> 
        </td><tdclass="headerTitle" style="padding-right:2px;white-space:nowrap">Mycompany</td> 
       </tr> 
      </table> 
     </style> 
     <style styleFolderName="classic"> 
      <table style="background-color:#cccccc"> 
       <tr>
        <td><img src="../skins/corporate/branding/my_logo.gif"/> 
         </td><tdclass="headerTitle" style="padding-right:2px;white-space:nowrap">Mycompany
         </td> 
        </tr> 
      </table> 
    </style>
   </customHeader>

Example - Change the Background Color in the IBM Cognos Connection Main Header

Suppose you want to change the background color used in the IBM Cognos Connection header.

Open the c8_location/webcontent/skins/style/shared/banner.css file in a text editor and, in the code specified below, change the value shown in bold font as required.

mainHeader1
{
	border-right: #000000 1px solid; 
	border-left: #000000 1px solid; 
	border-bottom: #000000 1px solid; 
	background-color: #669966; 
	height: 25px;
	background-image: url(Images/title_bar_grapic.gif); 
	background-repeat: repeat-x; 
	background-position: top; 
}

Example - Change the Portal Graphics

Suppose you want to remove or replace some of the Web portal graphics for a specific style . When replacing the images, we recommend that you retain the same file name.

The following table shows the files located in the directory c8_location/webcontent/skins/style/branding that supply the currently used images.

Example - Change the Default Fonts for Page Titles and Instructions

Suppose you want to change the initial font settings for the page title and instructions. Depending on the product locale or other circumstances, you can specify a different font style and size.

In the c8_location/templates/ps/portal/system.xml file, find the section specified below, and change the values shown in bold font as required.

<param name="myPages">
	<param name="fontUnit">pt</param>
      <!-- pt or px or % --> 
	<param name="defaultTitleFontFace">Tahoma</param>
	<param name="defaultTitleFontSize">12</param>
	<param name="defaultInstructionsFontFace">Tahoma</param>
	<param name="defaultInstructionsFontSize">11</param>
</param>