博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

IBM Cognos BI 最佳实践: 定制 IBM Cognos 8 UI

Posted on 2011-07-15 09:33  徐正柱-  阅读(1014)  评论(0编辑  收藏  举报

 

1. 简介

本文档为在 IBM Cognos 8 中创建定制风格(或 “皮肤”)提供一些技巧。本文档概述了在 IBM Cognos 8 中创建皮肤涉及到的概念、颜色模式和文件。此外,还提供了一些任务示例,以更好地演示创建定制风格需要进行的所有更改。本文档提供了两个例子;一个例子演示如何使用 find-and­replace 技术快速地重新修改 IBM Cognos 8 的风格以适合您的企业的风格,另一个例子介绍了许多不同参数,并展示如何通过调整这些参数改变界面。附录提供了一个常见参数列表。本文档不提供关于如何定制现有报告风格的说明。


图 1. IBM Cognos 8 UI 示例
图 1. IBM Cognos 8 UI 示例


2. 理解各种风格中使用的颜色模式

“Corporate”风格的默认颜色

了解默认颜色模式让您能够根据自己想要的风格匹配默认颜色。所有 IBM Cognos 组件都严格遵循相同的颜色模式。下图列出了“Corporate ”风格预定义的大部分颜色。一些 IBM Cognos 组件可能经常会使用未在下图中给出的颜色。


图 2. IBM Cognos 8 UI 常用颜色
图 2. IBM Cognos 8 UI 常用颜色

理解十六进制颜色

挑选颜色的最好方法是进入 Web 站点并将它截屏下来放到 Paint Shop Pro (PSP) 中。然后使用 paint dropper 工具找出颜色的十六进制值,方法为单击颜色并在右边面板双击该颜色。 

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

下图提供的例子展示了默认的“corporate ”风格使用的颜色模式。可以将它用作参照确定如何将您自己的颜色与预定义的颜色匹配。


图 3. IBM Cognos Connection
图 3. IBM Cognos Connection


图 4. Query Studio
图 4. Query Studio


图 5. Analysis Studio
图 5. Analysis Studio


3. 定制 IBM Cognos 8 UI

IBM Cognos 8 提供为所有 IBM Cognos 8 UI 控制颜色的 CSS 文件。您可以通过修改相应的 CSS 文件中的参数来定制 UI 。

导入新风格

在创建新的风格之前,您必须先导入一个风格。导入新风格的步骤为:

1. 复制一个现有的风格当做模板使用。所有风格都在 <install location>/c8/webcontent/skins 目录下。复制“Corporate ”文件夹并将其放到该目录下,然后重命名它。

2. 登录 IBM Cognos Connection ,单击“Tools ”菜单并选择 Portal Administration 。

3. 单击“Styles ”选项卡。

4. 在这个页面中,您将看到一个关于所有现有风格的列表。单击“New Styles ”图表。


图 6. 所有现有风格的列表
图 6. 所有现有风格的列表

5. 这将打开一个“New Style Wizard ”。为风格命名。

6. 在“Style Location Name ”下提供准确的文件夹名。如果您要预览风格可以使用预览页。下面给出了预览页的位置。


图 7. 预览页的位置
图 7. 预览页的位置

7. 导入了风格之后,您就可以在首选项中的下拉列表中查看它。


图 8. 查看导入的风格
图 8. 查看导入的风格

IBM Cognos 8 风格使用的文件

跨所有 IBM Cognos 组件修改风格所需的全部文件都可以在我们新创建的“my_style ”文件夹下找到; <install location>/c8/webcontent/skins/my_style 。

IBM Cognos Component Directory Files Images
IBM Cognos Connection /skins/my_style/portal default.css /skins/my_style/portal/images/skins/my_style/branding
Welcome Page /skins/my_style/portal default.css /skins/my_style/portal/images/skins/my_style/branding
Report Studio /skins/my_style/pat skin.css /skins/my_style/pat/images
Analysis Studio /skins/my_style/ans background.css /skins/my_style/ans/images
explore.css
scrollbarstyle.css
Query Studio /skins/my_style/qs crn.css /skins/my_style/qs/images
QSRVCommonUI.css
Event Studio /skins/my_style/ags ags.css /skins/my_style/ags/images
crn.css
Metrics Manager /skins/my_style/cmm default.css /skins/my_style/cmm/images
admin_styles.css /skins/my_style/cmm/presentation/images

System.xml – system.xml 文件(< 安装位置 >\c8\templates\ps\portal 目录)用于修改功能或隐藏用户界面的特定部分。该文件中的大部分参数适用于所有用户。

更改文本、字体和图像

更改组件名和文本消息 – 您可以更改 IBM Cognos 8 组件的名称并修改附带的文本消息,方法为在文本编辑器中打开相关的消息文件,然后对文本字符串执行搜索替换。消息文件在 c8_location/msgsdk 目录下。要让修改生效,必须重新启动 IBM Cognos 服务。

更改 IBM Cognos 8 的字体 – 您可以通过修改 <install-location>/c8/webcontent/skins/my_style/fonts.css 文件中的 font-family 列表来更改 IBM Cognos 8 中使用的字体。根据您想要的风格修改 fonts.css 文件。例如,我们可以将在所有 HTML 界面上使用的默认字体(Report Studio 除外)更改为适合显示亚洲国家字符的字体。在文本编辑器中打开文件 fonts.css ,注释掉将 Tahoma 显示为 font-family 列表的第一项的部分,然后从更适合 Unicode 需求的条目中删除注释。

更改 IBM Cognos 图像 – 所有图像都在 style 目录下。上表显示了各个组件的所有图像的位置。更改图像的位置非常简单,只需要将您使用的定制图像放到该目录下并使用相同的文件名。


4. 示例 1 — 快速重新修改 IBM Cognos 8 的风格

您可以快速修改 IBM Cognos 8 的风格。首先,将默认颜色修改成您想要的颜色,然后在适当的 CSS 文件中替换这些颜色的所有实例。例如,假如您的 Web 站点如下所示。


图 9. 示例 Web 站点
图 9. 示例 Web 站点

您想要重新修改 IBM Cognos 的风格以搭配该颜色主题。为此,您首先要将“corporate ”风格中的默认颜色映射到我们想要使用的颜色。

下面的 HTML 页面主要使用以下 3 种颜色:


图 10. 示例站点使用的 3 种颜色
图 10. 示例站点使用的 3 种颜色

使用这种颜色模式时,您将使用以下颜色替换默认的颜色(有少量没有替换)。注意:选择颜色模式时,要尝试保持相同的颜色浓度,比如用浓颜色匹配浓颜色,用淡颜色匹配淡颜色。


图 11. 示例站点的颜色匹配
图 11. 示例站点的颜色匹配

4.1 重新塑造 IBM Cognos Connection

使用的文件

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

查找替换

在 default.css 文件中查找并替换上图中出现的颜色。保存并关闭该文件。

其他配置变化

分别修改下面的每个参数:

1. 修改 IBM Cognos Connection 标题:


图 12. 修改 IBM Cognos Connection 标题
图 12. 修改 IBM Cognos Connection 标题

2. 修改 Portal 选项卡


图 13. 修改 Portal 选项卡
图 13. 修改 Portal 选项卡

3. 使用公司的 logo 替换 IBM Cognos Connection 文本

遵循以下步骤添加您的公司的 logo :

1. 将图像放到 <install location>/c8\webcontent\skins\my_style\branding 文件夹中。

2. 使用 XML 编辑器编辑 system.xml 文件。

3. 搜索“<!-- Custom OEM headers --> ”。

4. 您将注意到这部分已被注释掉。去掉这部分的注释符号并为您的新风格添加以下部分:

<!-- Custom OEM headers --> 
<param name="0EM"> 
<!-- 
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="false" contextDelimiter=""> 
<style styleFolderName="my_style"> 
	<table style="background-color:#2d5d3d"> 
	<tr> 
	<td><img 
	src="../skins/my_style/branding/bank_logo.gif"/></td> 
	</tr> 
	</table> 
</style> 

<style styleFolderName="corporate"> 
	<table style="background - color:#ffffff" > 
	<tr> 
	<td> <img 
	src="../skins/corporate/branding/my_logo.gif"/>
	</td> 
	<td class="headerTitle" s
	tyle="padding - right:2px;white - 
	space:nowrap"> My company </td> 
	</tr> 
	</table> 
</style> 

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

5. 重启 IBM Cognos 8 让更改生效。

最终结果


图 14. 重新塑造 IBM Cognos Connection 后最终结果
图 14. 重新塑造 IBM Cognos Connection 后最终结果

4.2 重新塑造 Query Studio

使用的文件

  • <install location>/c8/webcontent/skins/my_style/qs/crn.css
  • <install location>/c8/webcontent/skins/my_style/qs/QSRVCommonUI.css

查找替换

在上面的两个 CSS 文件中,查找并替换上图中的颜色。保存并关闭该文件。

最终结果


图 15. 重新塑造 Query Studio 后最终结果
图 15. 重新塑造 Query Studio 后最终结果

4.3 重新塑造 Analysis Studio

使用的文件

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

查找替换

在上面的 3 个 CSS 文件中,查找并替换我们在上图中匹配的颜色。保存并关闭该文件。

其他配置变化

在 background.css 文件中,分别修改以下参数:

 .menubar 
 { 
	 position: absolute; 
	 overflow: hidden; 
	 padding: Opx; 
	 background - color: #2d5c3d; 
	 border - bottom: 1px solid #2d5c3d; 
	 border - top: 1px solid #c8ddca; 
	 border-right: 1px solid #c8ddca; 
 }
  .menubar_content_div 
 { 
	 background - image: 
url(http://www.cnblogs.com/../skins/corporate/ans/images/title_bar_graphic_studios.gif);
	 padding: 2px; 
	 border: Opx; 
	 width: 578px; 
 } 
 

最终结果


图 16. 重新塑造 Analysis Studio 后最终结果
图 16. 重新塑造 Analysis Studio 后最终结果

4.4 重新塑造 Report Studio

使用的文件

  • <install location>/c8/webcontent/skins/my_style/pat/skin.css
  • <install location>/c8/webcontent/skins/my_style/ans/explore.css
  • <install location>/c8/webcontent/skins/my_style/ans/scrollbarstyle.css

查找替换

在以上的 3 个 CSS 文件中,查找并替换我们在上图中匹配的颜色。保存并关闭该文件。

其他配置变化

在 skin.css 文件中,分别修改以下参数:

 DIV.clsMenubar 
 { 
	 border-top: 1px solid #c8ddca; 
	 border-right: 1px solid #c8ddca; 
	 border-bottom: 2px solid #c8ddca; 
	 border-left: 1px solid #c8ddca; 
 } 
 TD.clsMenubarItemLast 
 { 
	 background-image: url(images/title_bar_graphic_rs.gif); 
	 background-repeat: no-repeat; 
	 background-position: right; 
 } 
 

查找颜色“silver ”和“gray ”并替换为 #c8ddca。

 TD.clsQuickTableGrid, 
 TD.clsQuickTableGrid_highlight 
 { 
	 border: 1px solid #c8ddca;
 } 
 DIV.clsPropertyDescriptionBox, 
 .clsWelcomeBanner 
 { 
	 border: 1px solid #c8ddca;
 } 
 

修改一些额外的背景颜色,以让一些框架中的绿色更少。

BODY, 
BUTTON, 
DIV.clsMenubar, 
DIV.clsToolbar, 
TD.clsMenubarftem, 
TD.clsToolbarButton, 
TABLE.clsMenuPopup, 
.clsPopupDialog, 
TD.clsMenuftem, 
#idToolboxPane, 
#idPropertiesPane, 
.clsPane_Toolbox_active,
.clsPane_Toolbox_inactive, 
.clsPane_Properties_inactive,
.clsPane_Workarea_inactive, 
TABLE.clsModalDlg, 
BUTTON.clsDlgButton, 
BUTTON.clsXButton_active, 
BUTTON.clsXButton_inactive, 
#idExplorerBar, 
TD.clsExplorerButton, 
#idResizeBarToolboxBottom, 
#idResizeBarToolboxRight,
.clsBigButtonBar, 
BUTTON.clsBigCoolButton, 
TD.clsToolbarButton, 
.clsQueryViewListViewHeader, 
.clsQueryTabBackground 
 { 
	 background - color: #ffffff; 
 } 
 

最终结果


图 17. 重新塑造 Report Studio 后最终结果
图 17. 重新塑造 Report Studio 后最终结果

4.5 重新塑造 Metrics Manager

使用的文件

  • <install location>/c8/webcontent/skins/my_style/cmm/default.css
  • <install location>/c8/webcontent/skins/my_style/cmm/admin_styles.css

查找替换

Metrics Manager 提供浓度稍微不同的颜色。在上面的两个 CSS 文件中,查找并替换我们在上图中匹配的颜色,但以下颜色除外:

  • #999999 --> #8bb093
  • #99AACC --> #8bb093
  • #CCCCCC --> #c8ddca

其他配置变化

在 default.css 文件中,分别修改以下参数:

修改 Main Header

 .mainHeader1 { 
	 BORDER-TOP: #c8ddca 1px solid; PADDING-LEFT: 1px; 
	 PADDING-BOTTOM: 1px; 
	 BORDER-LEFT: #c8ddca 1px solid; PADDING-TOP: 1px; 
	 BORDER-BOTTOM: #2d5c3d 1px solid; HEIGHT: 25px; 
	 BACKGROUND - COLOR: #2d5c3d; 
 } 
 .headerTitle { 
	 PADDING-LEFT: 0px; 
	 FONT-WEIGHT: bold; 
	 FONT-SIZE: 80%; 
	 COLOR: #ffffff; 
	 BACKGROUND - COLOR: #2d5c3d; 
 } 
 .headerTitleMiddle { 
	 BACKGROUND - COLOR: #2d5c3d;  
	 background - image: urlBImagesCt~tle 2bar Dgra::c~g:f); 
	 background - repeat: repeat - y; 
	 background - position: left top; 
	 background - attachment: fixed; 
 } 
 .logoImageContainer { 
	 PADDING-RIGHT: 5px; 
	 PADDING-LEFT: 3px; 
	 BACKGROUND - COLOR: #2d5c3d; 
 } 
 


图 18. 修改 Main Header
图 18. 修改 Main Header

修改 Table Style

 .tableTitle { 
	 font: 70% Tahoma, arial, geneva, helvetica, sans - serif; 
	 font-weight: bold; 
	 color: #2d5c3d; 
	 background - color: #c8ddca; 
 } 
 .tableTitleHover 
 { 
	 font: 70% Tahoma, arial, geneva, helvetica, sans - serif; 
	 font-weight: bold; 
	 color: #2d5c3d; 
	 background - color: #8bb093; 
	 cursor : pointer; 
 } 
 .tableSortTitle 
 { 
	 font: 70% Tahoma, arial, geneva, helvetica, sans - serif; 
	 font-weight: bold; 
	 color: #2d5c3d; 
	 background - color : #8bb093; 
 } 
 .tableSortTitleHover { 
	 font: 70% Tahoma, arial, geneva, helvetica, sans - serif; 
	 font-weight: bold; 
	 color: #2d5c3d; 
	 background - color : #8bb093; 
	 cursor : pointer; 
 } 
 .tableItemCount 
 { 
	 font-size: 70%; 
	 font-weight: normal; 
	 color: #2d5c3d; 
 } 
 


图 19. 修改 Table Style
图 19. 修改 Table Style

修改链接和选项卡的颜色

 .pathSearchLabel { 
	 font-weight: bold; font-size: 70%; color: #2d5c3d 
 } 
 

修改选项卡

 .clsButtonText{ 
	 font: bold 70% Tahoma, arial, geneva, helvetica, sans-serif; 
	 color: #2d5c3d; 
 } 
 .clsMenuItemHighlight { 
	 background - color: #8bb093 
 } 
 .clsMenuItemHeader { 
	 background - color: #c8ddca 
 } 
 

修改选择的项

 .clsTreeTextBlack { 
	 text - decoration: underline; font-size: 70%; 
	 color: #2d5c3d; 
 } 
 .clsTreeTextHighlight{ 
	 font: bold 70% Tahoma, arial, geneva, helvetica, sans-serif; 
	 color: #2d5c3d; 
 } 
 

修改“GO Metrics ”标题

 .dialogHeader { 
	 BORDER-RIGHT: #c8ddca 1px solid; 
	 BORDER-TOP: #c8ddca 1px solid; 
	 BORDER-LEFT: #c8ddca 1px solid; 
	 BORDER-BOTTOM: #c8ddca 1px solid; 
	 HEIGHT: 24px; 
	 BACKGROUND - COLOR: #2d5c3d; 
 } 
 


图 20. 修改 'GO Metrics' 标题
图 20.修改 'GO Metrics' 标题

最终结果


图 21. 重新塑造 Metrics Manager 后的最终结果
图 21. 重新塑造 Metrics Manager 后的最终结果

4. 重新塑造 Event Studio

使用的文件

  • <install location>/c8/webcontent/skins/my_style/ags/crn.css
  • <install location>/c8/webcontent/skins/my_style/ags/ags.css

查找替换

在上面的两个 CSS 文件中,查找并替换我们在上图中匹配的颜色。保存并关闭该文件。

其他配置变化

在 crn.css 文件中,分别修改以下参数:

 .menuBar 
 { 
	 background - color: #2d5c3d; 
	 background - image:; 
	 background - repeat: no - repeat; 
	 background - position: left bottom; 
	 border - bottom: #2d5c3d 1px solid; 
	 border - left: #c8ddca 0px solid; 
	 border - top: #c8ddca 1px solid; 
	 border - right: #c8ddca 1px solid; 
	 height: 25px; 
	 width:100%; 
	 padding: 1px 
 } 

最终结果


图 22. 重新塑造 Event Studio 的最终结果
图 22. 重新塑造 Event Studio 的最终结果


5. 示例 2 — 理解各个 UI 参数

第一个例子提供了如何快速重新塑造 IBM Cognos 8 的风格,即使用定制的颜色模式替换 CSS 文件中的默认颜色。尽管这种方法很有用,但是在许多情况下,使用不适当的颜色替换了某些 UI 元素,或者您可能需要更精确地控制颜色模式。对于这些情况,您需要更好地理解控制布局的所有参数,并有选择地使用定制颜色替换某些颜色。


图 23. 有选择地使用定制颜色替换某些颜色
图 23. 有选择地使用定制颜色替换某些颜色

使用第一种方法中的技巧从 corporate 风格入手。您将修改所有 IBM Cognos 组件,并且每次只修改一个组件。在这个例子中,您使用的主要颜色为:


图 24. 本例中使用的主要颜色
图 24. 本例中使用的主要颜色

5.1 重新塑造 Cognos Connection

所有与品牌相关的文件储存在 <install_directory>/c8/webcontent/skins/your_style/portal 文件夹中。

任务 1 – 修改 IBM Cognos Connection 中的 Top Line Header

要修改顶端的标题,在 default.css 文件中修改突出显示的部分:


图 25. 修改顶端的标题
图 25. 修改顶端的标题

主标题

修改主标题栏的背景

.mainHeader1 
{ 
	 border - top: #e72b41 1px solid; 
	 border - left: #e72b41 1px solid; 
	 border - bottom: #e72b41 3px solid; 
	 height: 25px; 
	 padding: 1px; 
	 background - color: #e72b41; 
} 

修改 studio 链接的文本颜色

 .crnOptions 
 { 
	 font-size: 70%; 
	 color: #ffffff; 
 } 
 

在主标题的中间显示样式和图像

 .headerTitleMiddle 
 { 
	 background - color: #e72b41; 
	 background - image: url:(images/titie_bar_grapic.gif); 
	 background - repeat: repeat - y; 
	 background - position: left top; 
 } 
 

显示“IBM Cognos Connection ”的文本的颜色

 .headerTitle 
 { 
	 padding - left: 0px; 
	 font-weight: bold; 
	 font - size: 80%; 
	 color: #ffffff; 
	 background - color: #e72b41; 
 } 
 

图像 (portal_icon.gif) 的背景颜色

 .logoImageContainer 
 { 
	 padding - right: 5px; 
	 padding - left: 3px; 
	 background - color: #e72b41; 
 } 
 

通过修改 system.xml 文件可以在“IBM Cognos Connection ”文本的位置添加公司的 logo 。这些步骤已在 示例 1 中进行了详细描述。需要重启 IBM Cognos 8 服务,以使对 system.xml 的更改生效。


图 26. 修改后结果
图 26. 修改后结果

任务 2 – 修改第二行标题

要修改第二行标题和门户选项卡,在 default.css 文件中修改突出显示的部分:

标题背景、边框和超链接文本

修改第二和第三标题的背景和边框颜色。

 .mainHeader2 
 { 
	 border: #f8f8dc 2px solid; 
	 padding: 2px; 
	 height: 25px; 
	 background - color: #f8f8dc; 
 }
 .mainHeader3 
 { 
	 padding - top: 5px; 
	 background - color: #f8f8dc; 
 } 
 

修改超链接文本

 .ccOptions 
 { 
	 font-size: 70%; 
	 color: #333399; 
 } 
 .authOption 
 { 
	 font-size: 70%; 
	 color: #333399; 
 } 
 .ccToolsLabel 
 { 
	 font-size: 70%; 
	 color: #333399; 
 } 
 


图 27. 修改第二和第三标题的背景和边框颜色
图 27. 修改第二和第三标题的背景和边框颜色

动态滚动按钮

.tabScrollButton 
 { 
	 padding: 1px; 
	 border: #ffce6d 1px solid; 
	 cursor: hand; 
	 background - color: #f8f8dc; 
 }
.tabScrollButtonOver 
 { 
	 padding: 1px; 
	 border: #ffce6d 1px solid; 
	 cursor: hand; 
	 background - color: #ffce6d; 
 } 
 .tabScrollButtonDisabled 
 { 
	 padding: 1px; 
	 border: #f8f8dc 1px solid; 
	 cursor: default; 
	 background - color: #f8f8dc; 
 } 
 


图 28. 动态滚动按钮
图 28. 动态滚动按钮

门户选项卡栏

 .tabBorder 
 { 
	 background-color: #e72b41; 
 } 
 .tabLabel 
 { 
	 font-weight: bold; 
	 font-size: 70%; 
	 color: #e72b41; 
 } 
 .tabLink 
 { 
	 font-size: 70%; 
	 color: #e72b41; 
 } 
 

修改非选中的门户选项卡的文本

 .tabAnchor 
 { 
	 color: #e72b41; 
 } 
 

修改非选中的选项卡的颜色和边框

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

修改选中的选项卡的颜色和边框

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

修改已选中选项卡之后的相邻的非选中选项卡的颜色和边框

 .tabNormalAfterSelected { 
	 padding-right: 20px; 
	 padding-left: 20px; 
	 font-size: 70%; color: #ffce6d; 
	 text-align: center; 
	 background-color: #f8f8dc; 
	 border-bottom: #ffce6d1px solid; 
	 border-top: #ffce6d1px solid; 
 } 
 

修改门户选项卡的外围边框

 .tabCap 
 { 
	 border-left: #ffce6d1px solid; 
	 border-bottom: #ffce6d1px solid; 
	 width: 1px; 
 }
  .tabBase 
 { 
	 border-bottom: #ffce6d1px solid; 
	 padding-left: 1px; 
	 height: 20px; 
 } 
 .tabTail 
 { 
	 font-size: 1px; 
	 border-left: #ffce6d 1px solid; 
	 height: 20px; 
 } 
    


图 29. 门户选项卡栏
图 29.门户选项卡栏

任务 3 – 修改 Public Folders / My Folders

要修改 Public Folders / My Folders 中使用的 portlet 和表样式,请根据突出显示部分修改 default.css 文件:

1. 要更改内容超链接的字体颜色,请修改以下参数(注意:该参数仅改变内容 超链接,比如对象名,但不改变 studio 、门户或其他 UI 链接)。

 a 
 { 
	 color: #333399; 
 } 
 

2. 修改用于显示 Public Folders / My Folders 的表:

工具栏:

.objectName 
 { 
	font - size: 80%; color: #000000; 
 } 
.objectOptions 
 { 
	font-size: 70%; 
	color: #000000 
 } 
.horizSpaceDetailView 
{
 	padding - bottom: 20px; 
}
.objectNoneFound 
 { 
	 font-size: 70%; 
	 color: #666699; 
	 padding - top: 50px; 
	 text - align: center; 
 } 
 .toolbarImageNormal 
 { 
	 padding: 2px; 
	 border: #f8f8dc 1px solid; 
	 cursor: hand; 
	 background - color: #ffffff; 
 } 
 .toolbarImageOver 
 { 
	 padding: 2px; 
	 border: #ffce6d 1px solid; 
	 cursor: hand; 
	 background - color: #f8f8dc; 
 } 
 .toolbarImagePressed 
 { 
	 padding: 2px; 
	 border: #ffce6d 1px solid; 
	 cursor: hand; 
	 background - color: #f8f8dc; 
 } 
 .toolbarImageOverPressed 
 { 
	 padding: 2px; 
	 border: #ffce6d 1px solid; 
	 cursor: hand; 
	 background - color: #f8f8dc; 
 } 
 .toolbarImageUnavaila ble 
 { 
	 padding: 2px; 
	 border: #f8f8dc 1px solid; 
	 background - color: #ffffff; 
 } 
 .tool ba rFlyoutNorma l 
 { 
	 padding - left: 2px; 
	 padding - top: 2px; 
	 padding - bottom: 2px; 
	 padding - right: 4px; 
	 border: #f8f8dc 1px solid; 
	 cursor: hand; 
	 background - color: #ffffff; 
 } 
 .toolbarFlyoutOver 
 { 
	 padding - left: 2px; 
	 padding - top: 2px; 
	 padding - bottom: 2px; 
	 padding - right: 4px; 
	 border: #ffce6d 1px solid; 
	 cursor: hand; 
	 background - color: #f8f8dc; 
 }
  .toolbarDivider 
 { 
	 width: 1px; 
	 background - color: #f8f8dc; 

 }
  .toolbarImageDefaultCursor 
 { 
	 cursor: default; 
 } 
 


图 30. 工具栏
图 30. 工具栏

路径

 .pathLeafNode 
 { 
	 font-weight: bold; 
	 color: #333399; 
 } 
 .pathSepa rator 
 { 
	 color: #333399; 
 } 
 .pathLink 
 { 
	 color: #333399; 
 } 
 


图 31. 路径
图 31.路径

列表视图

 /* --- List control --- */ 
 .pager_text 
 { 
	 font-size: 7O%; 
	 color: #333399; 
	 font-family: Tahoma; 
 } 
 

控制表周围的边框

 .cctable 
 { 
	 border - right: #ffce6d 1px solid; 
	 border - top: #ffce6d 1px solid; 
	 border - left: #ffce6d 1px solid; 
	 border - bottom: #ffce6d 1px solid; 
	 background - color: #ffffff; 
 }
  .rowDiyiderLine 
 { 
	 border - top: #ffce6d 1px solid; 
 } 
 .rowDiyider 
 { 
	 border - right: #ffce6d 1px solid; 
	 font-size: Opx; 
	 width: 1px; 
 } 
 .rowHighlight 
 { 
	 background - color: #ffce6d; 
 } 
 

控制表标题的背景

 .tableHeader { 
	 background - color: #f8f8dc; 
 } 
 .tableHeaderDivider 
 { 
	 background - color: #ffce6d; 
 } 
 

决定表标题字体的颜色

 .tableTitle 
 { 
	 font-weight: bold; 
	 font-size: 70%; 
	 color: #333399; 
 } 
.tableSortTitle 
 { 
	 font-weight: bold; 
	 color: #333399; 
	 text - decoration: none; 
 }
 .tableText 
 { 
	 font-size: 70%; 
	 color: #333399; 
 }
 .tableItemCount 
 { 
	 font-size: 70%; 
	 color: #333399; 
 } 
 


图 32. 列表视图
图 32.列表视图

3. 修改用于在 My Pages 上显示 Portlet 的表:

控制 portlet 标题

 /* Portlet Header */ 
 . boxHeaderBac kg round 
 { 
	 background - color: #f8f8dc; 
 } 
 .boxHeader 
 { 
	 padding: 2px; 
	 font-weight: bold; 
	 font - size: 80%; 
	 color: #333399; 
 } 
 

控制编辑按钮

 /* Portlet edit buttons */ 
 .boxButtonNormal 
 { 
	 border: #ffce6d 1px solid; 
	 padding: 0px; 
	 background - color: #f8f8dc;
	
 } 
 .boxButtonOver 
{	
	 border: #ffce6d 1px solid; 
	 padding: 0px; 
	 background - color: #ffce6d; 
 } 
 


图 33. 修改用于在 My Pages 上显示 Portlet 的表
图 33.修改用于在 My Pages 上显示 Portlet 的表

任务 4 – 清理其他对话框和页面

对话框:

 .pageEditorPortletColumn 
 { 
 	border: #ffce6d 1px solid; 
 	color: #333399; 
 	background - color: #ffffff; 
 } 
 .dialogHeader 
 { 
	 border: #ffce6d 1px solid; 
	 height: 24px; 
	 background  - color: #f8f8dc; 
 } 
 
 .dialogHeaderTitle 
 { 
	 padding - left: 5px; 
	 font-weight: bold; 
	 font-size: 70%; 
	 color: #333399; 
	 padding - top: 3px; 
 } 
 .dialogClose /* close button */ 
 { 
	 border: #ffce6d 1px solid; 
 } 
 .dialogCloseOver 
 { 
	 border: #333399 1px solid; 
 } 
 .dialogHeaderLinkcolor 
 { 
	 color: #333399; 
 } 
 

底部的按钮

 .dialogButtonBar 
 { 
	 border: #ffce6d 1px solid; 
	 background: #f8f8dc; 
	 padding: 3px; 
	 height: 40px; 
 } 
 

命令按钮:

 /* Command buttons (usually appear in dialog footers) */ 
 .commandButton 
 { 
	 border: #ffce6d 1px solid; 
	 font - size: 90%; 
	 background - color: #ffffff; 
 }
  .commandButtonOver 
 { 
	 border: #ffce6d 1px solid; 
	 font - size: 90%; 
	 cursor: hand; 
	 background - color: #f8f8dc; 
 }
 .commandButtonDown 
 { 
	 border: #ffce6d 1px solid; 
	 font - size: 90%; 
	 cursor: hand; 
	 background - color: #f8f8dc; 
 }
  .commandButtonInactive 
 { 
	 font - size:90%; 
	 width: 100%; 
	 cursor: default; 
	 color: #f8f8dc; 
	 height: 100%; 
	 text - decoration: none; 
	 border: #ffce6d 1px solid; 
	 background - color: #ffffff; 
 } 
 .dialogDivider /* horizontal dividers e.g. actions dialog */ 
 { 
	 background - color: #f8f8dc; 
 }
 


图 34. 对话框
图 34.对话框

搜索路径

 .dialogSearchPathDisplayPanel 
 { 
	 height: 45px; overflow: auto; 
	 word-wrap: break - word; 
	 border: #ffce6d 1px solid; 
	 padding:5px; margin-right:5px; 
 } 
 

弹出窗口

 /* Modal dialogs */ 
 .body_dia log_moda l 
 { 
	 background - color: #f8f8dc; 
 } 
 .dialogButtonBarPopup /* pop up dialog button bar - view search path */ 
 { 
	 height: 40px; 
	 background: #f8f8dc; 
	 border - right: #ffce6d 1px solid; 
	 border - top: #ffce6d 1px solid; 
	 border - left: #ffce6d 1px solid; 
	 border - bottom: #ffce6d 1px solid; 
 } 
 .dialogWindowPopup /* pop up dialog - view search path */ 
 { 
	 border - right: #ffce6d 1px solid; 
	 border - top: #ffce6d 1px solid; 
	 border - left: #ffce6d 1px solid; 
	 border - bottom: #ffce6d 1px solid; 
	 z-index: 50; 
	 padding - top: 10px; 
	 background - color: #f8f8dc; 
 } 
 


图 35.弹出窗口
图 35.弹出窗口

在菜单项上悬停

 .menuItemOver 
 { 
	 padding: 1px; 
	 color: #000000; 
	 height: 20px; 
	 background - color: #f8f8dc; 
 } 
 


图 36.在菜单项上悬停
图 36.在菜单项上悬停

5.2 重新塑造 Query Studio

所有与品牌相关的文件都在 <install_directory>/c8/webcontent/skins/your_style/qs 文件夹下。

Query Studio 将继承在 IBM Cognos Connection 中所做的某些更改,包括主标题。


图 37.重新塑造 Query Studio
图 37.重新塑造 Query Studio

任务 1 – 修改标题和工具栏

要修改顶端标题,请根据突出显示部分修改 QSRVCommonUI.css 文件:

Studio links in the top header */

 .topbar Phyperlink Ptext { 
	 text - decoration: underline; 
	 cursor: pointer; 
	 cursor: hand; 
	 color: #333399 !important; 
 } 
 

要添加不同颜色的标题,请添加适当的参数:

 .mainHeader1 
 { }
 .mainHeader2 
 { } 
 

任务 2 – 修改工具栏

要修改工具栏,请根据突出显示部分修改 QSRVCommonUI.css 文件:


图 38.修改工具栏
图 38.修改工具栏

Crn.css

修改工具栏的背景颜色。

 .mainHeader3 
 { 
	 background - color: #ffffff; 
 }

QSRVCommonUI

控制实际工具栏按钮和围绕它们的边框。

 .toolbarButton { 
	 padding: 1px Opx Opx Opx; 
	 height:22px; 
	 border: 1px solid #f8f8dc; 
	 background - color: #ffffff; 
 } 
 

在悬停在工具栏选项上时改变颜色。

 .toolbarButtonOver { 
	 padding: 1px Opx Opx Opx; 
	 height:22px; 
	 border: 1px solid #ffcd6d; 
	 background - color: #f8f8dc; 
	 cursor: pointer; 
	 cursor: hand; 
 } 
 

控制单击工具栏上的选项时的颜色

 .toolbarButtonPressed { 
	 padding: 1px 0px 0px 0px; height:22px; 
	 border : 1px solid #ffcd6d; 
	 background - color: #f8f8dc; 
	 cursor: pointer; 
	 cursor: hand; 
 } 
 

控制悬停在工具栏上的选项时的颜色

 .toolbarButtonOverPressed 
 { 
	 padding: 1px 0px 0px 0px; 
	 height:22px; 
	 border : 1px solid #ffcd6d; 
	 background - color: #f8f8dc; 
	 cursor: pointer; 
	 cursor: hand; 
 } 
 

任务 3 – 修改左侧菜单列表

要修改菜单栏,请根据突出显示部分修改 QSRVCommonUI.css 文件:

控制菜单栏的所有背景。默认情况下,我们保持白色背景。

 .menuBody { 
	 background - color: #ffffff; 
	 color: #000000; 
	 padding - right : 5px; 
	 padding - top : 12px; 
	 padding - left: 5px; 
 } 
 .menuHeader { 
	 font-size: 70%; 
	 color: #333399; 
	 border - collapse: collapse; 
	 vertical - align: bottom; 
	 font-weight: bold; 
	 width:100%; 
	 } 
 


图 39.控制菜单栏的所有背景
图 39.控制菜单栏的所有背景

显示/隐藏菜单箭头

 .menuHeaderButton { 
	 border: solid #ffce6d; 
	 border - width: 1px 1px 0px; 
	 border - collapse: collapse; 
	 cursor: pointer; 
	 cursor: hand; 
 } 
 


图 40.显示/隐藏菜单箭头
图 40.显示/隐藏菜单箭头

菜单面板的背景颜色

 . menuItem, 
 . menuItemSpacer, 
 .menuItemSpacerTop 
 { 
	 background - color: #f8f8dc; 
	 border: solid #ffce6d; 
	 border - width: 0px 1px; 
	 border - collapse: collapse; 
 } 
 

未选中的超链接的颜色

 .menuItem, 
 .menuAction { 
	 font-size: 70%; color: #333399; 
	 text - decoration: underline; 
	 cursor: pointer; 
	 cursor: hand; 
 } 
 

选中的菜单选项

 .menuItemSelected { 
	 color: #333399; 
	 border - collapse: collapse; 
	 cursor: default; 
	 padding: 3px 10px; 
	 border: 1px solid #ffce6d; 
	 height:20px; 
	 font-size: 70%; 
	 font-weight: bold;
 } 
 


图 41.选中的菜单选项
图 41.选中的菜单选项

控制围绕整个菜单树和已收起的菜单的边框。

 . menuContent, 
 .menuContentCollapsed 
 { 
	 color: #f8f8dc; 
	 border: 1px solid #ffce6d; 
	 padding: 3px; 
 } 
 .menuButton { 
	 border: 1px solid #ffce6d; 
	 border - collapse: collapse; 
	 cursor: pointer; 
	 cursor: hand; 
 } 
 


图 42.控制围绕整个菜单树和已收起的菜单的边框
图 42.控制围绕整个菜单树和已收起的菜单的边框

任务 4 – 修改网格部分

要修改默认的空网格,请根据突出显示部分修改 QSReport.css 文件:

 .startPageTextOver 
 { 
	 font-weight: normal; 
	 font-size: 70%; 
	 color: #333399; 
 } 
 .startPageListColumnTitle 
 { 
	 padding: 3px 5px; 
	 border: 1px solid #ffce6d; 
	 line-break: strict; 
	 background - color: #f8f8dc; 
 } 
 .startPageListColumnTitleOver 
 { 
	 padding: 3px 5px; 
	 border: 1px solid #ffce6d; 
	 line-break: strict; 
	 background - color: #f8f8dc; 
 }
  .startPageListColumn 
 { 
	 padding: 3px 5px; 
	 border - color: #ffce6d; 
	 border - width: Opx 1px 1px; 
	 border - style: dashed; 
	 line-break: strict; 
	 background - color: none; 
 }
  .startPageListColumnOver 
 { 
	 padding: 3px 5px; 
	 border - color: #ffce6d; 
	 border - width: Opx 1px 1px; 
	 border - style: dashed; 
	 line-break: strict; 
	 background - color: #f8f8dc; 
	
 }
  .onDragOver 
 { 
	 background - color: #f8f8dc; 
 } 
 .clsCaretInsert 
 {  
	 padding: 2px; 
	 border: 1px solid #ffce6d; 
	 background - color: white; 
 }
 


图 43.修改网格部分
图 43.修改网格部分

注意:当对象放到网格上之后将应用默认的交叉选项卡风格。

任务 5 – 保持风格变更

使用对 qs/ 文件夹中的所有 CSS 文件使用相同颜色模式的 Find and Replace 。

最终结果


图 44. 保持风格变更
图 44. 保持风格变更

5.3 重新塑造 Analysis Studio

与品牌相关的所有文件位于 <install_directory>/c8/webcontent/skins/your_style/ans 文件夹。

任务 1 – 修改顶端标题

要修改菜单标题,请根据突出显示部分修改 background.css 文件:


图 45.修改顶端标题
图 45.修改顶端标题

 .menubar 
 {
	 position: absolute; 
	 overflow: hidden; 
	 padding: 0px; background - color: #E72B41; 
	 border - bottom: 1px solid #E72B41; 
	 border - top: 1px solid #E72B41; 
	 border - right: 1px solid #E72B41; 
 } 
 .menubar_content_div 
 { 
	 background - image: 
 url:(http://www.cnblogs.com/../skins/corporate/ans/images/title_bar_graphic_studios.gif); 
	 padding: 2px; 
	 border: 0px; 
	 width: 578px; 
 } 
 .menu, .menu_hover, .menu_pressed 
 { 
	 cursor: pointer; 
	 cursor: hand; 
	 font - size: 8pt; 
	 padding: 3px; 
	 padding - left: 6px; 
	 padding - right: 6px; 
	 color: #FFFFFF; display: inline-block; 
	 font-family: Tahoma; 
	 font-weight: bold; 
	 text - decoration: underline; 
 } 
 .menu_hover 
 { 
	 background - color: #TTce6d; 
	 border: 1px solid #TTce6d; 
	 color: #000000; 
	 padding: 2px; 
	 padding - left: 5px; 
	 padding - right: 5px; 
 } 
 .menu_pressed 
 { 
	 padding: 2px; 
	 padding - left: 5px; 
	 padding - right: 5px; 
	 background - color: #TTce6d; 
	 border: 1px solid #TTce6d; 
	 color: #000000; 
 } 
 

任务 2 – 修改工具栏

要修改工具栏,请根据突出显示部分修改 background.css 文件:


图 46.修改工具栏
图 46.修改工具栏

 .main_toolbar 
 { 
	 position: absolute; 
	 white-space: nowrap; 
	 padding: 2px; 
	 background - color: #f8f8dc; 
	 border - bottom: 1px solid #ffce6d; 
	 border-right: 1px solid #ffce6d;
	 overflow: hidden; 
 } 
.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_pressed 
 { 
	 border : 1px solid #ffce6d; 
	 background - color: #f8f8dc; 
	 padding : 1px; 
	 /* pointer for standards compliant browsers, hand for ie 5.5 */ 
	 cursor: pointer; 
	 cursor: hand; 
 } 
 .toolbar_button_on 
 { 
	 border - color:#e72b41; 
	 background - color:#ffce6d; 
 } 
 .toolbar_button_on_hover 
 { 
	 border - color:#e72b41; 
	 background - color:#ffce6d; 
 } 
 .toolbar_arrow, .toolbar_arrow_hover, .toolbar_arrow_pressed 
 { 
	 background - color: #ffce6d; 
	 border : 1px solid #e72b41; 
	 border - left - width: 0px; 
	 display: inline-block; 
	 padding: 1px; 
	 cursor: pointer; 
	 cursor: hand; 
 } 
 .toolbar_button_hover, .toolbar_dropdown_button_hover, .toolbar_arrow_hover 
 { 
	 border : 1px solid #e72b41; 
	 background - color: #ffce6d; 
 } 
 .toolbar_button_pressed, .toolbar_arrow_pressed, .toolbar_dropdown_button_pressed 
 { 
	 border : 1px solid #e72b41; 
	 background - color: #ffce6d; 
 } 
 

任务 3 – 修改菜单栏

要修改菜单栏,请根据突出显示部分修改 background.css 文件:

 .ToggleBar,.DlgTitleBar 
 { 
	 overflow: hidden; 
	 table - layout: fixed; 
	 white - space: nowrap; 
	 font-family: Tahoma; 
	 font-size: 70%; 
	 font-weight: bold; 
	 color: #000000; 
	 background - color: #ffce6d; 
	 padding: 3px; 
	 border : 1px solid; 
	 border - color : #e72b41; 
 } 
 .Togg leBarTitle,.DlgTitle 
 { 
	 overflow: hidden; 
	 white-space: nowrap; 
 } 
 .ToggleBarArrow,.DlgCloseIcon 
 { 
	 text - align: right; 
	 border - style: solid; 
	 / * default to same border color as toggle bar * / 
	 border - color: #ffce6d; 
	 border - width: 1px; 
	 cursor: pointer; 
	 cursor: hand; 
 } 
 .InfoContainer 
 { 
	 background - color: #ffce6d; 
	 border - width: 0px 1px 1px 1px; 
	 border - style: solid; 
	 border - color: #ffce6d; 
	 overflow: auto; 
	 overflow-x: hidden; 
 } 
 .ins_obj_title_bar{ 
	 overflow: hidden; 
	 font-family: Tahoma; 
	 font - size: 70%; 
	 font - weight: bold; 
	 color: #333399; 
	 background - color: #ffce6d; 
	 padding: 3px; 
	 border : 1px solid; 
	 border - color : #e72b41;			
 } 



图 47.修改菜单栏
图 47.修改菜单栏
 .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: #333399; 
	 background - color: #ffffff; 
	 padding: 3px 20px 3px 20px; 
	 border-right : 1px solid #ffce6d; 
 }
 .tab_td_selected 
 { 
	 border - bottom : 1px solid #ffce6d; 
 } 
 .top_ta b_td_selected 
 { 
	 border - top : 1px solid #ffce6d; 
 } 
 .tab_td_none_selected, 
 .top_tab_td_none_selected,
 .top_tab_dummy_td_none_selected,
 .tab_dummy_td_none_selected 
 { 
	 text - align: left; 
	 color: #333399; 
	 padding: 3px 20px 3px 20px; 
	 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 #ffce6d; 
	 border - bottom: 1px solid #ffce6d; 
	 border - left: 1px solid #ffce6d; 
	 border-right: 1px solid #ffce6d; 
 }
 .top_tab_dummy_td_none_selected{ 
	 border - top: 0px; 
	 border - right: 0px; 
 } 
 .tab_dummy_td_none_selected { 
	 border - bottom: 0px; 
	 border - right: 0px; 
 }
 .tab_td_none_selected 
 { 
	 border - top : 1px solid #ffce6d; 
 } 
 .top_ta b_td_none_selected 
 { 
	 border - bottom : 1px solid #ffce6d; 
 } 
 .tab_right_border 
 { 
	 border-right: 1px solid #ffce6d; 
 } 
 .tab_left_border 
 { 
	 border - left: 1px solid #ffce6d; 
 } 
 


图 48.修改菜单栏结果
修改菜单栏结果

任务 4 – 上下文菜单风格变化

要修改菜单栏,请根据突出显示部分修改 background.css 文件:

 /***************************** 
 Context Menu Style 
 ****************************/ 
 .contextMenu_body, .contextMenu_body_NS 
 { 
	 background - color: white; 
	 padding: 3px; 
	 border: 1px solid #ffce6d; 
	 font - size: 8pt; 
	 position: absolute; 
	 visibility: visible; 
	 left: - 1000px; 
	 cursor: default; 
	 display: block; 
	 overflow - y: auto; 
 } 
 .contextMenu _item, .contextMenu_item_with_submenu,
 .contextMenu_item_over ,
 .contextMenu_item_with_submenu_over, 
 .contextMenu _item_disabled, .contextMenu_item_disabled_over, 
 .contextMenu _item_default_over, .contextMenu_item_default 
 { 
	 font - size: 8pt; 
	 padding: 1px 0px 1px 3px; 
	 border: 1px solid #FFFFFF; 
	 white-space: nowrap; 
	 text - align: left; 
	 cursor: default; 
	 text - decoration: underline; 
	 background - color: white; 
	 color: #333399; 
 } 
 .contextMenu _item_over,.contextMenu_item_with_submenu_over 
 { 
	 cursor: pointer; cursor: hand; 
	 background - color: #f8f8dc; 
	 border: 1px solid #ffce6d; 
 } 
 .contextMenu _item_disabled 
 { 
	 color: graytext; 
	 white-space: nowrap; 
	 text - decoration: none; 
 } 
 .contextMenu _item_disabled_over 
 { 
	 color: graytext; 
	 text - decoration: none; 
 } 
 .contextMenu _item_defau lt_over 
 { 
	 cursor: pointer; 
	 cursor: hand; 
	 font-weight : bold; 
	 background - color: #f8f8dc; 
	 border: 1px solid #ffce6d; 
 } 
 


图 49.上下文菜单风格变化
图 49.上下文菜单风格变化

最终结果


图 50. 重新塑造 Analysis Studio 最终结果
图 50. 重新塑造 Analysis Studio 最终结果

5.4 重新塑造 Report Studio

与品牌相关的所有文件都位于 <install_directory>/c8/webcontent/skins/your_style/pat 文件夹下。

在 Report Studio CSS 文件中,许多 UI 元素都被分成组。这允许您快速修改样式,但它还意味着需要进行更多的调试才能获得想要的颜色模式。

任务 1 – 修改主标题

要修改主标题,请根据突出显示部分修改 skin.css 文件:


图 51.修改主标题
图 51.修改主标题

 DIV.clsMenubar, 
 TD.clsMenubarItem 
 { 
	 background - color: #e72b41; 
 } 
 TD.clsMenubarItem 
 { 
	 color: white; 
	 border - top: 1px solid #e72b41; 
	 border - left: 1px solid #e72b41; 
	 border - right: 1px solid #e72b41; 
	 border - bottom: 1px solid #e72b41; 
 } 
 TD.clsMenubarItemLast 
 { 
	 background - image: url:(images/tit1e_bar_graphic_rs.gif); 
	 background - repeat: no - repeat; 
	 background - position: right; 
 }
 

任务 2 – 修改菜单栏

由于许多 UI 元素已被分成组放在一起,所以我们将仅调整两个参数,并且会发现这一调整会改变许多其他 UI 元素。

要修改菜单栏,请根据突出显示部分修改 skin.css 文件:


图 52.修改菜单栏
图 52.修改菜单栏

 BODY, 
 BUTTON, 
 DIV.clsMenubar, 
 DIV.clsToolbar, 
 TD.clsMenubarItem, 
 TD.clsToolbarButton, 
 TABLE.clsMenuPopup, 
 .clsPopupDialog, 
 TD.clsMenuItem, 
 #idToolboxPane, 
 #idPropertiesPane, 
 .clsPane_Toolbox_active,
 .clsPane_Toolbox_inactive, 
 .clsPane_Properties_inactive, 
 .clsPane_Workarea_inactive, 
 TABLE.clsModalDlg, 
 BUTTON.clsDlgButton, 
 BUTTON.clsXButton_active, 
 BUTTON.clsXButton _inactive, 
 #idExplorerBar, 
 TD.clsExplorerButton, 
 #idResizeBarToolboxBottom,
 #idResizeBarToolboxRight, 
 .clsBigButtonBar, 
 BUTTON.clsBigCoolButton, 
 TD.clsToolbarButton, 
 .clsQueryViewListViewHeader, 
 .clsQueryTabBackground 
 { 
	 background - color: #f8f8a1; 
 } 
 BUTTON.clsCoolButton_hover, 
 TD.clsMenubarItem_up, 
 TD.clsToolbarButton_up, 
 BUTTON.clsCoolButton_pressed, 
 TD.clsMenubarItem_down, 
 TD.clsToolbarButton_down, 
 TD.clsToolbarButton_stuck, 
 TD.clsMenuItem_selected, 
 DIV.clsPaneHeader_inactive, 
 .clsListItem_hover, 
 .clsListItem_tb_selected, 
 .clsTreeNode_hover, 
 TD.clsPropertySheetLa bel_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 
 { 
	 background - color: #e72b41; 
 } 
 

现在所有背景项都是米色的 (#f8f8cd) 。菜单项、突出显示的工具栏和菜单面板是深褐色的 (#ffce6d) 。

因为许多这些 UI 元素已被分组放在一起,所以许多参数的改变会影响到整个 UI 。在上面的屏幕截图中,假设我们想要左侧面板中的非突出显示窗口呈现为绿色 (#d6f0b1) ,菜单面板中已选择的项呈现为红色 (#e72b41)。对于这种情况,我们将从分组列表中移除这些特定的类。


图 53.修改左侧面板
图 53.修改左侧面板

具体而言,我们将移除以下部分,将它们移回到它们自己的位置:

BUTTON.clsCoolButton_hover, 
TD.clsMenubarItem_up, 
TD.clsToolbarButton_up, 
BUTTON.clsCoolButton_pressed, 
TD.clsMenubarItem_down, 
TD.clsToolbarButton_down, 
TD.clsToolbarButton_stuck, 
TD.clsMenultem_selected, 
	 
/*DIV.clsPaneHeader_inactive,*/ 

DIV.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 
{ 
	background - color: #ffce6d; 
} 


DIV.clsPaneHeader_inactive, 
TD.clsModa lDlg Header_inactive 
{ 
	background-color: #d6f0b1; 
} 


DIV.clsPaneHeader_active, 
.clsModalDlgHeader_active, 
.clsToolDlgHeader_active, 
#idProgressBar 
{ 
	background - color: #e72b41; 
} 
 

注意:当您加载 Report Studio 时,还将改变进度条的颜色。如果您想要改变这种情况,可以将 #idProgressBar 类放回到其所在的位置并为其分配定制背景颜色。

因为我们将左侧的非活动菜单标题更改为浅绿色,所以白色的文本不易查看。因此,我们将其修改为黑色。

DIV.clsPaneHeader_inactive,
.clsModalDlgHeader_inactive 
{ 
	 color: black; 
} 

另外,由于许多类都被分组放在一起,有些 UI 元素的外观可能有偏差。例如,在下面的屏幕截图中,我们想要对框架内部的背景应用 “白色”。


图 54.修改框架内部的背景
图 54.修改框架内部的背景

为此,我们同样需要将相关联的类放到它们各自的位置,如下所示:

 BODY, 
 BUTTON, 
 DIV.clsMenubar, 
 DIV.clsToolbar, 
 TD.clsMenubarltem, 
 TD.clsToolbarButton, 
 TABLE.clsMenuPopup, 
 .clsPopupDialog, 
 TD.clsMenultem, 
 /* #idToolboxPane, */ 
 #idPropertiesPane, 
 /* .clsPane_Toolbox_active,
  .clsPane_Toolbox_inactive, */ 
 .clsPane_Properties_inactive,
  .clsPane_Workarea_inactive, 

 TABLE.clsModalDlg, 
 BUTTON.clsDlgButton, 
 BUTTON.clsXButton_active, 
 BUTTON.clsXButton_inactive, 
 #idExplorerBar, 
 TD.clsExplorerButton, 
 #idResizeBarToolboxBottom, 
 #idResizeBarToolboxRight, 
 .clsBigButtonBar, 
 BUTTON.clsBigCoolButton, 
 TD.clsToolbarButton, 
 .clsQueryViewListViewHeader, 
 .clsQueryTabBackground 
 { 
	 background - color: #f8f8cd; 
 } 
 #idToolboxPane, 
 .clsPane_Toolbox_active, 
 .clsPane_Toolbox_inactive 
 { 
	 background-color: #ffffff; 
 } 
 
 

任务 3 – 清理剩余的 UI

我们可以使用查找替换操作清理剩余的 UI ,以搭配我们的颜色主题。

最终结果


图 55.清理剩余的 UI
图 55.清理剩余的 UI


6. 示例 3 — 使用背景图片

背景

在 CSS 文件中,除了指定常规的十六进制颜色之外,您还可以使用背景图片。事实上,许多 Web 站点都依赖背景图片来提供良好的颜色渐变效果。这也适用于 IBM Cognos 8 。


图 56. 使用背景图片
图 56. 使用背景图片

创建背景图片

创建背景图片的最便捷方式是使用 PowerPoint 。遵循以下步骤创建图片:

1. 打开 PowerPoint 。

2. 使用绘图工具,将一个“rectangle ”对象拖放到幻灯中。


图 57.将对象拖放到幻灯中
图 57.将对象拖放到幻灯中

3. 双击新的对象。

4. 在“Color: ”拾色器中选择 “Fill Effects” 。


图 58.在拾色器中选择颜色
图 58.在拾色器中选择颜色

5. 选择双色渐变。


图 59.选择双色渐变
图 59.选择双色渐变

6. 在 PowerPoint 中,重新调整该对象的大小使其与目标位置相当。例如,如果您想将其用作标题,则 “纵向” 调整它的大小以获得适当的尺寸。

7. 将该对象复制粘贴到 Paint 。

8. 进入 Image > Attributes 检查图片的大小。IBM Cognos Connection 的标题的高度一般为 25 个像素,这可以作为参考。

9. 进入 Images > Stretch and Skew 纵向调整图片直到合适为止。

10. 将该图片保存到 branding 或 portal/images 文件夹下。

11. 对想要创建的所有图片重复这些步骤。

为风格添加背景图片

在这个例子中,我们将查看如何快速更改 IBM Cognos Connection 中的标题,不过这里的方法原则适用于其他组件。

background-image ”和“background-repeat ”参数可用于任何风格属性,不管默认情况下是否使用了它们。此外,background-image 参数的优先级别高于 background-color 参数。这意味着如果它未出现在属性中,那么可以添加它。例如,在上面的屏幕截图中,更改了以下参数:

 .mainHeader1 
 { 
	 border-right: #fffff 1px solid; 
	 border-left: #fffff 1px solid; 
	 border-bottom: #afbac7 0px solid; 
	 height: 25px; 
	 background-image: url(images/header3.bmp); 
	 background-color: #336699; 
	 background-repeat: repeat; 
	 background-position: left bottom; 
 } 
 .mainHeader2 
 { 
	 border: #e3e9f3 0px solid; 
	 padding: 0px; 
	 height: 25px; 
	 background-image: url(images/header4.bmp); 
	 background-repeat: repeat; 
 } 
 .mainHeader3 
 { 
	 padding-top: 5px; 
	 background-image: url(images/header5.bmp); 
	 background-repeat: repeat; 
	 border: #e3e9f3 0px solid; 
 } 
 .tabNormal 
 { 
	 padding-right: 20px; 
	 padding-left: 20px; 
	 font-size: 70%; 
	 color: #ff0000; 
	 text-align: center; 
	 background-image: url(images/portaltab.bmp); 
	 background-repeat: repeat;
	 border-top: #afbac7 1px solid; 
	 border-left: #afbac7 1px solid; 
	 border-bottom: #afbac7 1px solid; 
 } 

 .tabNormalAfterSelected 
 { 
	 padding-right: 20px; 
	 padding-left: 20px; 
	 font-size: 70%; 
	 color: #ff0000; 
	 text-align: center; 
	 background-image: url(images/portaltab.bmp); 
	 background-repeat: repeat; 
	 border-top: #afbac7 1 px solid; 
	 border-bottom: #afbac7 1 px solid; 
 } 
	 


图 60.为风格添加背景图片
图 60.为风格添加背景图片
 .boxHeaderBackground 
 { 
	 background-color: #99aacc; 
	 background-image: url(images/header4.bmp); 
	 background-repeat: repeat; 
 } 
     


图 61.为风格重复添加背景图片
图 61.为风格重复添加背景图片

添加了背景图片之后,示例 1 和 2 中的其他风格更改可用于塑造 IBM Cognos 8 。


7. 结束语

IBM Cognos 8 允许管理员灵活地修改 IBM Cognos 8 及其所有组件的外观。IBM Cognos 提供用于控制 IBM Cognos 模式的外观和颜色的 CSS 文件。通过修改这些 CSS 文件,管理员可以改变 Cognos 8 的感观,使其与公司的品牌外观相搭配。本文档提供一些关于用户如何更好地理解和修改默认的 IBM Cognos UI 的技巧。


8. 附录 — 参数列表

1.1 附录 A — IBM Cognos Connection — Default.css

顶级标题

CSS 类 背景 边框 文本 说明
.mainHeader1 #336699 #e7e7e7, #cc9966   主标题的背景颜色
.crnOptions     #ffffff studio 超链接的文本颜色
.headerTitleMiddle #336699     主标题中间使用的颜色和图像
. logolmageContainer 0MT     IBM Cognos Connection 图像 (icon_portal.gif) 的背景颜色

二级和 三级标题

CSS 类 背景 边框 文本 说明
. mainHeader2 #f3f3f3 #f3f3f3   二级标题的背景和边框颜色。
.mainHeader3 #f3f3f3     三级标题的背景颜色。
. ccOptions     #0000cc “Preferences ”和“Help ”的超链接颜色。
.authOption     #0000cc Logon / Logoff 的超链接颜色。
.ccToolsLabel     #0000cc “Tools ”的超链接颜色。
. ccOptionsDivider   #999999   分隔“Home ”和“Preferences ”的竖线的颜色。
. userName     #000000 显示已登录用户的文本颜色。

门户选项卡

CSS 类 背景 边框 文本 说明
.tabBorder #999999      
.tabLabel     #336699  
.tabLink     #336699  
.tabScrollButton #ffffff #999999   用于门户选项卡右侧的“scrolling ”按钮的背景和边框颜色。
.tabScrollButtonOver #ffffff #999999   当鼠标悬停在“scrolling ”按钮时显示的背景和边框颜色。
.tabScrollButtonDisa bled #ffffff #cccccc   禁用“scrolling ”按钮时显示的背景和边框颜色。
.tabAnchor     #0000cc  
.tabNormal #ffffff #e7e7e7,
#999999
#ff0000 用于未选择的门户选项卡的颜色。
.tabSelected #ffffff #999999 #336699 用于已选择的门户选项卡的颜色。
.tabNormalAfterSele cted #ffffff #e7e7e7,
#999999'
#ff0000 用于右侧已选择的门户选项卡的颜色。
.tabCap   #e7e7e7,
#999999
  门户选项卡末尾的边框。
.tabBase   #999999  
.tabTail   #999999  

Public Folders / My Folders

超链接

CSS 类 背景 边框 文本 说明
a     #0000cc 大部分超链接对象的颜色。

路径

CSS 类 背景 边框 文本 说明
. pathLeafNode     #336699 用于显示当前文件夹的颜色。
.pathSeparator     #0000cc 用于显示文件夹分隔符“> ”的颜色。
. pathLink     #0000cc 用于显示超链接路径的颜色。

工具栏

CSS 类 背景 边框 文本 说明
.toolbarImageNormal #ffffff #cccccc   用于工具栏选项的颜色。
.toolbarImageOver #ffffff #e3e9f3   悬停在工具栏选项时的颜色。
.toolbarImagePressed #e3e9f3 #666699   单击工具栏选项时的颜色。
.toolbarImageOverPressed #c6c6d7 #666699  
.toolbarImageUnavailable #ffffff     未发现工具栏图标的颜色。
.toolbarFlyoutNormal #ffffff #cccccc   禁用“scrolling ”按钮时的背景和边框颜色。
.toolbarFlyoutOver #ffffff #666699    
.toolbarDivider #cccccc      

表 – 列表视图

CSS 类 背景 边框 文本 说明
.cctable #ffffff #000000, #999999   围绕表的外边框。
.tableHeader #e7e7e7     表标题的背景颜色。
. tableHeaderDivider #999999     分隔表标题中的列的线条的颜色。
. tableTitle     #336699 表标题的列名的文本。
.tableSortTitle     #336699 表标题中“Sort ”的文本。
. tableText     #000000 用于表的文本(超链接除外)。

表 – 详细查看

CSS 类 背景 边框 文本 说明
.objectName     #000000 用于显示描述和日期的颜色。
. objectOptions     #000000

My Pages

CSS 类 背景 边框 文本 说明
. boxborder   #e7e7e7   围绕 portlet 的外边框。
.boxButtonNormal #ffffff #ffffff   portlet 上的“edit ”、“minimize ”和“maximize ”按钮。
.boxButtonOver #ffffff #ffffff   portlet 上的“edit ”、“minimize ”和“maximize ”按钮 – 在指针悬停其上时。
.boxHeaderBackground #99aacc     portlet 标题的背景颜色。
.boxBody table     #000000 portlet 中使用的文本颜色。
. boxHeader     #ffffff portlet 标题中使用的文本颜色。
.pageEditorPortletColumn #ffffff #cccccc #666699 页面编辑器内部的 portlet 窗口使用的颜色。

对话框、命令按钮和弹出窗口

图标按钮

CSS 类 背景 边框 文本 说明
.button #ffffff #cccccc   图标按钮的颜色。
.button_hover #bec8dc #99aacc   鼠标指针悬停在图标按钮上时的颜色。
.button_pressed #bec8dc #336699   单击图标按钮时的颜色。

命令按钮,比如对话框底部的 OK 和 Cancel

CSS 类 背景 边框 文本 说明
.commandButton #ffffff #999999   命令按钮的背景和边框颜色。
.commandButtonOver #e3e9f3 #999999   鼠标指针悬停在命令按钮时的颜色。 
.commandButtonDown #e3e9f3 #999999   单击命令按钮时的颜色。
.commandButtonInactive #ffffff #999999 #999999 命令按钮处于非激活状态时的颜色。
.commandButtonActive     #000000 命令按钮激活时的文本颜色。
.simpleCmdButtonActive #ffffff #cccccc #000000 仅在少数弹出窗口中使用的特殊命令按钮。

一般对话框

CSS 类 背景 边框 文本 说明
.dialogHeader #99aacc #336699   环绕对话框标题的颜色。
.dialogHeaderText     #336699 对话框的说明性文本的颜色。
.dialogHintText     #336699 一般提示的颜色。
.dialogHeaderTitle     #ffffff 对话框标题的颜色。 
.dialogClose   #bec8dc   围绕“X ”按钮的边框。
. dialogCloseOver   #ffffff   鼠标指针悬停在其上时围绕“X ”按钮的边框。
.dialogDivider #cccccc     用于对话框中的水平分隔器的背景颜色,比如 “action ” 按钮。
.dialogButtonBar #e7e7e7 #cccccc   显示“OK ”和“Cancel ”按钮的横条的颜色。 
.dialogSearchPathDisplayPanel   #336699   用于搜索路径弹出窗口的边框。
.dialogHeaderLinkColor     #ffffff  
.body_dialog_modal #e3e9f3     模式对话框的颜色。
. dialogButtonBarPopup #e7e7e7 #cccccc,
#bec8dc
  “view search path ”窗口中的对话框按钮的颜色。
.dialogWindowPopup #e3e9f3 #cccccc, #eeecf3, #ffffff    
.messageText   #000000   用于对话框消息的文本颜色。
.menuItemOver #e3e9f3   #000000  
.menuItemNormal #ffffff   #000000  

邮件主题、链接和附件

CSS 类 背景 边框 文本 说明
.emailItem #ffffff #ffffff    
.emailItem_active #e3e9f3 #191970    
.emailItem_hover #e3e9f3 #191970    
.emailBodyTableRow   #99aacc    
.email Li nksAttach mentTableRow   #99aacc    

1.2 附录 B — Query Studio — QSRVCommonUI.css

标题

大部分标题选项继承自 IBM Cognos Connection 风格。

CSS 类 背景 边框 文本 说明
.topbar_hyperlink_text     #ffffff 顶端标题的超链接的文本颜色。

工具栏

CSS 类 背景 边框 文本 说明
.toolbarButton #ffffff #cccccc   工具栏按钮的颜色。
.toolbarButtonOver #e3e9f3 #336699   悬停在工具栏按钮上时的颜色。
.toolbarButtonPressed #e3e9f3 #cccccc   单击工具栏按钮时的颜色。
.toolbarButtonOverPressed #bec8dc #336699   单击工具栏按钮时的颜色。
.toolbarBody #ffffff   #000000 包含所有工具栏选项的区域的颜色。
.dlgHeader   #336699 #336699 对话框标题的边框和文本的颜色。
.dialogButton   #999999   对话框按钮的边框颜色。
.dialogButtonOver #e3e9f3 #336699   悬停在对话框按钮时的颜色。
.dialogButtonText     #000000 对话框按钮的文本颜色。

菜单栏

CSS 类 背景 边框 文本 说明
.menuBody #ffffff   #000000 控制菜单栏的整个背景颜色。
.menuButtonBody #ffffff   #000000  
.previewBody #e7e7e7   #000000 位于预览模式时的颜色。
.previewBodyClosed #ffffff   #000000  
.menuHeader     #336699 “Menu ”的文本颜色。
.menuHeaderButton     #336699 菜单按钮的文本颜色。
.menuItem #e3e9f3 #336699 #0000cc 菜单面板使用的颜色。
.menuItemSpacer #e3e9f3 #336699    
. menuAction     #0000cc 未选择的超链接菜单选项的文本颜色。
.menuItemSelected   #336699 #336699 已选择的菜单选项的文本颜色。
. metadataLoading     #000000 在可插入对象面板中加载元数据时使用的文本颜色。 
. menuContent   #336699 #336699 选择菜单选项之后的文本和边框。
. menuContentCollapsed   #336699 #336699 菜单选项收起时的文本和边框颜色。
. menuButton   #336699   菜单按钮收起时围绕它的边框。

QSReport.css

空报表样式

CSS 类 背景 边框 文本 说明
.startPageText     #000000 交叉表中的文本说明。
.startPageTextOver     #336699 悬停在某个区域时显示的文本。
.startPageListColumnTitle #bec8dc #99aacc   交叉表的标题颜色。
.startPageListColumnTitleOver #000000 #99aacc   悬停时的标题颜色。 
.startPageListColumn   #99aacc   交叉表的主体颜色。
.startPageListColumnOver #e3e9f3 #99aacc   悬停在交叉表上方时的颜色。

1.3 附录 C - Analysis Studio - background.css

标题

CSS 类 背景 边框 文本 说明
.menubar #ffffff #e7e7e7, #deac77   顶级菜单栏的颜色。
.menubar content div title_bar_graphic_studios.gif     标题的背景图像。
.menu     #ffffff 菜单选项的文本颜色。
.menu hover #e3e9f3 #e3e9f3 #123679 悬停在菜单列表或菜单操作上方时显示的颜色。
.menu_pressed #e3e9f3 #e3e9f3 #123679 单击菜单操作时显示的颜色。

内容菜单风格 – 从下拉列表、工具栏或菜单选择选项时使用。

CSS 类 背景 边框 文本 说明
.contextMenu_body White #336699 整个菜单区域的颜色。
.contentMenu_body_NS
.contextMenu_item #ffffff #0000cc 已选择的菜单选项的颜色。
.contextMenu_item_with_submenu
.contextMenu_item_over #e3e9f3 #99aacc #0000cc
.contextMenuitemwithsubmenuover
.contextMenu_item_default_over
.contextMenu_item_default
.contextMenu item disabled #ffffff Graytext
.contextMenu_item_disabled_over

工具栏

CSS 类 背景 边框 文本 说明
.main_toolbar #f3f3f3 #cccccc 主工具栏的颜色。
.toolbar_button
.toolbar_button_hover
.toolbar_button_disabled
.toolbar_button_off
.toolbar_dropdown_button
.toolbar_dropdown_button_hover
.toolbar_button_pressed
.toolbar_dropdown_button_pressed
.toolbar_button_on #cccce3 #cccccc   工具栏选项的颜色。
.toolbar_button_on_hover #bec8dc #336699   悬停在工具栏选项时显示的颜色。
.toolbar_arrow #f3f3f3 #cccccc 下拉工具栏选项的颜色。
 
.toolbar_arrow_hover
 
.toolbar_arrow_pressed

可插入对象

CSS 类 背景 边框 文本 说明
.tab_td_selected #ffffff #cccccc #336699 在“insertable objects ”下面的已选择的选项卡的颜色。     
.top_tab td_selected
.tab_td_none_selected #cccccc #0000cc “insertable objects ”中未选中的选项卡的颜色。
.top_tab_td_none_selected
.top_tab dummy_td_none_selected
.tap_dummy_td_none_selected
.tab_right_border #cccccc 围绕“insertable objects ”的边框颜色。
.tab_left_border

切换栏、维度查看器标题栏和属性面板标题栏

CSS 类 背景 边框 文本 说明
.ToogleBar #99aacc #336699 #ffffff 切换栏的标题的颜色。
.DlgTitleBar        
.ToogleBarArrow   #99aacc    
.DlgCloseIcon        
.InfoContainer #e7e7e7 #99aacc   “Information ”窗口的颜色。
. ins_obj title #99aacc #336699 #ffffff “Insertable Objects ”标题栏的颜色。


参考资料