本文档为在 IBM Cognos 8 中创建定制风格(或 “皮肤”)提供一些技巧。本文档概述了在 IBM Cognos 8 中创建皮肤涉及到的概念、颜色模式和文件。此外,还提供了一些任务示例,以更好地演示创建定制风格需要进行的所有更改。本文档提供了两个例子;一个例子演示如何使用 find-andreplace 技术快速地重新修改 IBM Cognos 8 的风格以适合您的企业的风格,另一个例子介绍了许多不同参数,并展示如何通过调整这些参数改变界面。附录提供了一个常见参数列表。本文档不提供关于如何定制现有报告风格的说明。
了解默认颜色模式让您能够根据自己想要的风格匹配默认颜色。所有 IBM Cognos 组件都严格遵循相同的颜色模式。下图列出了“Corporate ”风格预定义的大部分颜色。一些 IBM Cognos 组件可能经常会使用未在下图中给出的颜色。
挑选颜色的最好方法是进入 Web 站点并将它截屏下来放到 Paint Shop Pro (PSP) 中。然后使用 paint dropper 工具找出颜色的十六进制值,方法为单击颜色并在右边面板双击该颜色。
下图提供的例子展示了默认的“corporate ”风格使用的颜色模式。可以将它用作参照确定如何将您自己的颜色与预定义的颜色匹配。
图 3. IBM Cognos Connection
图 4. Query Studio
图 5. Analysis Studio
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 ”图表。
5. 这将打开一个“New Style Wizard ”。为风格命名。
6. 在“Style Location Name ”下提供准确的文件夹名。如果您要预览风格可以使用预览页。下面给出了预览页的位置。
7. 导入了风格之后,您就可以在首选项中的下拉列表中查看它。
跨所有 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 站点如下所示。
您想要重新修改 IBM Cognos 的风格以搭配该颜色主题。为此,您首先要将“corporate ”风格中的默认颜色映射到我们想要使用的颜色。
下面的 HTML 页面主要使用以下 3 种颜色:
使用这种颜色模式时,您将使用以下颜色替换默认的颜色(有少量没有替换)。注意:选择颜色模式时,要尝试保持相同的颜色浓度,比如用浓颜色匹配浓颜色,用淡颜色匹配淡颜色。
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 标题
2. 修改 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 后最终结果
使用的文件
- <install location>/c8/webcontent/skins/my_style/qs/crn.css
- <install location>/c8/webcontent/skins/my_style/qs/QSRVCommonUI.css
查找替换
在上面的两个 CSS 文件中,查找并替换上图中的颜色。保存并关闭该文件。
最终结果
使用的文件
- <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 后最终结果
使用的文件
- <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 后最终结果
使用的文件
- <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
修改 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
修改链接和选项卡的颜色
.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' 标题
最终结果
图 21. 重新塑造 Metrics Manager 后的最终结果
使用的文件
- <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 } |
最终结果
第一个例子提供了如何快速重新塑造 IBM Cognos 8 的风格,即使用定制的颜色模式替换 CSS 文件中的默认颜色。尽管这种方法很有用,但是在许多情况下,使用不适当的颜色替换了某些 UI 元素,或者您可能需要更精确地控制颜色模式。对于这些情况,您需要更好地理解控制布局的所有参数,并有选择地使用定制颜色替换某些颜色。
使用第一种方法中的技巧从 corporate 风格入手。您将修改所有 IBM Cognos 组件,并且每次只修改一个组件。在这个例子中,您使用的主要颜色为:
所有与品牌相关的文件储存在 <install_directory>/c8/webcontent/skins/your_style/portal 文件夹中。
任务 1 – 修改 IBM Cognos Connection 中的 Top Line Header
要修改顶端的标题,在 default.css 文件中修改突出显示的部分:
主标题
修改主标题栏的背景
.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 的更改生效。
任务 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. 修改第二和第三标题的背景和边框颜色
动态滚动按钮
.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. 动态滚动按钮
门户选项卡栏
.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. 门户选项卡栏
任务 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. 工具栏
路径
.pathLeafNode { font-weight: bold; color: #333399; } .pathSepa rator { color: #333399; } .pathLink { color: #333399; } |
图 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. 列表视图
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 的表
任务 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. 对话框
搜索路径
.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.弹出窗口
在菜单项上悬停
.menuItemOver { padding: 1px; color: #000000; height: 20px; background - color: #f8f8dc; } |
图 36.在菜单项上悬停
所有与品牌相关的文件都在 <install_directory>/c8/webcontent/skins/your_style/qs 文件夹下。
Query Studio 将继承在 IBM Cognos Connection 中所做的某些更改,包括主标题。
任务 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 文件:
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.控制菜单栏的所有背景
显示/隐藏菜单箭头
.menuHeaderButton { border: solid #ffce6d; border - width: 1px 1px 0px; border - collapse: collapse; cursor: pointer; cursor: hand; } |
图 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.选中的菜单选项
控制围绕整个菜单树和已收起的菜单的边框。
. menuContent, .menuContentCollapsed { color: #f8f8dc; border: 1px solid #ffce6d; padding: 3px; } .menuButton { border: 1px solid #ffce6d; border - collapse: collapse; cursor: pointer; cursor: hand; } |
图 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.修改网格部分
注意:当对象放到网格上之后将应用默认的交叉选项卡风格。
任务 5 – 保持风格变更
使用对 qs/ 文件夹中的所有 CSS 文件使用相同颜色模式的 Find and Replace 。
最终结果
与品牌相关的所有文件位于 <install_directory>/c8/webcontent/skins/your_style/ans 文件夹。
任务 1 – 修改顶端标题
要修改菜单标题,请根据突出显示部分修改 background.css 文件:
.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 文件:
.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.修改菜单栏
.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.上下文菜单风格变化
最终结果
图 50. 重新塑造 Analysis Studio 最终结果
与品牌相关的所有文件都位于 <install_directory>/c8/webcontent/skins/your_style/pat 文件夹下。
在 Report Studio CSS 文件中,许多 UI 元素都被分成组。这允许您快速修改样式,但它还意味着需要进行更多的调试才能获得想要的颜色模式。
任务 1 – 修改主标题
要修改主标题,请根据突出显示部分修改 skin.css 文件:
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 文件:
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)。对于这种情况,我们将从分组列表中移除这些特定的类。
具体而言,我们将移除以下部分,将它们移回到它们自己的位置:
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 元素的外观可能有偏差。例如,在下面的屏幕截图中,我们想要对框架内部的背景应用 “白色”。
为此,我们同样需要将相关联的类放到它们各自的位置,如下所示:
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 ,以搭配我们的颜色主题。
最终结果
在 CSS 文件中,除了指定常规的十六进制颜色之外,您还可以使用背景图片。事实上,许多 Web 站点都依赖背景图片来提供良好的颜色渐变效果。这也适用于 IBM Cognos 8 。
创建背景图片的最便捷方式是使用 PowerPoint 。遵循以下步骤创建图片:
1. 打开 PowerPoint 。
2. 使用绘图工具,将一个“rectangle ”对象拖放到幻灯中。
3. 双击新的对象。
4. 在“Color: ”拾色器中选择 “Fill Effects” 。
5. 选择双色渐变。
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.为风格添加背景图片
.boxHeaderBackground { background-color: #99aacc; background-image: url(images/header4.bmp); background-repeat: repeat; } |
图 61.为风格重复添加背景图片
添加了背景图片之后,示例 1 和 2 中的其他风格更改可用于塑造 IBM Cognos 8 。
IBM Cognos 8 允许管理员灵活地修改 IBM Cognos 8 及其所有组件的外观。IBM Cognos 提供用于控制 IBM Cognos 模式的外观和颜色的 CSS 文件。通过修改这些 CSS 文件,管理员可以改变 Cognos 8 的感观,使其与公司的品牌外观相搭配。本文档提供一些关于用户如何更好地理解和修改默认的 IBM Cognos UI 的技巧。
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 ”标题栏的颜色。 |