定制 IBM Cognos 8 UI ( 4)

xiaoerp

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

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

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

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

5.1 重新塑造 Cognos Connection
所有与品牌相关的文件储存在 /c8/webcontent/skins/your_style/portal 文件夹中。
任务 1 – 修改 IBM Cognos Connection 中的 Top Line Header
要修改顶端的标题，在 default.css 文件中修改突出显示的部分：

图 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: urlimages/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. 修改后结果

任务 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.在菜单项上悬停


该贴已经同步到 xiaoerp的微博