定制 IBM Cognos 8 UI (2)

xiaoerp

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

图 9. 示例 Web 站点


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

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


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

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

4.1 重新塑造 IBM Cognos Connection
使用的文件
/c8/webcontent/skins/my_style/portal/default.css
/c8/templates/ps/portal/system.xml
查找替换
在 default.css 文件中查找并替换上图中出现的颜色。保存并关闭该文件。
其他配置变化
分别修改下面的每个参数：
1. 修改 IBM Cognos Connection 标题：

图 12. 修改 IBM Cognos Connection 标题

2. 修改 Portal 选项卡

图 13. 修改 Portal 选项卡

3. 使用公司的 logo 替换 IBM Cognos Connection 文本
遵循以下步骤添加您的公司的 logo ：
1. 将图像放到 /c8webcontentskinsmy_styleranding 文件夹中。
2. 使用 XML 编辑器编辑 system.xml 文件。
3. 搜索“ ”。
4. 您将注意到这部分已被注释掉。去掉这部分的注释符号并为您的新风格添加以下部分：










5. 重启 IBM Cognos 8 让更改生效。
最终结果

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

4.2 重新塑造 Query Studio
使用的文件
/c8/webcontent/skins/my_style/qs/crn.css
/c8/webcontent/skins/my_style/qs/QSRVCommonUI.css
查找替换
在上面的两个 CSS 文件中，查找并替换上图中的颜色。保存并关闭该文件。
最终结果

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

4.3 重新塑造 Analysis Studio
使用的文件
/c8/webcontent/skins/my_style/ans/background.css
/c8/webcontent/skins/my_style/ans/explore.css
/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(../../../skins/corporate/ans/images/title_bar_graphic_studios.gif);
padding: 2px;
border: Opx;
width: 578px;
}


最终结果

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

4.4 重新塑造 Report Studio
使用的文件
/c8/webcontent/skins/my_style/pat/skin.css
/c8/webcontent/skins/my_style/ans/explore.css
/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 后最终结果


该贴已经同步到 xiaoerp的微博