IBM Cognos 最佳实践: 品牌化 IBM Cognos 10.1.1 Business Insight 用户界面

产品:IBM Cognos 10;关注领域:基础架构

本文档提供了 IBM Cognos Business Insight 中用于换肤的概念、配色方案和文件的概述。

Michael McGeein, 产品经理, IBM

Michael McGeein 是 Business Intelligence 团队的一名产品经理,加入 IBM Cognos 已经 6 年了。在这期间 Michael 曾参与 Financial Applications,以及 Product Management 中的 Dashboarding 和 Reporting,目前产品管理的职责包括 Desktop、Web 和 Mobile 策略。



2012 年 9 月 17 日

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

简介

目的

本文档提供了 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
图 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 类
图 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 树,由两个包含其自身节点的部分构成
图 3 – 一个 DOM 树,由两个包含其自身节点的部分构成

要改变页面上所有按钮的背景颜色,找到用于设置按钮背景颜色的默认 CSS 类,在本例中是 .claro .dijitButton .dijitButtonNode。复制该类然后将新值 #2D5C3D 添加到自定义 CSS 文件。

.claro .dijitButton .dijitButtonNode { 
	Background-color: #2D5C3D; 
}

要改变页面左边按钮的背景颜色,复制以下类然后将新值 #2D5C3D 添加到自定义 CSS 文件。

.claro .left .dijitButton .dijitButtonNode { 	
Background-color: #2D5C3D;
}

注意,上述两个示例中类名的顺序与 DOM 树层次结构中节点的顺序一致。确保样式应用或覆盖正确是非常重要的。


技巧和技术

本小节介绍了更换 IBM Cognos Business Insight 皮肤所用的文件、文件名和这些文件位置所用的命名约定。这些文件包括 CSS、图像和字符串文件。

文件位置

IBM Cognos Business Insight 是安装在 IBM Cognos 10 BI 服务器上的,品牌化所需的所有文件可在 <C10 install>/webcontent/icd 中找到。下表显示了换肤所用的文件类型、它们在文件系统上的位置,以及将用于本文其余部分中指代各个位置的速记命名约定。

文件类型文件位置命名约定
Root 目录<C10 install>/webcontent/icd<ICD location>
CSS<C10 install>/webcontent/icd/themes/default<CSS location>
UI 控件图像<C10 install>/webcontent/icd/themes/default/images<UI image location>
UI 字符串<C10 install>/webcontent/icd/bux/js/bux/nls<UI strings location>

基本 CSS 文件信息

<CSS location> 中的所有 CSS 文件都压缩成一个文件 bux.css。如果您只是对皮肤和样式进行小幅更改(比如修改或添加几个规则),则可以直接修改 bux.css。如果要更改 IBM Cognos Business Insight 的外观,则需要修改其他 CSS 文件,然后生成一个新的 bux.css。查看标题为 “生成优化的 CSS” 和 “添加自己的 CSS 文件” 的部分,获取具体操作信息。

下表介绍了 <CSS location> 中的文件以及它们的用途。

文件名格式文件内容
bux_*_skin_claro.css具有该名称格式的文件包含皮肤相关的 CSS 规则,比如,颜色、背景图像和样式。
bux_*_a11y.css具有该名称格式的文件包含专为视觉障碍人士提供的高对比度模式相关的 CSS 规则,如果仅改变图像和颜色就不需要对这些文件进行更改。
bux_*_layout.css具有该名称格式的文件包含用于定位 UI 控件以及对其进行大小调整所用的 CSS 规则。强烈建议您不要使用该名称格式编辑文件,更改这些文件可能会导致 UI 不可用。

要确定您需要对哪个文件进行更改,需要:

  • 识别想要换肤的组件
  • 使用上述文件名格式查找相关的 CSS 文件。

例如,

  • 要更改对话框皮肤,修改文件 bux_dialog_skin_claro.css
  • 要更改标题皮肤,修改文件 bux_banner_skin_claro.css

开始换肤流程之前

强烈推荐您在开始修改 CSS 文件之前备份文件夹 <CSS location>。以防换肤期间遇到问题需要恢复原始文件。

生成优化的 CSS

在 IBM Cognos Business Insight 中,所有 CSS 文件都压缩成一个名为 bux.css 的文件以减小 HTTP 流量。如果您已经对 CSS 文件进行了修改,那么需要再次生成一个 bux.css 文件。本小节将介绍具体操作。

如果平台是 Windows,

  1. 在 Command Prompt 窗口中,转到 <CSS location> 文件夹。
  2. 输入命令 copy dojo_*.css + bux_*.css bux.css

如果平台是 Linux/Unix,

  1. 在 shell 提示中,转到 <CSS location> 文件夹。
  2. 输入命令 cat dojo_*.css bux_*.css > bux.css

添加自己的 CSS 文件

如果创建了自己的 CSS 文件,并在 IBM Cognos Business Insight 的 CSS 规则顶部应用了这些文件,那么管理自己的定制文件就很容易了。要实现这一点,需要确保将这些文件附加到 bux.css 的末尾

例如,要将 mybank.css 或一系列文件,比如 mybank_dialog.cssmybank_button.css 添加到 bux.css 末尾。

如果平台是 Windows,

  1. 在 Command Prompt 窗口,转到 <CSS location> 文件夹。
  2. 输入命令 copy dojo_*.css + bux_*.css + mybank*.css bux.css

如果平台是 Linux/Unix,

  1. 在 shell 提示中,转到 <CSS location> 文件。
  2. 输入命令 cat dojo_*.css bux_*.css mybank*.css > bux.css

IBM Cognos Business Insight 品牌重塑

BM Cognos Business Insight 默认的皮肤颜色

下表显示了用于 IBM Cognos Business Insight 皮肤的所有默认颜色,刻意在皮肤中使用有限的几组颜色,这是为了使 UI 保持干净整洁。该表也显示了从默认颜色到以下小节定制皮肤示例中所用颜色的映射。

技巧:经过换肤实践后,您会发现在默认颜色和目标颜色之间建立映射是一个不错的主意。这有助于您在遵循同样的设计原则的同时保持 UI 整洁。这也有助于确保此颜色与综合颜色保持一致,同时有助于简化皮肤所用的颜色。

默认颜色用途目标颜色
529ECE命令按钮背景2D5C3D
008AFF超链接文本
0075BF文本 - 对话框标头
005489文本 - 对话框消息,表单标签
000000内容文本颜色333333
333333数据网格列文本
454545数据网格文本
626262提示文本
828282禁用文本
98B1C1对话框窗口小部件、列表框、文本框、下拉菜单边框8BB093
F3C983数据网格单元背景 - 选定的
769DC0开始页面按钮边框
F6E3BE悬浮文本 - 按钮、图标
71ADD5分隔条手柄
DFEDFB背景 - 对话框页脚C8DDCA
E8F3FD背景 - 对话框页眉
F2F5FA背景 - 仪表板画布
8CCBF7命令按钮背景悬浮状态
CFE5F4禁用命令按钮文本
DBEBF9内容面板背景
BED7E1对话框组分割线
E4F2FF开始页面按钮背景
E2E2E2数据网格边框E2E2E2
E7E5E5数据网格列页眉背景
EFF3F5背景 - 开始页面E5FAE7
FFFFFF启用命令按钮文本FFFFFF
FFFFFF内容面板和打开/保存对话框的导航面板背景

在接下来的小节中,被替换的图像文件是同一个文件,除了那些被修改为具有加深绿色的文件之外。然后,将这些文件以前缀 “mb_” 保存。前缀为 “mb_” 的文件并不出现在产品中。

开始页面

本小节介绍品牌重塑 Getting Started 页面所用的步骤。默认 Getting Started 页面如图 4 所示。

图 4 – 默认 IBM Cognos Business Insight Getting Started 页面
图 4 – 默认 IBM Cognos Business Insight Getting Started 页面

品牌重塑之后,整个页面的色调将从蓝色变为绿色,文本 IBM Cognos Business Insight 将被定制以便阅读 My Bank Business Insight

图 5 – 修改后的 IBM Cognos Business Insight Getting Started 页面使用定制文本和绿色色调
图 5 – 修改后的 IBM Cognos Business Insight Getting Started 页面使用自定义文本和绿色色调

基本信息

在该文档中,更改图像时为所有原图像名称都加了前缀 mb_,因为虚拟公司名是 My Bank。在此,我们不讨论如何创建示例中所用的图像。假设图像已经准备好了,可供 CSS 规则使用。

Getting Started 背景颜色

本小节将展示如何使用新的背景颜色和图像更改 Getting Started 页面,这是工作面板背景。

  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_guidancePage_skin_claro.css
  • 要修改的选择器是:
    • .bux-guidancePageContainer-outer
  • .bux-guidancePageContainer-outer {
    	background-color: #EFF3F5;
    	background-image: url(images/guidancePage/startpage_bg.png);
    	background-repeat: repeat-x;
    	background-position: left center;
    }

    更改为:
    .bux-guidancePageContainer-outer {
    	background-color: #E5fAE7;
    	background-image: url(images/guidancePage/mb_startpage_bg.png);
    }

Getting Started 背景图像

本小节将展示如何更改 Getting Started 页面的背景图像。

图 6 – Getting Started 页面上的默认背景图像
图 6 – Getting Started 页面上的默认背景图像
  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_guidancePage_skin_claro.css
  • 要修改的选择器是:
    • .bux-guidancePage
  • .bux-guidancePage {
    	height: 615px;
    	width: 944px;
    	background-image: url(images/guidancePage/startpage_main.png);
    	background-repeat: no-repeat;
    }

    更改为:
    .bux-guidancePage {
    	background-image: 
    url(images/guidancePage/mb_startpage_main.png);
    }

在本例中,我们为图像添加了一个外罩颜色,但您仍然可以使用自己的图像或一个没有任何图像的简单背景。

Create New 和 Open Existing 按钮

本小节将展示如何更改 Getting Started 页面上 Create NewOpen Existing 按钮的颜色和按钮标签颜色。

图 7 - Create New 和 Open Existing 功能放大按钮
图 7 - Create New 和 Open Existing 功能放大按钮
  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_guidancePage_skin_claro.css
  • 以下选择器需要修改:
    • 对于按钮颜色 - .claro .dijitButton .dijitButtonNode
    • 对于按钮标签颜色 - .icdGettingStartedLargeButton .dijitButtonText
  • 要更改两个按钮的颜色,将下列新规则添加到文件 bux_guidancePage_skin_claro.css 末尾
    .claro .bux-guidancePage-createDashboard-button-container
     .dijitButton .dijitButtonNode {
    	background-color: #C8DDCA;
    	background-image: url("images/form/mb_button.png");
    	border: 1px solid #8BB093;
    }

Create New 和 Open Existing 按钮使用默认 Dojo 样式定义按钮颜色。如果您更改了默认样式,使用该默认样式的所有按钮将同时被更改。如果只更改这两个按钮的颜色,通过指定一个只在这两个按钮容器上出现的类来约束覆盖规则。本例中,该容器是 .claro .bux-guidancePage-createDashboard-button-container .dijitButton

要更改两个按钮标签的颜色,由此更新以下类:

.icdGettingStartedLargeButton .dijitButtonText{
	color: #2D5C3D;
}

More 按钮

本小节显示如何更改 Getting Started 页面的 More 按钮。

图 8 - Getting Started 页面上的 More 按钮
图 8 - Getting Started 页面上的 More 按钮
  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_guidancePage_skin_claro.css
  • 要修改的选择器是:
    • .bux-guidancePage-more-icon
  • .bux-guidancePage-more-icon {
    	background-image: url(images/guidancePage/more_button.png);
    	background-repeat: no-repeat;
    	background-position: top;
    	width: 20px;
    	height: 20px;
    	cursor: pointer;
    }

    更改为:
    .bux-guidancePage-more-icon {
    	background-image: url(images/guidancePage/mb-more_button.png);
    	background-repeat: no-repeat;
    	background-position: top;
    	width: 20px;
    	height: 20px;
    	cursor: pointer;
    }

应用程序名称

本小节展示如何将该应用程序的名称从 “IBM Cognos Business Insight” 更改为 “My Bank Business Insight”。

  • 这里不需要修改.CSS 文件。相反,需要修改的 JavaScript 文件是
    • <UI Strings Location>/buxuimsg_en.js
  • 在 buxuimsg.js 文件中,找到 "IDS_GEN_APPLICATION_NAME": "IBM Cognos Business Insight",并将其更改为 "IDS_GEN_APPLICATION_NAME": "My Bank Business Insight"

此项更改只针对英语。如果您想要将应用程序名更改为其他语言形式,需要在特定于这些语言的文件中进行更改。文件名格式是 buxuimsg_<lang>.js。如果您想要将该应用程序名改为法语,需要在 buxuimsg_fr.js 文件中更改该字符串。

您不能更改 .js 文件的格式,这一点是非常重要的。否则可能会导致应用程序不能加载。为了安全起见,对要修改的 .js 文件进行备份。

Favourite 缩略图

本小节展示如何更改 Favorite 项目缩略图的边框属性。

图 9 - Favorite 项目缩略图
图 9 - Favorite 项目缩略图
  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_guidancePage_skin_claro.css
  • 要修改的选择器是:
    • .bux-guidancePage-thumbnail-span .bux-thumbnail-frame
  • Favorite 项缩略图的边框使用图像,因此,必须将现有图像显示设置为 none,通过将以下内容添加到文件末尾来实现。
    .bux-guidancePage-thumbnail-span .bux-thumbnail-frame {
    	display: none;
    }
  • 要添加自己的自定义边框,您有两个选择。第一个是使用图像,第二个是使用 CSS 边框和 CSS3 属性来创建圆角边框。如果您使用第二个选项,圆角在 Internet Explorer 浏览器中将不能显示。
    • 选项 1
      .bux-guidancePage-thumbnail-span .buxThumbnail {
      	background-image: url(images/guidancePage/mb_startpage_favorite.png)
      	 !important;
      	background-repeat: no-repeat;
      	background-position: top;
      }
    • 选项 2
      .bux-guidancePage-thumbnail-span .buxThumbnail{
      	border: 3px double #8BB093;
      	-moz-border-radius: 5px;
      	border-radius: 5px;
      }

标题

本小节将展示如何更改 Getting Started 窗口的 Favorite 和 How-To Video 标题颜色。

  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_guidancePage_skin_claro.css
  • 以下选择器需要修改:
    • 对于 Favorite 标题 - .bux-guidancePage-section-title
    • 对于 How-to Video 标题 - .bux-guidancePage-CBT-item-title
  • .icdGettingStartedLargeButton .dijitButtonContents,
    .bux-guidancePage-section-title {
    	font-size: 1.5em;
    	color: #396EA3;
    }

    更改为:
    .icdGettingStartedLargeButton .dijitButtonContents,
    .bux-guidancePage-section-title {
    	font-size: 1.5em;
    	color: #2D5C3D;
    }
  • .bux-guidancePage-CBT-item-title {
    	color: #365F8C;
    	font-weight: bold;
    }

    更改为:
    .bux-guidancePage-CBT-item-title {
    	color: #2D5C3D;
    	font-weight: bold;
    }

Application 栏

本小节介绍了品牌重塑 Application 栏所用步骤。默认 Application 栏如图 10 所示。

图 10 – IBM Cognos Business Insight 中的默认 Application 栏
图 10 – IBM Cognos Business Insight 中的默认 Application 栏

执行品牌重塑之后,Application 栏将具有新的绿色色调,如图 11 所示。

图 11 – 已修改为使用新绿色格式的 Application 栏
图 11 – 已修改来使用新绿色格式的 Application 栏

基本信息

需要进行此项修改的 .CSS 文件是:

  • <CSS location>/bux_banner_skin_claro.css
  • <CSS location>/bux_controls_skin_claro.css

图像的位置是:

  • <UI image location>/banner
  • <UI image location>/icons

背景图像

本小节将显示如何更改 Application 栏的背景图像。不再是多个小图像文件,取而代之的是所有图像都包含在一个图像文件中(见图 12),并通过坐标引用。

图 12 – 默认 Application 栏背景图像
图 12 – 默认 Application 栏背景图像
  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_banner_skin_claro.css
  • 要修改的选择器是:
    • .buxBannerbar .buxBannerSection.
  • .buxBannerbar .buxBannerSection {
    	background-image: url(images/banner/bar_strip.png);
    	background-repeat: repeat-x;
    	background-color: transparent;
    	background-attachment: scroll;
    	border: none;
    }

    更改为:
    .buxBannerbar .buxBannerSection {
    	background-image: url(images/banner/mb_bar_strip.png);
    	background-repeat: repeat-x;
    	background-color: transparent;
    	background-attachment: scroll;
    	border: none;
    }

图标

本小节将显示如何更改 Application 栏图标。所有图标引用相同的图片精灵。每个图标都有自己定义的类,因为它们需要不同的背景定位值。这里,只有图像精灵会不断更新,因此,如果使用不同的图片精灵,需要确保保持完全相同的位置和大小。

图 13 – 默认 Application 栏图标
图 13 – 默认 Application 栏图标
  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_banner_skin_claro.css
  • 要更改 Application 栏中所用的图标,特定于每个图标的 CSS 类必须被更新。可以同时对所有类执行此项更新,如下所示。将
    .buxBannerButtonNewImage,
    .buxBannerButtonOpenImage,
    .buxBannerButtonSaveImage,
    .buxBannerButtonDashboardViewImage,
    .buxBannerButtonHomeImage,
    .buxBannerButtonCollaboration,
    .buxBannerButtonCollaborationUpdate,
    .buxBannerButtonHelpImage,
    .buxBannerMarkAsFavoriteButton,
    .buxBannerRemoveFromFavoritesButton,
    .buxBannerButtonMailtoURL,
    .buxBannerMenuRefreshBlue,
    .buxBannerButtonAddImage{
    	 background-image: url('images/icons/mb_blue_bar_strip.png');
    }

    更改为:
    .buxBannerButtonNewImage,
    .buxBannerButtonOpenImage,
    .buxBannerButtonSaveImage,
    .buxBannerButtonDashboardViewImage,
    .buxBannerButtonHomeImage,
    .buxBannerButtonCollaboration,
    .buxBannerButtonCollaborationUpdate,
    .buxBannerButtonHelpImage,
    .buxBannerMarkAsFavoriteButton,
    .buxBannerRemoveFromFavoritesButton,
    .buxBannerButtonMailtoURL,
    .buxBannerMenuRefreshBlue,
    .buxBannerButtonAddImage{
    	 background-image: url('images/icons/blue_bar_strip.png');
    }

控件标签

本小节将显示如何更改控件标签颜色,比如 Layout 和 Style。

图 14 – Layout 和 Style 控件标签
图 14 – Layout 和 Style 控件标签
  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_banner_skin_claro.css
  • 可以使用以下规则对所有 CSS 类同时执行此项更新。将
    .buxBannerButton button,
    .buxBannerButton,
    .buxBannerDropDownButton,
    .buxBannerComboButton .dijitButtonText,
    .buxBannerComboButton
    {
    	font-weight: normal;
    	color: #0075BF;
    }

    更改为:
    .buxBannerButton button,
    .buxBannerButton,
    .buxBannerDropDownButton,
    .buxBannerComboButton .dijitButtonText,
    .buxBannerComboButton {
    		font-weight: normal;
    		color: #2D5C3D;
    }

下拉菜单指示器

本小节将展示如何更改 Application 栏上的下拉菜单指示器。要重点强调的是这一更改将更新 IBM Cognos Business Insight 中的所有下拉菜单指示器。

图 15 – 下拉菜单指示器
图 15 – 下拉菜单指示器
  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_control_skin_claro.css
  • 要修改的选择器是:
    • .claro .dijitArrowButtonInner
  • .claro .dijitArrowButtonInner{
    	background-image: url("images/icons/blue_bar_strip.png");
    	background-position:-192px;
    }

    更改为:
    .claro .dijitArrowButtonInner{
    	 background-image: url("images/icons/mb_blue_bar_strip.png");
    	 background-position:-192px;
    }

Content Pane

本小节将介绍品牌重塑 Content Pane 所用的步骤。默认 Content Pane 如图 16 所示。

图 16 – 默认 Content Pane
图 16 – 默认 Content Pane

执行品牌重塑之后,Content Pane 将具有新的绿色色调,如图 17 所示。

图 17 – Content Pane 修改为使用新的绿色色调
图 17 – Content Pane 修改为使用新的绿色色调

基本信息

需要执行此项修改的 .CSS 文件是:

  • <CSS location>/bux_contentPane_skin_claro.css
  • <CSS location>/bux_bordercontainer_skin_claro.css

Content Pane 图像文件位置是:

  • <UI image location>/images/icons
  • <UI image location>/form/icons
  • <UI image location>/collapsablepane

鼠标悬停和选择突出显示

本小节将显示如何更改树中突出显示项目的背景颜色。

图 18 – Content Pane 中带蓝色突出显示的 My Folder 项
图 18 – Content Pane 中带蓝色突出显示的 My Folder 项
  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_tree_skin_claro.css
  • 以下选择器需要修改:
    • .claro .dijitTreeRowSelected
    • .claro .dijitTreeRowActive
    • .claro .dijitTreeRowHover
  • 要更新边框颜色和背景颜色,将以下内容添加到文件末尾。
    .claro .dijitTreeRowSelected, .claro .dijitTreeRowActive {
    		border-color: #8BB093;
    		background-color: #C8DDCA;
    }
    
    .claro .dijitTreeRowHover {
    		background-color: #E5FAE7;
    }

背景和分割线

本小节将显示如何更改新背景颜色、Content Pane 分割线的新背景颜色,以及打开/关闭 Content Pane 按钮的新背景颜色。

  • 需要修改的 .CSS 文件有:
    • <CSS location>/bux_contentPane_skin_claro.css
    • <CSS location>/bux_bordercontainer_skin_claro.css
  • 以下选择器需要修改:
    • 对于主背景颜色:
      • .bux-contentpane-controls-section
      • .icdContentpaneToolbarContainer
      • .bux-contentpane-border-container
    • 对于分割线:
      • .icdUI .dijitSplitterV
      • .icdUI .dijitSplitterVHover
      • .icdUI .dijitSplitterH
      • .icdUI .dijitSplitterHHover
    • 对于打开/关闭按钮:
      • .icdUI .dijitSplitterV .dijitSplitterThumb
  • 要更新背景颜色,在文件 bux_contentPane_skin_claro.css 中,将
    .bux-contentpane-controls-section,
    .icdContentpaneToolbarContainer,
    .bux-contentpane-border-container {
    	background-color:#E8F3FD !important;
    	background-image: none !important;
    }

    更改为:
    .bux-contentpane-controls-section, .icdContentpaneToolbarContainer, 
    .bux-contentpane-border-container {
    	background-color: #C8DDCA !important;
    }
  • 要更新 Content Pane 分割线的背景,在文件 bux_bordercontainer_skin_claro.css 中,将
    .icdUI .dijitSplitterV, .icdUI .dijitSplitterVHover,
    .icdUI .dijitSplitterH, .icdUI .dijitSplitterHHover
     {
    	background-image: none !important;
    	background-color: #E8F3FD;
    	-moz-box-shadow: 0 0 11px #CECECE
    }

    更改为:
    .icdUI .dijitSplitterV, .icdUI .dijitSplitterVHover,
      .icdUI .dijitSplitterH, .icdUI .dijitSplitterHHover {
    	background-image: none !important;
    	background-color: #C8DDCA;
    }
  • 要更新 Content Pane 分割线打开/关闭按钮,在文件 bux_bordercontainer_skin_claro.css 中,将
    .icdUI .dijitSplitterV .dijitSplitterThumb {
    	left: 0;
    	width: 5px;
    	height: 51px !important;
    	background-image: url('images/collapsablepane/border_button.png') !important;
    }

    更改为:
    .icdUI .dijitSplitterV .dijitSplitterThumb {
    	background-image: url("images/collapsablepane/mb_border_button.png") !important;
    }

选项卡

本小节将展示当鼠标在选项卡上悬停时,如何更该选项卡的背景颜色。请注意,这也将更改属性对话框中的选项卡。

图 19 - 选项卡按钮
图 19 - 选项卡按钮
  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_contentPane_skin_claro.css
  • 以下选择器需要修改:
    • 正常状态 - .claro .dijitTab .dijitTabContent
    • 鼠标悬停状态 - .claro .dijitTabHover .dijitTabContent
    • 活动(单击)状态 - .claro . dijitTabActive.dijitTabContent
  • 要更新正常状态的背景颜色,将以下内容添加到文件末尾:
    .claro .dijitTab .dijitTabContent {
    		color: #8BB093;
    }
  • 要更新鼠标悬停状态和活动状态的背景颜色,将以下内容添加到文件末尾:
    .claro .dijitTabHover .dijitTabContent,
    .claro .dijitTabActive .dijitTabContent {
    		background-color: #C8DDCA;
    		border-color: #8BB093; 
    }

图标

本小节显示如何更改 Content Pane 上的视图控件图标。所有图标引用相同的图片精灵,每个图标定义了自己的类,因为它们需要不同的背景定位值。在这里,我们仅更新图像精灵,因此,当使用不同的图片精灵时,需要确保位置和大小完全相同。

图 20 - Content Pane 上的图标样例
图 20 - Content Pane 上的图标样例
  • 要修改的 .CSS 文件是:
    • <CSS location>/ bux_contentPane_skin_claro.css
  • 要更改 Content Pane 中视图控件所用的图标,则必需更新特定于每个图标的 CSS 类。使用如下规则可同时完成所有类的更新。将
    .bux-search-results-icon, 
    .bux-my-favorite-icon, .contentPaneContextMenuViewThumbnail, 
    .contentPaneContextMenuViewList, .contentPaneContextMenuViewTree, 
    .bux-views-item-image-thumbnail, 
    .bux-views-item-image-list, 
    .bux-views-item-image-tree, 
    .bux-refresh-button, 
    .bux-businesscard-icon, 
    .bux-upOneLevel-icon, 
    .bux-tools-icon, 
    .bux-content-icon, 
    .bux-myFolders-icon {
    	background-image: 
    url("images/icons/mb_content_pane_toolbar_strip.png");
    }

    更改为:
    .bux-search-results-icon, 
    .bux-my-favorite-icon, .contentPaneContextMenuViewThumbnail, 
    .contentPaneContextMenuViewList, .contentPaneContextMenuViewTree, 
    .bux-views-item-image-thumbnail, 
    .bux-views-item-image-list, 
    .bux-views-item-image-tree, 
    .bux-refresh-button, 
    .bux-businesscard-icon, 
    .bux-upOneLevel-icon, 
    .bux-tools-icon, 
    .bux-content-icon, 
    .bux-myFolders-icon {
    	background-image: 
    url("images/icons/mb_content_pane_toolbar_strip.png");
    }

下拉菜单

本小节显示如何更改 Content Pane 中下拉菜单的样式。

图 21 – Content Pane 中的下拉菜单
图 21 – Content Pane 中的下拉菜单
  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_contentPane_skin_claro.css
  • 需要修改的选择器是:
    • .icdContentpaneTabContainer .dijitDropDownButton .dijitButtonNode
  • 要更新下拉菜单的背景颜色和边框,将以下内容添加到文件末尾。
    .icdContentpaneTabContainer .bux-contentpane-category-section .dijitButtonNode {
    	background-color: #E5FAE7;
    	border-color: #8BB093;
    	background-image: url(images/form/mb_button.png);
    }

对话框

本小节介绍了如何品牌重塑对话框。将会同时更改所有对话框。默认对话框如图 22 所示。

图 22 – 默认 Email Link 对话框
图 22 – 默认 Email Link 对话框

执行品牌重塑之后,Email Link 对话框将具有新的绿色色调,如图 23 所示。

图 23 – Email Link 对话框修改为使用新的绿色色调
图 23 – Email Link 对话框修改为使用新的绿色色调

基本信息

需要执行此项修改的 .CSS 文件是:

  • <CSS location>/bux_dialog_skin_claro.css

该对话框图像文件的位置:

  • <UI image location>/dialogs

边框

本小节将显示如何更改边框线和阴影颜色。注意,Internet Explorer 不支持阴影。

  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_dialog_skin_claro.css
  • 以下选择器需要修改:
    • .icdUI .dijitDialog
    • .icdBorder
    • .icdBorderPopup
  • 要更新边框颜色和阴影,将以下内容添加到文件末尾。注意,盒阴影 (box-shadow) 需要一个 RGB 颜色。该颜色与 #8BB093 是同一个颜色。该更改也将应用到弹出菜单边框。
    .icdUI .dijitDialog, .icdBorder, .icdBorderPopup { 
    		border-color: #8BB093; 
    		box-shadow:0 0 3px 3px rgba(139,176,147,0.6) !important;
    }

标题和对话框文本

本小节将显示如何更改标题文本颜色和对话框文本颜色。

  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_dialog_skin_claro.css
  • 以下选择器需要修改:
    • .bux-InformationDialog-mainMessage
    • .claro .dijitDialogTitle
  • .icdUI .bux-InformationDialog-detail-section .dijitTitlePaneTextNode,
    .bux-InformationDialog-mainMessage,
    .bux-InformationDialog-controlLabel
    {
    	color: #005489;
    }

    更改为:
    .icdUI .bux-InformationDialog-detail-section .dijitTitlePaneTextNode,
    .bux-InformationDialog-mainMessage,
    .bux-InformationDialog-controlLabel
    {
    	Color: 2D5C3D;
    }

    或者,将
    .claro .dijitDialogTitle {
        color: #0075BF;
        font-size: 1.18em;
        font-weight: bold;
    }

    更改为:
    .claro .dijitDialogTitle {
        color: #2D5C3D;
        font-size: 1.18em;
        font-weight: bold;
    }

按钮

本小节将显示如何更改按钮背景颜色、鼠标悬停时按钮的背景颜色,以及按钮边框颜色。

图 24 - 对话框中的按钮样例
图 24 - 对话框中的按钮样例
  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_dialog_skin_claro.css
  • 要修改的选择器是:
    • .claro .icdDialogButtonBar .dijitButtonNode
  • claro .icdDialogButtonBar .dijitButtonNode{
    	background-image:url(images/dialog/button.png);
    	background-position: 0 -25px;
    	background-color: #529ECE;
    	color: #FFFFFF;
    	font-size: 1em;
    	font-weight: bold;
    	min-width: 50px;
    	padding-bottom: 3px;
    }

    更改为:
    claro .icdDialogButtonBar .dijitButtonNode{
    	background-image:url(images/dialog/mb_button.png);
    	background-position: 0 -25px;
    	background-color: #529ECE;
    	color: #2D5C3D;
    	font-size: 1em;
    	font-weight: bold;
    	min-width: 50px;
    	padding-bottom: 3px;
    	border-color: #8BB093
    }

注意,鼠标悬停在该按钮上时,按钮的背景颜色使用 background-image 属性设置。

页眉和页脚

本小节将显示如何更改对话框中页眉和页脚部分的背景颜色和边框线。

  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_dialog_skin_claro.css
  • 以下选择器需要修改:
    • .claro .dijitDialogTitleBar
    • .claro .dijitDialogPaneActionBar
  • 要更新页眉背景颜色和下边框,将
    .claro .dijitDialogTitleBar{
    	background-color:#DFEDFB;
    	border: none;
    }

    更改为:
    	.claro .dijitDialogTitleBar {
    		background-color: #C8DDCA;
    		border-color-bottom: #8BB093;
    }
  • 要更改页脚的背景颜色和上边框,将
    .claro .dijitDialogPaneActionBar{
    	background-color: #E0EBF7;
    	border-top: 1px solid #B6CFD9;
    }

    更改为:
    .claro .dijitDialogPaneActionBar {
    		background-color: #C8DDCA;
    		border-color-top: #8BB093;
    }

Close 图标

本小节将显示如何更改对话框中 Close 图标的样式。

图 25 – 对话框中所用的 Close 图标
图 25 – 对话框中所用的 Close 图标
  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_dialog_skin_claro.css
  • 要修改的选择器是:
    • .claro .dijitDialogCloseIcon
  • .claro .dijitDialogCloseIcon{
    	background-image:url(images/dialog/dialog_icon_close_strip.png);
    	background-position: 0px 0px;
    	width: 16px;
    	height: 16px;
    
    }

    更改为:
    .claro .dijitDialogCloseIcon{
    	background-image:url(images/dialog/mb_dialog_icon_close_strip.png);
    	background-position: 0px 0px;
    	width: 16px;
    	height: 16px;
    
    }

窗口小部件

本小节介绍了品牌重塑窗口小部件顶部的点播工具栏所用的步骤。默认窗口小部件框的样式如图 26 所示。

图 26 – 默认窗口小部件框
图 26 – 默认窗口小部件框

执行品牌重塑之后,窗口小部件框将具有新的绿色色调,如图 27 所示。

图 27 – 窗口小部件框修改为使用新的绿色格式
图 27 – 窗口小部件框修改为使用新的绿色格式

基本信息

需要执行此项修改的 .CSS 文件是:

  • <CSS location>/bux_widget _skin_claro.css

窗口小部件框图像文件的位置:

  • <UI image location>/images/widgets

背景

本小节将展示如何更改点播工具栏的的背景颜色。

  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_toolbar_skin_claro.css
  • 要修改的选择器是:
    • .bux-toolbar
  • .icdUI .bux-toolbar .dijitToolbar {
    	background-color: #EBF4FD;
    }

    更改为:
    .icdUI .bux-toolbar .dijitToolbar {
    	background-color: #C8DDCA;
    }

Dot 菜单

本小节将显示如何更改蓝色 Dot 菜单按钮的图像,如图 28 所示。

图 28 – 默认 Dot 菜单按钮
图 28 – 默认 dot 菜单按钮

执行品牌重塑之后,Dot 菜单按钮将具有如图 29 所示的新的绿色色调。

图 29 - 新绿色色调的 Dot 菜单按钮
图 29 - 新绿色色调的 Dot 菜单按钮
  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_toolbar_skin_claro.css
  • 要修改的选择器是:
    • .bux-toolbar-dropdown-section .dijitArrowButtonInner
  • .claro .bux-toolbar-dropdown-section .dijitArrowButtonInner {
    	background-image: url("images/widget_toolbar/odtb.png");
    	background-position: 0 0;
    	background-repeat: no-repeat;
    	height: 25px;
    	width: 25px
    }

    更改为:
    .claro .bux-toolbar-dropdown-section .dijitArrowButtonInner {
    	background-image: url("images/widget_toolbar/mb_odtb.png");
    	background-position: 0 0;
    	background-repeat: no-repeat;
    	height: 25px;
    	width: 25px
    }

边框

本小节将显示如何更改边框颜色和阴影。

  • 要修改的 . CSS 文件是:
    • <CSS location>/bux_widget_skin_claro.css
  • 以下选择器需要修改:
    • .widget-border
    • .bux-toolbar-inner
  • 将以下内容添加到文件末尾:
    .widget-border {
    	border-color: #C8DDCA!important; 
    }
    
    .bux-toolbar-inner {
    	box-shadow: 0 1px 3px #C8DDCA inset;
    }

边框

本小节将显示如何更改边框颜色。

  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_widget_skin_claro.css
  • 要修改的选择器是:
    • .claro .dijitTooltipContainer
  • 要更新背景颜色和顶端/底端边框,将以下内容添加到文件结尾:
    .claro .dijitTooltipContainer {
    	border-color: #8BB093;
    }

菜单

本小节介绍了品牌重塑菜单所用的步骤。IBM Cognos Business Insight 的默认主菜单如图 32 所示。

图 32 – 默认 IBM Cognos Business Insight 主菜单
图 32 – 默认 IBM Cognos Business Insight 主菜单

执行品牌重塑之后,主菜单将具有新的绿色色调,如图 33 所示。

图 33 – IBM Cognos Business Insight 主菜单修改为使用新的绿色色调
图 33 – IBM Cognos Business Insight 主菜单修改为使用新的绿色色调

基本信息

需要执行此项修改的 .CSS 文件是:

  • <CSS location>/bux_menu.css

菜单图像文件的位置:

  • <UI image location>/menu

菜单项鼠标悬停效果

本小节显示如何更改菜单项的鼠标悬停颜色。

  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_menu.css
  • 以下选择器需要修改:
    • .claro .dijitMenuActive .dijitMenuItemHover
    • .claro .dijitMenuActive .dijitMenuItemSelected
  • .claro .dijitMenuActive .dijitMenuItemHover,
      .claro .dijitMenuActive .dijitMenuItemSelected{
    	background-color: #F6E3BE;
    	border-color: #F6E3BE;
    }

    更改为:
    .claro .dijitMenuActive .dijitMenuItemHover,
      .claro .dijitMenuActive .dijitMenuItemSelected{
    	background-color: #C8DDCA;
    	border-color: #C8DDCA;
    }

子菜单指示器

本小节将显示如何更改子菜单指示器的颜色

  • 要修改的 .CSS 文件是:
    • <CSS location>/bux_menu.css
  • 要修改的选择器是:
    • .claro .dijitMenuExpand>
  • .claro .dijitMenuExpand{
    	background-image:url(images/menu/menu_icon_arrow.png);
    	background-position: center center;
        height: 10px;
        width: 10px;
    }

    更改为:
    .claro .dijitMenuExpand{
    	background-image:url(images/menu/mb_menu_icon_arrow.png);
    	background-position: center center;
        height: 10px;
        width: 10px;
    }

附录 A - 样例

本文所用的样例可作为一个指南或起点以供使用。

要部署样例,将文件提取到 <C10 install location>/webcontent

<CSS location> 下应该有大量 mb_*.css 文件,本文中引用的图像应该在其各自的文件夹中。

要应用 MyBank 皮肤,需要重新生成优化的 CSS 文件,如 生成优化的 CSS 部分所介绍的。

最简单的开始方法是创建自己的颜色表,然后,通过进行一次搜索并使用新颜色替换旧颜色来更新我们的 MyBank 样例。

参考资料

学习

获得产品和技术

讨论

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

条评论

developerWorks: 登录

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


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


忘记密码?
更改您的密码

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

 


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

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

选择您的昵称



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

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

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

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

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

 


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


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Information Management
ArticleID=835446
ArticleTitle=IBM Cognos 最佳实践: 品牌化 IBM Cognos 10.1.1 Business Insight 用户界面
publish-date=09172012