本文档提供了 IBM Cognos Business Insight 中用于换肤的概念、配色方案和文件的概述，也介绍了产品默认皮肤所用的 Dojo 基于主题的换肤方法。本文也提供了关于如何替代文本和徽标的信息以便支持您进一步自定义用户界面 (User Interface, UI)。并提供一个示例来说明将 IBM Cognos Business Insight 品牌重塑为一个虚拟公司需要的所有更改。
适用性
文本介绍的换肤方法仅适用于 IBM Cognos Business Insight 版本 10.1.1。该版本的所有换肤工作在未来版本中可能都需要重做。
排除与异常
本文假设读者已有 HTML、DOM 和 IBM Cognos 10 服务器方面的知识。也假设读者对 CSS 属性和规则属性有着很好的理解。
背景
IBM Cognos Business Insight 的 UI 是使用 Dojo 工具包开发的。因此，对 Dojo 主题和 CSS 类有一个基本了解，这在换肤流程中十分有用。在本小节中，对这些概念有一个基本介绍。有关 Dojo 的更多背景知识，请查看以下链接 http://dojotoolkit.org/documentation。
Dojo 主题
Dojo 库支持 4 个开箱即用的主题：Claro、Tundra、Soria 和 Nihilo。一个基于 Dojo 的应用程序可选择按原样使用其中一个主题作为其皮肤，或者可以自定义其中一个给定主题，或者从头开始开发自己的皮肤。IBM Cognos Business Insight 使用一个自定义版本的 Claro 主题。这是通过将 <body> HTML 元素的 class 属性设置为 claro 实现的，如图 1 所示。
图 1 – HTML 代码显示 <body> 元素的类属性设置为 claro
CSS 继承
Dojo 使用 CSS 继承对其 UI 组件（即，dijit 组件）进行换肤。由于 IBM Cognos Business Insight 使用 Dojo UI 组件，故需要了解 CSS 继承以便自定义 IBM Cognos Business Insight 的样式和皮肤。以下示例说明了 CSS 继承如何工作。
示例 1
.claro .dijitDialogTitleBar { Background-color: #ABD6FF; }
类 claro .dijitDialogTitleBar 定义了 claro 主题中对话框标题的背景颜色。注意类名称顺序，.dijitDialogTitleBar 是在 .claro 之后。这意味着背景色 #ABD6FF 将被应用到一些使用 .dijitDialogTitleBar 类的 DOM 节点中，同时也是另一个使用 .claro 类的 DOM 节点的子节点。
在下列图 2 显示的 HTML 片段中，通过将 dijitDialogTitleBar 指定为该类属性的值，从而将背景颜色样式应用到 <div> 类。注意，<div> 类是使用 claro 类的 <body> 的一个子类。
图 2 - HTML 代码以及一个突出显示的 div 类
在 IBM Cognos Business Insight 中，这一特定定义意味着页面中的一些使用 dijitDialogTitleBar 类的 DOM 节点将使用 #ABD6FF 作为其背景颜色，因为用于 <body> 元素的类是 claro。
示例 2
.tundra .dijitDialogTitleBar { Background-color: #FAFAFA; }
该示例也定义了对话框标题的 CSS 背景颜色，但是只有在 tundra 主题用于一个应用程序时才运行。换句话说，如果其祖先节点包括一个使用 .tundra 类的节点，那么它只适用于使用 .dijitDialogTitleBar 类的节点。
覆盖默认的 Dojo 样式
Dojo 默认加载特定主题所需的 CSS 文件和类。在 IBM Cognos Business Insight 中，自定义的 CSS 文件被加载到默认 CSS 文件顶部以覆盖主题的默认样式定义。
要覆盖一个默认规则，必须在一个自定义 CSS 文件中复制此规则并更改其值。以下示例展示了实现过程。
图 3 中所描述的 DOM 树显示一个页面：<Body class = “claro”/>，使用 <div> 元素 <div class = “left”/> 和 <div class = “right”/> 将其分成左右两个部分。然后，左右两部分从那里定义其他节点类。在本例中，左右两部分都定义了节点 <span class = “dijitButton”/>，该节点反过来定义了节点 <span Class = “dijitButtonNode”/>。
图 3 – 一个 DOM 树，由两个包含其自身节点的部分构成
要改变页面上所有按钮的背景颜色，找到用于设置按钮背景颜色的默认 CSS 类，在本例中是 .claro .dijitButton .dijitButtonNode。复制该类然后将新值 #2D5C3D 添加到自定义 CSS 文件。
.claro .dijitButton .dijitButtonNode { Background-color: #2D5C3D; }
要改变页面左边按钮的背景颜色，复制以下类然后将新值 #2D5C3D 添加到自定义 CSS 文件。
.claro .left .dijitButton .dijitButtonNode { Background-color: #2D5C3D;}
注意，上述两个示例中类名的顺序与 DOM 树层次结构中节点的顺序一致。确保样式应用或覆盖正确是非常重要的。