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

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

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

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

简介

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

IBM Cognos Connection 自定义示例

理解在 Styles 中使用的 Color Scheme

利用 “Corporate” Style 的默认 Colors

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

十六进制颜色调色板

了解十六进制颜色

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

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

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

IBM Cognos Connection

屏幕截图展示具有调色板的 IBM Cognos Connection UI

Query Studio

屏幕截图展示了具有调色板的 IBM Query Studio UI

Analysis Studio

屏幕截图展示了具有调色板的 IBM Analysis Studio UI

自定义 IBM Cognos 8 UI

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

导入新样式

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

导入新样式:

  1. 复制现有样式,作为模板。所有的样式位于 <install location>/c8/webcontent/skins 目录中。复制 “Corporate” 文件夹,并将其放入相同的目录中。对其重新命名。
  2. 登入 Cognos Connection,并加载 IBM Cognos Administration
  3. 单击 “Configuration” 选项卡,出现 ‘Styles
    IBM Cognos Administration 展示了配置选项卡的内容
  4. 在本页中,将会看到已有样式清单。单击 “New Style” 图标
    样式窗体
  5. 这将会打开 “New Style Wizard”。为该样式提供一个名称。单击 Next。
    指定名字与描述 - New style wizard
  6. 在 “Style Resource Location” 中提供了确切的文件夹名。如果想要预览该样式,可利用预览页面来查看。以下展示了此预览页面的位置。单击 Finish。
    指定风格位置与预览资源 - New style wizard
  7. 新的样式将出现在清单中。
    具有新增加样式的 Style 窗口
  8. 一旦导入了样式,可在 ‘My Preferences’ 下拉清单中查看该样式。
    具有所选新样式的 Set preferance 窗口

使用 IBM Cognos 8 Styles 的文件

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

IBM Cognos 组件文件与位置图片
IBM Cognos Connectionskins/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 站点。

示例客户 web 页面

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

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

十六进制颜色 - #2d5c3d、c8ddca、8bb093

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

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

Colour groupings

以下部分展示了修改了 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

IBM Cognos Connection Banner

背景颜色

.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

IBM Cognos Connection 门户选项卡

在 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

IBM Cognos Connection bread crumbs

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

a 
{
	color: #2d5d3d;
}

子节点的颜色

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

改变表颜色:default.css

IBM Cognos Connection 包与报告清单

表头背景颜色

.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

IBM Cognos Connection Flyout Menus

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:

  1. 将图片放到文件夹 <install location>/c8\webcontent\skins\my_style\branding 中。
  2. 在 /c8/template/ps/portal 中,利用 Notepad 或者 XML 编辑器来编辑 system.xml 文件。
  3. 搜索 “<!-- Custom OEM headers -->”。
  4. 注意这部分是注释掉的。取消注释,并为您的新样式增加以下部分:
<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 服务来使这些变更生效。

最终结果

IBM Cognos Connection Final look

重建 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

Query Studio banner

展示标题

.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

Query Studio banner 按钮

未选定按钮的背景及边框

.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

Query Studio left side menu

菜单标题

.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

Query Studio Select 与插入项目图片
.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

Query Studio flyout 菜单
文字容器
.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;
}
Query Studio 最终结果

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

Analysis Studio Menu 栏

背景,边框

.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

Analysis Studio 按钮栏

背景颜色

.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

Analysis Studio 选项卡

边框,字体

.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

Analysis Studio 信息框
.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 文件

Analysis Studio Insertable 对象

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

Analysis Studio Show hide 按钮
.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

Analysis Studio crostab 拖动区域

列单元

.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;
}

最终结果

Analysis Studio 最终结果

重建 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

Report Studio 展示了背景将会变更的区域
#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

Report Studio 面板头部
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

Report Studio 选项卡
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

Report Studio 工具栏按钮
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

Report Studio 菜单栏
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*/ ;
}

最终结果

Report Studio 最终结果

重建 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

Event Studio menu bar

背景及菜单栏图片

.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

Event Studio 按钮栏

背景

.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

I want to... 面板

字体

.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

Event Studio Inserable Objects

头部

.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

Event Studio descision 栏

任务

.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;
}

选项卡栏:多个

Event Studio 选项卡栏

控制 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;
}

最终结果

Event Studio 最终结果

重建 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>

最终结果

IBM Cognos Administration

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

Banner – cogadmin.xml

IBM Cognos Administration banner
<!-- 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

IBM Cognos Administration entries table
<!-- 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

IBM Cognos Administration tabs
<!-- 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

最终结果

IBM Cognos Administration 最终结果

参考资料

学习

获得产品和技术

讨论

  • 参与 developerWorks 博客 并加入 developerWorks 中文社区,developerWorks 社区是一个面向全球 IT 专业人员,可以提供博客、书签、wiki、群组、联系、共享和协作等社区功能的专业社交网络社区。

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

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

选择您的昵称



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

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

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


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


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Information Management
ArticleID=677428
ArticleTitle=IBM Cognos 最佳实践: 自定义 IBM Cognos 8.4.x UI
publish-date=07222011