这是您第一次登陆到 developerWorks，已经自动为您创建了您的概要文件。 选择您概要文件中可以公开的信息的信息（如姓名、国家/地区，以及公司），这些信息同时也会与您所发布的内容相关联。 您可以随时更新您的 IBM 账号。

所有提交的信息确保安全。

当您初次登录到 developerWorks 时，将会为您创建一份概要信息，您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。您的昵称在 developerWorks 社区中必须是唯一的，并且出于隐私保护的原因，不能是您的电子邮件地址。

所有提交的信息确保安全。

My developerWorks:

我的通知：

退出

选择语言：

IBM Cognos 最佳实践: 自定义 IBM Cognos 8.4.x UI

文档性质：技巧或技术；产品：IBM Cognos 8.4.1；关注领域：基础架构

Cognos Proven Practices Team, Cognos 最佳实践团队, IBM

Cognos 最佳实践团队。

简介： 本文提供了一些有关在 IBM Cognos 8.4.x 中创建自定义样式（或者 “外观”）的技巧与技术。

查看本系列更多内容

发布日期： 2011 年 7 月 22 日
级别： 中级
原创语言： 英文
访问情况： 1356 次浏览
评论：

免费下载：IBM® Cognos® Express V9.5 或者 Cognos® 8 Business Intelligence Developer Edition V8.4 试用版
下载更多的 IBM 软件试用版，并加入 IBM 软件下载与技术交流群组，参与在线交流。

简介

本文提供了一些有关在 IBM Cognos 8 中创建自定义样式（或者 “外观”）的技巧与技术。本文提供了有关用于 IBM Cognos 8 外观的概念、色彩方案、以及文件等的概述。文中还提供了一些任务相关的示例，来更好地阐述创建自定义样式的所有必要更改。

回页首

理解在 Styles 中使用的 Color Scheme

利用 “Corporate” Style 的默认 Colors

了解默认色彩方案，可将其与所需样式进行匹配。所有遵循相同色彩方案的 IBM Cognos 组件非常接近。以下图片中展示了在 “Corporate” 样式中预定义的主要颜色的清单。有些 IBM Cognos 组件可能定期地采用图中没有列出的颜色。

了解十六进制颜色

选择颜色的最佳方法是进入 web 站点，拍摄截屏快照，并将其放入 Paint Shop Pro（PSP）。然后采用绘图滴管工具，通过在颜色上单击鼠标，并在右侧面板上双击该颜色，来找出其颜色 HEX 值。

将颜色映射到用户界面部分

以下图表提供了在默认 “corporate” 样式中采用的色彩方案。它可以作为向导来确定如何将色彩方案与预定义的方案匹配。

IBM Cognos Connection

Query Studio

Analysis Studio

回页首

自定义 IBM Cognos 8 UI

IBM Cognos 8 提供了用于 IBM Cognos 8 UIs 中控制颜色的 CSS 文件。可通过适当修改 CSS 文件中的参数，来自定义 UI。

导入新样式

在创建新样式之前，必须要先导入样式。

导入新样式：

复制现有样式，作为模板。所有的样式位于 <install location>/c8/webcontent/skins 目录中。复制 “Corporate” 文件夹，并将其放入相同的目录中。对其重新命名。
登入 Cognos Connection，并加载 IBM Cognos Administration
单击 “Configuration” 选项卡，出现 ‘Styles’
在本页中，将会看到已有样式清单。单击 “New Style” 图标
这将会打开 “New Style Wizard”。为该样式提供一个名称。单击 Next。
在 “Style Resource Location” 中提供了确切的文件夹名。如果想要预览该样式，可利用预览页面来查看。以下展示了此预览页面的位置。单击 Finish。
新的样式将出现在清单中。
一旦导入了样式，可在 ‘My Preferences’ 下拉清单中查看该样式。

回页首

使用 IBM Cognos 8 Styles 的文件

可在新创建的 “my_style” 文件夹中看到 IBM Cognos 组件中所有需要修改样式的文件；<install location>/c8/webcontent/skins/my_style。

IBM Cognos 组件	文件与位置	图片
IBM Cognos Connection	skins/my_style/portal/default.css /skins/my_style/shared/banner.css /c8/template/ps/portal/system.xml	/skins/my_style/portal/images /skins/my_style/branding
Report Studio	/skins/my_style/pat/skin.css /skins/my_style/pat/hal_skin_corportate.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	<install location>/c8/webapps/p2pd/WEB-INF/fragments/styles/cogadmin.xml

System.xml – system.xml 文件（<install location>\c8\templates\ps\portal directory）用于修改功能或者隐藏用户界面的特定部分。本文件中的大部分参数适用于所有用户。

改变文本、字体、和图像

改变组件名与文本消息 – 通过在文本编辑器中打开相应消息文件并对文件串执行查找替换，来处理想要变更的内容，可改变 IBM Cognos 8 组件的名字，以及修改相应的文件消息。消息文件位于 <install-location>/c8/msgsdk 目录中。要使变更生效，必须依据 LDK Installation and User Guide 来运行 Localization Development Kit（LDK）。

改变 IBM Cognos 8 字体 – 可通过修改文件 <install-location>/c8/webcontent/skins/my_style/fonts.css 中的字体组清单，来改变 IBM Cognos 8 中采用的字体。依据所要采用的样式，来修改 fonts.css 文件。例如，可以改变所有 HTML 界面默认采用的字体，除了 Report Studio，来用于渲染特定亚洲字符。在文本编辑器中打开文件 fonts.css，注释部分展示出 Tahoma 作为字体集清单的第一个项目，可移除条目的注释，来更好地满足 Unicode 需求。

改变 IBM Cognos 图片 – 所有的图片都位于样式目录中。上表按组件来展示所有图片的位置。可通过将自定义图片放到此目录中，并采用相同的文件名来方便地改变图片的位置。

回页首

重建 IBM Cognos 8

可通过将默认颜色与所需颜色进行匹配，然后在适当的 CSS 文件中替换这些颜色的所有实例，来快速地为 IBM Cognos 8 提供新名称。例如，假如具有如下 web 站点。

想要重建 IBM Cognos 来匹配这一相同的色彩方案。为此，首先可将 “corporate” 样式中的默认颜色映射到所要的颜色。

以下 HTML 页面主要采用以下三种颜色：

采用此色彩方案，将会用以下颜色来替换默认颜色，只有少数例外。

注意：当选定色彩方案时，尝试保持相同的颜色 accents，即将黑色与黑色匹配，浅色与浅色匹配。

以下部分展示了修改了 UI 的哪些部分，以及需要变更哪些文件来完成修改。本部分没有展示所有的参数，但是它给出了最常变更的项目。

重建 IBM Cognos Connection

所用的文件

<install location>/c8/webcontent/skins/my_style/portal/default.css
<install location>/c8/webcontent/skins/my_style/shared/banner.css
<install location>/c8/templates/ps/portal/system.xml

修改 Main Header：banner.css

背景颜色

.mainHeader1 
{	
	padding: 1px;
	background-color: #2d5d3d; 
	border-bottom: #2d5d3d 3px solid; 
	height:28px;
	width:100%;
}

栏目中标题颜色

.headerTitle 
{
	padding-left: 5px;
	font-weight: bold; 
	background-color: #2d5d3d;
	font-size: 75%;
	color: #ffffff;
	vertical-align: middle;
	white-space:nowrap;
}

标题与按钮之间的空白区域

.mainHeader1Middle
{
	width:100%;
	/* background-image: url(../shared/images/banner_middle.gif) */
	background-repeat: repeat-y;
}

修改 Portal Tabs：default.css

在 unselected 选项卡中

.tabNormal 
{
	padding-right: 20px; 
	padding-left: 20px; 
	font-size: 70%;
	text-align: center;
	background-color: #c8ddca;
	border-bottom:#999999 1px solid;
	border-top:#c8ddca 1px solid;
}

在 selected 选项卡中

.tabSelected
{
	padding-right: 20px;	 
	padding-left: 20px; 
	border-top:#999999 1px solid;
	font-weight: bold; 
	font-size: 70%;	 
	color: #ffffff;
	text-align: center;
	background-color:#8bb093;
}

在选项卡之间的空间

.tabBarContainer
{
	width: 100%;
	height: 20px;
	background-color:#c8ddca;
}

选项卡的背景

.mainHeader3 
{
	padding-top: 5px; 
	background-color: #c8ddca;
}

在选项卡旁边（在 corporate skin 中，旁边是图片。在示例中已将其移除。）

.tabLeftSelected 	
{	
	height:100%; 
	width:7px; 
	background-image:/* url(../shared/images/tab_selected_l.gif) */ ; 
	background-repeat: no-repeat; 
}
.tabRightSelected	
{	
	height:100%; 
	width:7px; 
	background-image:/* url(../shared/images/tab_selected_r.gif) */ ; 
	background-repeat: no-repeat;
}
.tabLeftNormal 		
{	
	height:95%; 
	width:6px; 
	background-image:/* url(../shared/images/tab_normal_l.gif) */ ; 
	background-repeat: no-repeat;	
	border-bottom:#999999 1px solid; 
}
.tabRightNormal		
{	
	height:95%; 
	width:6px; 
	background-image:/* url(../shared/images/tab_normal_r.gif) */ ; 
	background-repeat: no-repeat;	
	border-bottom:#999999 1px solid;
}

按钮

.tabMenuButtonNormal 
{
	border: #c8ddca 1px solid;
	padding:1px;
	cursor:pointer;
	background-color:#c8ddca;
}
.tabMenuButtonOver 
{
	border: #8bb093 1px solid;
	padding:1px;
	cursor:pointer;
	background-color:#8bb093;
}

未选定选项卡的字体颜色

.tabAnchor
{
	color: #2d5d3d;
}

修改路径：default.css

改变父节点的颜色。（这将变更了所有突出的文字。）

a 
{
	color: #2d5d3d;
}

子节点的颜色

.pathLeafNode 
{
	font-weight: bold; 
	color: #2d5d3d;
}

改变表颜色：default.css

表头背景颜色

.tableHeader 
{
	background-color: #8bb093;
}

header 标题（.tableSortTitle 改变了所有可排序的 header 名字。）

.tableTitle 
{
	font-weight: bold; 
	font-size: 70%; 
	color: #2d5d3d;
}
.tableSortTitle
{
	font-weight: bold; 
	color: #2d5d3d;
	text-decoration: none;
}

表中可选文本

a 
{
	color: #2d5d3d;
}

表中不可选文字

.tableText 
{
	font-size: 70%; 
	color: #2d5d3d;
}

Fly-out 菜单: default.css

text

.text 
{
	font-size: 70%; 
	color: #2d5d3d;
}

菜单与边框的背景

.flyOutMenu 
{
	border: #2d5d3d 1px solid; 
	font-weight: normal; 
	font-size: 100%; 
	overflow-x: hidden; 
	overflow: auto;
	background-color: #c8ddca;
}

悬停颜色

.menuItemOver 
{ 
	text-decoration:underline;
	cursor:pointer;
	color: #000000;
	height: 20px; 
	background-color: #8bb093;
}

链接的正常显示颜色。

.menuItemNormal 
{ 
	text-decoration:underline;
	cursor:pointer;
	color: #000000;
	height: 20px; 
	background-color: #c8ddca;
}

利用适当的 logo 来替代 IBM Cognos Connection 文字

增加企业自己的 logo：

将图片放到文件夹 <install location>/c8\webcontent\skins\my_style\branding 中。
在 /c8/template/ps/portal 中，利用 Notepad 或者 XML 编辑器来编辑 system.xml 文件。
搜索 “”。
注意这部分是注释掉的。取消注释，并为您的新样式增加以下部分：

<style styleFolderName="your_new_skin_name_here">
	<table style="background-color:#2d5d3d">
		<tr>
			<td><img src="../skins/classic/branding/my_logo.gif"/></td>
			<td class="headerTitle"
			  style="padding-right:2px;white-space:nowrap"></td>
		</tr>
	</table>				
</style>

注意：这是用于 my_logo.gif 的图片。

重启 IBM Cognos 8 服务来使这些变更生效。

最终结果

重建 Query Studio

所用文件

<install location>/c8/webcontent/skins/my_style/qs/ crn.css
<install location>/c8/webcontent /skins/my_style/portal/default.css
<install location>/c8/webcontent /skins/my_style/qs/QSRVCommonUI.css
<install location>/c8/webcontent /skins/my_style /shared/banner.css
<install location>/c8/webcontent /skins/my_style/prompting/QSReport.css

修改 Header：banner.css

展示标题

.headerTitle 
{
	background-color: #2d5d3d;
	padding-left: 5px;
	font-weight: bold;
	font-size: 75%;
	color: #ffffff;
	vertical-align: middle;
	white-space:nowrap;
}

在 Studio 名与纯色栏的中间部分

.mainHeader1Middle
{
	width:100%;
	background-image: /* url(../shared/images/banner_middle.gif) */ ;
	background-repeat: repeat-y;
}

纯色栏

.mainHeader1
{	
	padding: 1px;
	background-color: #2d5d3d;
	border-bottom: #2d5d3d 3px solid; 
	height:28px;
	width:100%;
}

修改 Header 按钮：CRN.css

未选定按钮的背景及边框

.headerButton
{
	border: #2d5d3d 1px solid;
	background-color: #2d5d3d;
	cursor:pointer;
	width: 22px;
}

悬停时的背景与底色

.headerButtonRollover
{
	border: 1px solid #ffffff;
	background-color: #2d5d3d;
	cursor:pointer;
	width: 22px;
}

更多帮助按钮的背景与悬停属性

.headerButtonDropDown
{
	border: #2d5d3d 1px solid;
	background-color: #2d5d3d;
	cursor: pointer;
	width: 3px;
}
.headerButtonDropDownRollover
{
	border: #ffffff 1px solid;
	background-color: #2d5d3d;
	cursor: pointer;
	width: 3px;
}

修改侧边菜单：QSRVCommonUI.css

菜单标题

.menuHeader {
	font-size: 70%;
	color: #2d5d3d;
	border-collapse: collapse;
	vertical-align: bottom;
	font-weight: bold;
	width:100%;
}

菜单选项

.menuItem,
.menuItemSpacer,
.menuItemSpacerTop {
	background-color: #8bb093;
	border: solid #2D5D3D;
	border-width: 0px 1px;
	border-collapse: collapse;
}

.menuItem
.menuAction {
	font-size: 70%;
	color: #2d5d3d;
	text-decoration: underline;
	cursor: pointer;
	cursor: hand;
}
.menuItemSelected {
	color: #2d5d3d;
	border-collapse: collapse;
	cursor: default;
	padding: 3px 10px;
	border: 1px solid #8bb093;
	height:20px;
	font-size: 70%;
	font-weight: bold;
}

控制 Data Tree Window

.menuContent,
.menuContentCollapsed {
	color: #336699;
	border: 1px solid #2d5d3d;
	padding: 3px;
}

信息窗口

.informationTitleHeader
{
	color: #2D5D3D;
	font-weight: bold;
	font-size: 70%;
}
.metaContent {
	background-color: #c8ddca;
	border: solid #2d5d3d;
	border-width: 0px 1px 1px;
	border-collapse: collapse;
	padding: 3px;
}

信息窗口头部：default.css

.dialogHeader
{
	border: #2D5D3D 1px solid;
	height: 24px;
	background-color: #8bb093;
}

修改 “Select and insert item…” 图片：QSReport.ccs

.startPageListColumnTitle
{
	padding: 3px 5px;
	border: 1px solid #2d5d3d;
	line-break: strict;
	background-color: #8bb093;
}
.startPageListColumn
{
	padding: 3px 5px;
	border-color: #2d5d3d;
	border-width: 0px 1px 1px;
	border-style: solid;
	line-break: strict;
	background-color: none;
}

修改 fly-out 窗体：CRN.css

文字容器
.menuItem_normal
{
	font-size: 70%;
	border-right: #ffffff 1px solid;
	padding-right: 1px;
	border-top: #ffffff 1px solid;
	padding-left: 1px;
	padding-bottom: 1px;
	border-left: #ffffff 1px solid;
	color: #2d5d3d;
	padding-top: 1px;
	border-bottom: #ffffff 1px solid;
	font-family: Tahoma;
	background-color: #ffffff;
	text-decoration: underline;
	cursor: pointer;
	cursor: hand;
}

悬停在 Text Container 上

.menuItem_hover
{
	font-size: 70%;
	border-right: #99aacc 1px solid;
	padding-right: 1px;
	border-top: #99aacc 1px solid;
	padding-left: 1px;
	padding-bottom: 1px;
	border-left: #99aacc 1px solid;
	color: 2d5d3d;
	padding-top: 1px;
	border-bottom: #99aacc 1px solid;
	font-family: Tahoma;
	background-color: #c8ddca;
	text-decoration: underline;
	cursor: pointer;
	cursor: hand;
}

回页首

Re-branding Analysis Studio

所采用文件

<install location>/c8/webcontent/skins/my_style/ans/background.css
<install location>/c8/webcontent/skins/my_style/ans/explore.css

修改菜单栏：background.css

背景，边框

.menubar
{
	position: absolute;
	overflow: hidden;
	padding: 0px;
	background-color: #2d5d3d;
	border-bottom: 3px solid #2d5d3d;
	border-top: 1px solid #2d5d3d;
	border-right: 1px solid #2d5d3d;
}
.menubar_content_div
{
	background-image: url
		(../../../skins/corporate/ans/images/title_bar_graphic_studios.gif);
	padding: 2px;
	border: 0px;
	width: 582px;	
}

修改菜单项目悬停与按下设置

.menu_hover
{
	background-color: #8bb093;
	border: 1px solid #2d5d3d;
	color:#ffffff;
	padding: 2px;
	padding-left: 5px;
	padding-right: 5px;

}
.menu_pressed
{
	padding: 2px;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #8cc092;
	border: 1px solid #2d5d3d;
	color:#ffffff;
}

修改按钮栏：background.css

背景颜色

.main_toolbar
{
	position: absolute;
	white-space: nowrap;
	padding: 2px;
	background-color: #8bb093;
	border-bottom: 1px solid #2d5d3d;
	border-right: 1px solid #2d5d3d;
	overflow: hidden;
}

按钮

.toolbar_dropdown_button_pressed
{
	border : 1px solid #8bb093;
	background-color: #8bb093;
	padding : 1px;	
	/* pointer for standards compliant browsers, hand for ie 5.5*/
	cursor: pointer;
	cursor: hand;	
	display: inline;
}
toolbar_arrow_combo_pressed
{
	background-color: #8bb092;
	border : 1px solid #8bb092;
	display: inline-block;
	padding: 1px;
	cursor: pointer;
	cursor: hand;
}
toolbar_arrow_combo_hover
{
	border : 1px solid #2d5d3d;
	background-color: #c8ddca;
}
toolbar_arrow_combo_pressed
{
	border : 1px solid #2d5d3d;
	background-color: #c8ddca;
}

控制选项卡：background.css

边框，字体

.tab_dummy_td_none_selected
{
	text-align: left;
	color: #0000CC;
	padding: 3px 15px 3px 15px;
	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 #2d5d3d;
	border-bottom: 1px solid #2d5d3d;
	border-left: 1px solid #2d5d3d;
	border-right: 1px solid #2d5d3d;
}
.tab_td_none_selected
{
	border-top : 1px solid #2d5d3d;
}
.top_tab_td_none_selected
{
	border-bottom : 1px solid #2d5d3d;
}
.tab_right_border
{
	border-right: 1px solid #2d5d3d;
}
.tab_left_border
{
	border-left: 1px solid #2d5d3d;
}

控制 selected 选项卡

.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: #336699;	
	background-color: #c8ddca;
	padding: 3px 15px 3px 15px;
	border : 1px solid #2d5d3d;

non-selected 选项卡（这控制了 Insertable Objects 面板的背景）

.pane
{
	text-align: left;
	position:absolute;
	padding: 3px;
	margin: 0px 0px 0px 0px;
	background-color: #c8ddca;
	border: 1px solid;
	border-color: #2d5d3d #2d5d3d #2d5d3d #2d5d3d;		
}

控制属性面板：Multiple .css files

按钮：explore.css

.dialogbuttons,.blockproppanebutton
{
	border-top: 1px solid #2d5d3d;
	border-right: 1px solid #2d5d3d;
	border-left: 1px solid #2d5d3d;
	border-bottom: 1px solid #2d5d3d;
	background-color: #8bb093;
	width: 100%;
	padding: 2px 3px 2px 3px;
}
.dialogButton_hover
{
	background-color: #2d5d3d;
}

容器头部：background.css

.ToggleBar,.DlgTitleBar
{
	overflow: hidden;
	table-layout: fixed;
	white-space:nowrap;
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;		
	color: #2d5d3d;	
	background-color: #8bb093;
	padding: 3px;
	border : 1px solid;
	border-color : #2d5d3d;
}

属性容器：background.css

.BlockPropertiesContainer
{
	border-left: 1px solid #2d5d3d;
	border-right: 1px solid #2d5d3d;
	background-color: #c8ddca;
	overflow: auto;
}

信息面板：background.css

.InfoContainer
{
	background-color: #c8ddca;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color : #2d5d3d; 	
	overflow: auto;
	overflow-x: hidden;
}

信息面板：background.css

.InfoContainer
{
	background-color: #c8ddca;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color : #2d5d3d; 	
	overflow: auto;
	overflow-x: hidden;
}

上下文菜单：background.css

背景

.contextMenu_body, .contextMenu_body_NS
{
	background-color: #c8ddca;
	padding: 3px;
	border: 1px solid #2d5d3d;
	font-size: 8pt;
	position: absolute;

	visibility: visible;
	left: -1000px;
	cursor: default;
	display: block;
	overflow-y: auto;
}

非高亮显示的链接

contextMenu_item_default 
{
	font-size: 8pt;
	padding: 1px 0px 1px 3px;
	border: 1px solid #c8ddca;
	white-space: nowrap;
	text-align: left;
	cursor: default;
	text-decoration: underline;
	background-color: c8ddca;
	color: #2d5d3d;	
}

悬停菜单

contextMenu_item_with_submenu_over 
{
	cursor: pointer;
	cursor: hand;
	background-color: #8bb093;
	border: 1px solid #;
}

控制 Insertable Objects 窗体：多 css 文件

header：background.css

.ins_obj_title_bar{
	overflow: hidden;
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;		
	color: #2d5d3d;	
	background-color: #c8ddca;
	padding: 3px;
	border : 1px solid;
	border-color : #2d5d3d;
}

边框：explore.css

.mdmetadata, .analysis_item
{
	color: #0000CC;
	left: 0px;
	position:absolute;
	font-size: 70%;
	font-family: Tahoma;
	padding: 3px 3px 3px 3px;
	overflow: auto;
	white-space: nowrap;
	vertical-align : middle;
	border-left: 1px solid #2d5d3d;
	border-right: 1px solid #2d5d3d;
}

Show/Hide 按钮：explore.css

.hide_show		
{	
	background-color: #c8ddca;
	border : 1px solid;
	border-color : #2d5d3d #2d5d3d #2d5d3d #2d5d3d;		
	position: absolute;
}
.hide_show_hover
{
	background-color: #8bb093;
}

控制 axis 栏：explore.css

axis 标签

.axis_label, .rules_label
{
	padding-left: 4px;
	white-space: nowrap;
	color: #2d5d3d;
	font-size: 60%;
}

控制 crosstab 拖动区域：explore.css

列单元

.ColMemberCellTemplate
{
	border-collapse: collapse;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #2d5d3d;
	text-align: center;
	font-weight: bold;
	color: #2d5d3d;
	background-color: #c8ddca;
	white-space: nowrap;
	cursor: default;
	padding: 5px 7px 5px 5px;
}

行单元

.RowMemberCellTemplate
{
	border-collapse: collapse;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color: #2d5d3d;
	text-align: center;
	font-weight: bold;
	color: #2d5d3d;
	background-color: #c8ddca;
	white-space: nowrap;
	cursor: default;
	padding: 5px 7px 5px 5px;
}

最终结果

重建 Report Studio

所采用文件

<install location>/c8/webcontent/skins/my_style/pat/skin.css
<install location>/c8/webcontent/skins/my_style/hal/hal_skin_corportate.css

注意：在这些 css 文件中，针对大量样式条目来对很多部分进行分组。

控制大部分背景面板：skin.css

#idToolboxTabPanels_Pane,
#idToolboxTabBox_Pane,
#idProperties_Pane,
#idDescription_Pane,
.clsPane_Toolbox_active,
.clsPane_Toolbox_inactive,
.clsPane_Properties_inactive,
.clsPane_Workarea_inactive,
#idExplorerBar,
.clsBigButtonBar,
.clsQueryViewListViewHeader,
.clsQueryTabBackground,
DIV.clsFontComboBoxGroupListItem,
TD.clsGridHeader
{
	background-color: #c8ddca;
}

控制 welcome，所有按钮、所选选项卡颜色、以及页面 Explorer 列：hal_skin_corporate.css

BODY,
BUTTON,
DIV.clsMenubar,
DIV.clsToolbar,
DIV.clsDlgToolbar,
TD.clsMenubarItem,
TD.clsToolbarButton,
.clsMenuPopup,
.clsPopupDialog,
.clsMenuItem,
TABLE.clsModalDlg,
BUTTON.clsDlgButton,
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.clsListViewColumnHeader
{
	background-color: #8bb093;
}

控制 headers、按钮悬停颜色：hal_skin_corporate.css

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,
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_down
{
	background-color: #2d5d3d;
}

控制无效选项卡与悬停：hal_skin_corporate.css

TD.clsTabBox_inactive,
TD.clsBottomTabBox_inactive,
TD.clsTabBox_inactive_hover,
TD.clsBottomTabBox_inactive_hover
{
	color: #0000CC;
	text-decoration: underline;
	background-color: #c8ddca;
}

控制工具栏项目：hal_skin_corporate.css

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.clsListViewColumnHeader
{
	border-top: solid #8bb093 1px;
	border-left: solid #8bb093 1px;
	border-right: solid #8bb093 1px;
	border-bottom: solid #8bb093 1px;
}

HR,
BUTTON.clsCoolButton,
TD.clsToolbarButton,
BUTTON.clsBigCoolButton,
TD.clsToolbarButton,
.clsListItem_colorCell_normal
{
	border: 1px solid #8bb093;
}

控制菜单栏：hal_skin_corporate.css

DIV.clsMenubar,
TD.clsMenubarItem
{
	background-color: #c8ddca;
}

TD.clsMenubarItem,
TD.clsMenubarItem_up,
TD.clsMenubarItem_down
{
	font-weight: #2d5d3d;
}

TD.clsMenubarItem
{
	color: #2d5d3d;
	border-top: 1px solid #c8ddca;
	border-left: 1px solid #c8ddca;
	border-right: 1px solid #c8ddca;
	border-bottom: 1px solid #c8ddca;
}
TD.clsMenubarItemLast
{
	/* background-image: url(images/menubar_background.gif); */
	background-repeat: no-repeat;
	background-position: right;
}

DIV.clsMenubar
{
	border-top: 1px solid /* #E7E7E7 */ ;
	border-right: 1px solid /* #E7E7E7 */ ;
	border-bottom: 2px solid /* #DEAC77*/ ;
	border-left: 1px solid /* #E7E7E7 */ ;
}
DIV.clsToolbar
{
	border-top: 1px solid /* #DEAC77*/ ;
}

最终结果

重建 Event Studio

所采用文件

<install location>/c8/webcontent /skins/my_style/portal/default.css
<install location>/c8/webcontent /skins/my_style/prompting/promptCommon.css
<install location>/c8/webcontent /skins/my_style/ags/ags.css
<install location>/c8/webcontent /skins/my_style/ags/crn.css

控制菜单栏：crn.css

背景及菜单栏图片

.menuBar
{
	background-color: c8ddca;
	background-image: /* url(images/title_bar_graphic_studios.gif) */ ;
	background-repeat: no-repeat;
	background-position: left bottom;
	border-bottom: #2d5d3d 3px solid;
	border-left: #e7e7e7 0px solid;
	border-top: #e7e7e7 1px solid;
	border-right: #e7e7e7 1px solid;
	height: 25px;
	width:100%;
	padding: 1px
}

菜单字体

.menuTitle_normal
{
	font-size: 70%;
	padding: 3px;
	/*background-color: #336699;*/
	color:#2d5d3d;
	font-family: Tahoma;
	font-weight: bold;
}

菜单悬停功能

.menuTitle_hover
{
	font-size: 70%;
	padding: 2px 3px 2px 3px;
	background-color: #8bb093;
	border: 0px solid #2d5d3d;
	color: #134679;
	font-family: Tahoma;
	font-weight: bold;
	cursor: hand;
}
.menuTitle_pressed
{
	padding: 2px;
	background-color: #8bb093;
	border: 1px solid #2d5d3d;
	color: #134679;
	font-family: Tahoma;
	font-weight: bold;
	cursor: hand;
}

控制按钮栏：crn.css

背景

.toolbar_studio
{
	padding: 2px;
	background-color: #c8ddca;
	border-bottom: 1px solid #cccccc;
}
.toolbarImageNormal
{
	border : 1px solid #f3f3f3;
	background-color: #c8ddca;
	padding : 1px;	
}

具有向下箭头的按钮

.toolbarDropdownImageNormal_studio
{
	border : 1px solid #c8ddca;
	height:20px;
	width:30px;
	background-color: #c8ddca;
	padding: 0px;
}
.toolbarDropdownImageOver_studio
{
	border : 1px solid #2d5d3d;
	height:20px;
	width:30px;
	background-color: #8bb093;
	padding: 0px;
	cursor: pointer;
	cursor: hand;
}
.dropDownArrow 
{
	border : 1px solid #c8ddca;
	height:20px;
	width:11px;
	background-color: #c8ddca;
	padding: 0px;
	margin:0px;
	cursor: pointer;
	cursor: hand;
	align:center
}
.dropDownArrowOver 
{
	border : 1px solid #2d5d3d;
	height:20px;
	width:11px;
	background-color: #8bb093;
	padding: 0px;
	margin:0px;
	cursor: pointer;
	cursor: hand
	align:center
}

Fly out 窗口

.menuItem_normal
{
	font-size: 70%;
	background-color: 8bb093;
	border: 1px solid 8bb093;
	color:blue;
	text-decoration: underline;
	cursor: pointer;
	cursor: hand;
	font-family: Tahoma;
	font-weight: normal;
}
.menuItem_hover
{
	font-size: 70%;
	background-color: #8bb093;
	border: 0px solid #2d5d3d;
	color:blue;
	text-decoration: underline;
	cursor: pointer;
	cursor: hand;
	font-family: Tahoma;
	font-weight: normal;
}
.menuItem_pressed
{
	font-size: 70%;
	background-color: #8bb093;
	border: 1px solid #2d5d3d;
	color:blue;
	text-decoration: underline;
	cursor: pointer;
	cursor: hand;
	font-family: Tahoma;
	font-weight: normal;
	padding: 1px;
}
.menuContainer
{
	background-color: #8bb093;
	border: 1px solid #336699;
	padding: 2px;
}

按钮

.toolbarImageNormal_studio
{
	border : 1px solid #c8ddca;
	height:20px;
	width:20px;
	background-color: #c8ddca;
	padding: 0px;
}
.toolbarImageOver_studio
{
	border : 1px solid #2d5d3d;
	height:20px;
	width:20px;
	background-color: #8bb093;
	padding: 0px;
	cursor: pointer;
	cursor: hand;
}

控制 “I want to…” 面板：crn.css

字体

.formText
{
	font-size: 70%;
	color: #2d5d3d;
}
.task_inactive
{
	font-family: Tahoma;
    font-size: 70%;
	color: #8bb093;
	text-decoration: underline;
}
.task_active
{
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;
	color: #2d5d3d;
}

面板的主体

.area		
{	
	background-color: #c8ddca;
	padding: 0px;
	border-top : 0px solid;
	border-bottom : 1px solid;
	border-left : 1px solid;
	border-right : 1px solid;
	border-color : #c8ddca; 	
}

面板的头部

.area_header	
{	
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;		
	color: #f3f3f3;	
	background-color: #2d5d3d;
	padding: 3px;
	border : 1px solid;
	border-color : #2d5d3d;
}

Show/hide 按钮（双下箭头）

.hide_show_taskspane		
{	
	background-color: #c8ddca;
	border : 1px solid;
	border-color : #c8ddca;
}
.hide_show_hover		
{	
	background-color: #c8ddca;
	border : 1px solid;
	border-color : #c8ddca;			
}
.hide_show_pressed		
{	
	background-color: #c8ddca;
	border : 1px solid;
	border-color : #c8ddca;		
}

控制 Insertable Objects 面板：crn.css

头部

.area_header	
{	
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;		
	color: #f3f3f3;	
	background-color: #2d5d3d;
	padding: 3px;
	border : 1px solid;
	border-color : #2d5d3d;
}

选项卡

.insertableItemsPaneBorder{
    background-color: #8bb093 ;
}

文本：promptCommon.css

.clsTreeNode_unselected
{
	cursor: pointer;
	cursor: hand;
	margin: 0px;
	padding: 0px;
	background-color: #c8ddca;
	color: #000000;
	vertical-align: middle;
}
.clsTreeNode_hover
{
	cursor: pointer;
	cursor: hand;
	margin: 0px;
	padding: 0px;
	color: #000000;
	background-color: #8bb093;
	vertical-align: middle;
}

背景及边框：ags.css

.treeBorder {
	border-top: 0px solid;
	border-bottom: 0px solid;
	border-left: 1px solid;
	border-right: 1px solid;
	border-color: #2d5d3d; 	
	background-color: c8ddca;
}

Descision 栏：crn.css

任务

.item
{
	background-color: #c8ddca;
	border : 1px solid;
	border-color : #8bb093;
	
	padding-bottom: 1px;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 1px;
}
.item_active
{
	background-color: #c8ddca;
	border : 2px solid;
	border-color: #2d5d3d;
	
	padding-bottom: 0px;
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 0px;
}

修改文本：crn.css

.group_label 
{
	font-family : Tahoma; 
	font-size : 70%; 
	font-weight : normal; 
	color : #2d5d3d;
	padding : 3px; 
}
.item_label_active		
{	
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;		
	color: #2d5d3d;
}
.item_label 
{
	font-family : Tahoma; 
	font-size : 70%; 
	font-weight : normal; 
	color : #2d5d3d;
}

页面标签与文本：crn.css

.page_label
{
	font-family: Tahoma
	font-size: 110%;
	color: #2d5d3d;
	font-weight: bold;
}
.text2
{
	font-family: Tahoma;
	font-size: 70%;
	color: #2d5d3d;
}

选项卡栏：多个

控制 Hyperlink 文本：crn.css

a
{ 
	font-family: Tahoma;
	color: #2d5d3d;
	text-decoration: underline;
}

Default.css

.dialogHintText 
{
	font-size: 70%; 
	color: #2d5d3d;	
}
.tabLabel 
{
	font-weight: bold; 
	font-size: 70%; 
	color: #2d5d3d;
}

表达和信息窗口：default.css

文本

.formLabel 
{
	font-weight: bold; 
	font-size: 70%; 
	color: #2d5d3d;
}

Ags.css

TEXTAREA.hintText_active
{
    background-position: center center;
    background-image: url(images/arrow_template.gif);
    COLOR: #2d5d3d;
    background-repeat: no-repeat
}

.infoErrorTabText
{	
	font-family: Tahoma;
	margin: 2px;
	font-size: 70%;
	width: 100%;
	color: 2d5d3d;
}

.infoErrorTabTextBold
{
	font-family: Tahoma;
	font-weight: bold;
	margin: 2px;
	font-size: 70%;
	width: 100%;
	color: 2d5d3d;
}

最终结果

重建 IBM Cognos Administration

自定义 IBM Cognos Administration 是不同的技术。该接口采用分段方法与在修改 IBM Cognos Connection 时采用的 .css 文件混合。

关于 Fragments 的更多信息，请下载文档 IBM Cognos Fragment Framework。

所采用文件

<install location>/c8/webapps/p2pd/WEB-INF/fragments/styles/skins/corporate.xml

利用更改色彩方案的方法，来变更主调色板。这将会更改大多数 Administration UI。

变更调色板。 - cogadmin.xml

<palette>
		<!-- basic b/w  -->
		<color name="black">#000000</color>
		<color name="white">#ffffff</color>
		<!-- 5 shades of colours -->
		<color name="color.lighter">#c8ddca</color>
		<color name="color.light">#c8ddca</color>
		<color name="color.medium">#8bb093</color>
		<color name="color.normal">#8bb093</color>
		<color name="color.dark">#2d5d3d</color>
		<color name="color.darker">#2d5d3d</color>
		<!-- 4 shades of gray -->
		<color name="gray.light">#c8ddca</color>
		<color name="gray.medium">#8bb093</color>
		<color name="gray.normal">#8bb093</color>
		<color name="gray.dark">#2d5d3d</color>
		<!-- others colours -->
		<color name="tooltip">#2d5d3d</color>
		<color name="hyperlink">#2d5d3d</color>
		<color name="special1">#2d5d3d</color>
		<color name="special2">#2d5d3d</color>
	</palette>

最终结果

正如您所看到的，只改变了几行就改变了大多数样式。但是，还有一些地方需要更改。

Banner – cogadmin.xml

<!-- Main -->
	<class name=".cogstyle-header-main">
		<set name="background-repeat">no-repeat</set>
		<set name="background-position">left top</set>
		<set name="border-bottom">
			<color name="headerBottomBorder"/> 3px solid</set>
	</class>
	<class name=".cogstyle-header-left-section">
		<set name="background-color">
			<color name="headerLeftBackground"/></set>
	</class>
	<class name=".cogstyle-header-middle-section">
		<set name="background-image"> 
			/* url($WEB$/skins/$SKIN$/shared/images/banner_middle.gif) */ 
			</set  >
		<set name="background-repeat">repeat-y</set>
		<set name="background-position">left top</set>
	</class>
	<class name=".cogstyle-header-middle-section-spacer">
		<set name="width">45px</set>
	</class>
	<class name=".cogstyle-header-logo">

	<class name=".cogstyle-fragmentHeader-titleText">
		<set name="font-weight">bold</set>
		<set name="color">#2d5d3d</set>
	</class>

表 – cogadmin.xml

<!-- tables -->
		<color name="tableText" paletteColor="black"/>
		<color name="tableTextHeader" paletteColor="color.dark"/>
		<color name="tableBackground" paletteColor="white"/>
		<color name="tableBackgroundHeader" paletteColor="gray.medium"/>
		<color name="tableBackgroundSelected" paletteColor="color.normal"/>
		<color name="tableBackgroundAlternate" paletteColor="gray.light"/>
		<color name="tableBackgroundSubHeader" paletteColor="color.light"/>

Horizontal 选项卡 – cogadmin.xml

<!-- horizontal tabs -->
		<color name="htabsScrollButton" paletteColor="white"/>
		<color name="htabsScrollButtonBorder" paletteColor="gray.dark"/>
		<color name="htabsScrollButtonHover" paletteColor="color.lighter"/>
		<color name="htabsScrollButtonDisabled" paletteColor="white"/>
		<color name="htabsScrollButtonBorderDisabled" paletteColor="gray.normal"/>

		<color name="htabsBarBackground" paletteColor="gray.light"/>
		<color name="htabsText" paletteColor="hyperlink"/>
		<color name="htabsBorder" paletteColor="color.light"/>
		<color name="htabsBackground" paletteColor="white"/>
		<color name="htabsTextActive" paletteColor="color.dark"/>
		<color name="htabsBorderActive" paletteColor="gray.dark"/>
		<color name="htabsBackgroundActive" paletteColor="grey.light"/>
		<color name="htabsAltBarBackground" paletteColor="gray.light"/>
		<color name="htabsAltBorder" paletteColor="white"/>
		<color name="htabsAltText" paletteColor="hyperlink"/>
		<color name="htabsAltBackground" paletteColor="gray.light"/>
		<color name="htabsAltTextActive" paletteColor="color.normal"/>
		<color name="htabsAltBackgroundActive" paletteColor="white"/>

Security and Configuration 选项卡中的表

通过与控制 Banner 表相同的 .css 文件来控制这些选项卡中的表。因此，如果已经修改了 IBM Cognos connection，那么就会看到相同的样式。

参见 Re-branding IBM Cognos Connection 部分中的 Changing the table colour area。

最终结果

参考资料

学习

通过 developerWorks Information Management 专区：在这里可以学到更多关于 Information Management 的知识。还可以找到技术文档、how-to 文章、培训、下载、产品信息等。
通过 Information Management 专区 Cognos BI 专题，了解更多有关 Cognos BI 专题的产品和技术资源。
通过商业智能入门以及 Cognos 产品介绍，了解商业智能的基本概念和相关技术，并介绍了 Cognos 商业智能相关的产品。
关于 Cognos 的安装，请参照 Cognos 8 BI Server 在 Linux 上的安装及与 IHS、WAS、DB2 的配置，学习 Cognos 详细的安装过程。
通过访问 IBM Cognos 8 Business Intelligence，学习 IBM Cognos 8 Business Intelligence 产品的相关知识。
随时关注 developerWorks 技术活动和网络广播。

获得产品和技术

在线试用 IBM Cognos BI 试用版软件，了解 IBM Cognos BI 商业智能解决方案的最新版本新功能。
下载 IBM Cognos Express V9 试用版软件，了解 IBM 专为中型企业定制的集成商业智能和计划解决方案。
下载免费的 IBM Information Management 试用版软件，了解 IBM Information Management 软件的最新版本和特性。

讨论