Product:
IBM Cognos BI 10.1.1 or 10.2
Windows 2008 R2 Server
Problem:
How do I change the color on the banner in Cognos Connection ?
Solution:
The logo type and color in the Cognos Connection start page are controlled from the file system.xml found in folder c:\program files\ibm\cognos\c10_64\templates\ps\portal.
Create a PNG picture that is a line of Grey, shaded if you want, and place it in folder c:\program files\ibm\cognos\c10_64\webcontent\skins\NIPPON\branding.
Add below section for NIPPON to system.xml below the lines;
<!– 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=”true” contextDelimiter=” – “>
……….
</style>
<style styleFolderName=”NIPPON”>
<table tyle=”background-color:#ffffff;background-image:url(‘../skins/NIPPON/branding/105-background.png’);background-repeat:repeat-y;”>
<tr>
<td><img src=”../skins/NIPPON/branding/105-logo-generic.png”/></td>
<td class=”headerTitle” style=”padding-right:2px;white-space:nowrap”></td>
</tr>
</table>
</style>
Above section will display picture 105-background.png as the color in the back, repeat it for the page, and the picture 105-logo-generic.png will show the company logo in left side of the Cognos Connection.
Of course do you need to create a new SKIN first, by adding the NIPPON skin:
- Copy one of the default skins folders and rename it
- From Cognos Connection, go to Portal Administration
- Select the Styles tab
- Click on the New Style icon at top right
- Give the new custom skin a name
- In the field Style Location name type the new name of the custom skin
- In the field Preview resource URL enter ../skins/name of new custom skin/preview.htm
To change the color of the text in Cognos Connection you need to edit the file banner.css found in folder c:\program files\ibm\cognos\c10_64\webcontent\skins\NIPPON\shared.
Change the number in this section to the color of text for the user name, that are shown as logged in to Cognos Connection.
.userNameContainer {
padding-right: 8px;
font-weight: bold;
font-size: 70%;
color: #336699;
white-space: nowrap;
}
The value color: #336699; give a blue color.
color: #ffffff; is white, the default color.
color: #669911; give a light green text.
You do not need to restart Cognos BI for changes in banner.css should take affect, only refresh your Internet Explorer, to see the color change of the text.
.headerTitle {
font-family: Helvetica, Verdana, Tahoma, Arial, sans-serif;
padding-left: 16px;
font-weight: normal;
font-size: 0.95em;
color: #669911;
vertical-align: middle;
white-space: nowrap;
width: 100%;
}
Above section change the color of the IBM Cognos Connection text to the left in Cognos Connection to green.
If you do not want to change the system.xml you can add a logo in the banner.css file by edit the logo section.
.logo {
width: 45px;
height: 16px;
display: ;
background-image: url(../branding/your_logo_here.gif);
background-position: top left;
background-repeat: no-repeat;
}
Above section will show a logo to the left of the IBM Cognos Connection text, you need to remove the word NONE at the display: none; section. Then you replace the file your_logo_here.gif with you logo in a small gif file.
The gif file for the logo is in the folder C:\Program Files\IBM\cognos\c10_64\webcontent\skins\NIPPON\branding
To add a different background image, you edit this section in banner.css file
.mainHeader1 {
background: url(../shared/images/banner-swoosh.png) no-repeat;
background-position: 220px 0;
max-height: 35px;
height: 35px;
min-width: 838px;
width: 100%;
}
Make a copy of the file banner-swoosh.png and name it banner-swoosh1.png in the folder C:\Program Files\IBM\cognos\c10_64\webcontent\skins\NIPPON\shared\images
Edit the banner-swoosh1.png in a paint program to your like and save the picture.
Update the banner.css file to use background: url(../shared/images/banner-swoosh1.png) no-repeat; instead of background: url(../shared/images/banner-swoosh.png) no-repeat;
Save the banner.css file and go to your Internet Explorer and press F5 to update the display.
#headerBack {
background: url(../shared/images/banner-background.png) repeat-x 0 0;
background-color: #336699;
min-height: 35px;
}
Above section in banner.css file give the right side color, it is a small picture banner-background.png that is repeated all the way to the end.
#headerBack {
/background: url(../shared/images/banner-background.png) repeat-x 0 0;/
background-color: #336699;
min-height: 35px;
}
You should NOT remove the background.png, as we have done above, because then it will only be white before and after your banner-swoosh.png picture. That is not readable.
#headerBack {
background: url(../shared/images/banner-background.png) repeat-x 0 0;
background-color: #336699;
min-height: 65px;
}
Change of the min-height, will make a space below the IBM Cognos Connection text and your tabs for public folders and so on. This space will have the blue color defined by the background-color: #336699; line above.
If you change it to background-color: #336600; you will have a 30 pixel high dark green border above Public Folder tabs.
#headerBack {
background: url(../shared/images/banner-background.png) repeat-x 0 40;
background-color: #336600;
min-height: 35px;
}
If you change the last 0 to 40 you will replace the background.png with you background-color, in above case dark green. Ugly.
More information: