IBM Cognos BI 最佳實踐: 定製 IBM Cognos 8 UI
本文檔爲在 IBM Cognos 8 中創建定製風格（或 “皮膚”）提供一些技巧。本文檔概述了在 IBM Cognos 8 中創建皮膚涉及到的概念、顏色模式和文件。此外，還提供了一些任務示例，以更好地演示創建定製風格需要進行的所有更改。
1. 簡介
本文檔爲在 IBM Cognos 8 中創建定製風格（或 “皮膚”）提供一些技巧。本文檔概述了在 IBM Cognos 8 中創建皮膚涉及到的概念、顏色模式和文件。此外，還提供了一些任務示例，以更好地演示創建定製風格需要進行的所有更改。本文檔提供了兩個例子；一個例子演示如何使用 find-andreplace 技術快速地重新修改 IBM Cognos 8 的風格以適合您的企業的風格，另一個例子介紹了許多不同參數，並展示如何通過調整這些參數改變界面。附錄提供了一個常見參數列表。本文檔不提供關於如何定製現有報告風格的說明。
圖 1. IBM Cognos 8 UI 示例
2. 理解各種風格中使用的顏色模式
“Corporate”風格的默認顏色
瞭解默認顏色模式讓您能夠根據自己想要的風格匹配默認顏色。所有 IBM Cognos 組件都嚴格遵循相同的顏色模式。下圖列出了“Corporate ”風格預定義的大部分顏色。一些 IBM Cognos 組件可能經常會使用未在下圖中給出的顏色。
圖 2. IBM Cognos 8 UI 常用顏色
理解十六進制顏色
挑選顏色的最好方法是進入 Web 站點並將它截屏下來放到 Paint Shop Pro (PSP) 中。然後使用 paint dropper 工具找出顏色的十六進制值，方法爲單擊顏色並在右邊面板雙擊該顏色。
將顏色映射到用戶界面的各個部分
下圖提供的例子展示了默認的“corporate ”風格使用的顏色模式。可以將它用作參照確定如何將您自己的顏色與預定義的顏色匹配。
圖 3. IBM Cognos Connection
圖 4. Query Studio
圖 5. Analysis Studio
3. 定製 IBM Cognos 8 UI
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 ”圖表。
圖 6. 所有現有風格的列表
5. 這將打開一個“New Style Wizard ”。爲風格命名。
6. 在“Style Location Name ”下提供準確的文件夾名。如果您要預覽風格可以使用預覽頁。下面給出了預覽頁的位置。
圖 7. 預覽頁的位置
7. 導入了風格之後，您就可以在首選項中的下拉列表中查看它。
圖 8. 查看導入的風格
IBM Cognos 8 風格使用的文件
跨所有 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 站點如下所示。
圖 9. 示例 Web 站點
您想要重新修改 IBM Cognos 的風格以搭配該顏色主題。爲此，您首先要將“corporate ”風格中的默認顏色映射到我們想要使用的顏色。
下面的 HTML 頁面主要使用以下 3 種顏色：
圖 10. 示例站點使用的 3 種顏色
使用這種顏色模式時，您將使用以下顏色替換默認的顏色（有少量沒有替換）。注意：選擇顏色模式時，要嘗試保持相同的顏色濃度，比如用濃顏色匹配濃顏色，用淡顏色匹配淡顏色。
圖 11. 示例站點的顏色匹配
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 選項卡
圖 13. 修改 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 後最終結果
4.2 重新塑造 Query Studio
使用的文件
- <install location>/c8/webcontent/skins/my_style/qs/crn.css
- <install location>/c8/webcontent/skins/my_style/qs/QSRVCommonUI.css
查找替換
在上面的兩個 CSS 文件中，查找並替換上圖中的顏色。保存並關閉該文件。
最終結果
圖 15. 重新塑造 Query Studio 後最終結果
4.3 重新塑造 Analysis Studio
使用的文件
- <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(../../../skins/corporate/ans/images/title_bar_graphic_studios.gif);
padding: 2px;
border: Opx;
width: 578px;
}
最終結果
圖 16. 重新塑造 Analysis Studio 後最終結果
4.4 重新塑造 Report 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 後最終結果
4.5 重新塑造 Metrics Manager
使用的文件
- <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 後的最終結果
4. 重新塑造 Event Studio
使用的文件
- <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
}
最終結果
圖 22. 重新塑造 Event Studio 的最終結果
5. 示例 2 — 理解各個 UI 參數
第一個例子提供瞭如何快速重新塑造 IBM Cognos 8 的風格，即使用定製的顏色模式替換 CSS 文件中的默認顏色。儘管這種方法很有用，但是在許多情況下，使用不適當的顏色替換了某些 UI 元素，或者您可能需要更精確地控制顏色模式。對於這些情況，您需要更好地理解控制佈局的所有參數，並有選擇地使用定製顏色替換某些顏色。
圖 23. 有選擇地使用定製顏色替換某些顏色
使用第一種方法中的技巧從 corporate 風格入手。您將修改所有 IBM Cognos 組件，並且每次只修改一個組件。在這個例子中，您使用的主要顏色爲：
圖 24. 本例中使用的主要顏色
5.1 重新塑造 Cognos Connection
所有與品牌相關的文件儲存在 <install_directory>/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: 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 的更改生效。
圖 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.在菜單項上懸停
5.2 重新塑造 Query Studio
所有與品牌相關的文件都在 <install_directory>/c8/webcontent/skins/your_style/qs 文件夾下。
Query Studio 將繼承在 IBM Cognos Connection 中所做的某些更改，包括主標題。
圖 37.重新塑造 Query Studio
任務 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 文件：
圖 38.修改工具欄
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 。
最終結果
圖 44. 保持風格變更
5.3 重新塑造 Analysis Studio
與品牌相關的所有文件位於 <install_directory>/c8/webcontent/skins/your_style/ans 文件夾。
任務 1 – 修改頂端標題
要修改菜單標題，請根據突出顯示部分修改 background.css 文件：
圖 45.修改頂端標題
.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:(../../../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 文件：
圖 46.修改工具欄
.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 最終結果
5.4 重新塑造 Report Studio
與品牌相關的所有文件都位於 <install_directory>/c8/webcontent/skins/your_style/pat 文件夾下。
在 Report Studio CSS 文件中，許多 UI 元素都被分成組。這允許您快速修改樣式，但它還意味着需要進行更多的調試才能獲得想要的顏色模式。
任務 1 – 修改主標題
要修改主標題，請根據突出顯示部分修改 skin.css 文件：
圖 51.修改主標題
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 文件：
圖 52.修改菜單欄
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)。對於這種情況，我們將從分組列表中移除這些特定的類。
圖 53.修改左側面板
具體而言，我們將移除以下部分，將它們移回到它們自己的位置：
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 元素的外觀可能有偏差。例如，在下面的屏幕截圖中，我們想要對框架內部的背景應用 “白色”。
圖 54.修改框架內部的背景
爲此，我們同樣需要將相關聯的類放到它們各自的位置，如下所示：
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 ，以搭配我們的顏色主題。
最終結果
圖 55.清理剩餘的 UI
6. 示例 3 — 使用背景圖片
背景
在 CSS 文件中，除了指定常規的十六進制顏色之外，您還可以使用背景圖片。事實上，許多 Web 站點都依賴背景圖片來提供良好的顏色漸變效果。這也適用於 IBM Cognos 8 。
圖 56. 使用背景圖片
創建背景圖片
創建背景圖片的最便捷方式是使用 PowerPoint 。遵循以下步驟創建圖片：
1. 打開 PowerPoint 。
2. 使用繪圖工具，將一個“rectangle ”對象拖放到幻燈中。
圖 57.將對象拖放到幻燈中
3. 雙擊新的對象。
4. 在“Color: ”拾色器中選擇 “Fill Effects” 。
圖 58.在拾色器中選擇顏色
5. 選擇雙色漸變。
圖 59.選擇雙色漸變
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 。
7. 結束語
IBM Cognos 8 允許管理員靈活地修改 IBM Cognos 8 及其所有組件的外觀。IBM Cognos 提供用於控制 IBM Cognos 模式的外觀和顏色的 CSS 文件。通過修改這些 CSS 文件，管理員可以改變 Cognos 8 的感觀，使其與公司的品牌外觀相搭配。本文檔提供一些關於用戶如何更好地理解和修改默認的 IBM Cognos UI 的技巧。
8. 附錄 — 參數列表
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 ”標題欄的顏色。 |
參考資料
學習
- 通過 developerWorks Information Management 專區：在這裏可以學到更多關於 Information Management 的知識。還可以找到技術文檔、how-to 文章、培訓、下載、產品信息等。
- 通過 Information Management 專區 Cognos BI 專題，瞭解更多有關 Cognos BI 專題的產品和技術資源。
- 通過 商業智能入門以及 Cognos 產品介紹，瞭解 商業智能的基本概念和相關技術，並介紹了 Cognos 商業智能相關的產品。
- 通過訪問 IBM Cognos 8 Business Intelligence，學習 IBM Cognos 8 Business Intelligence 產品的相關知識。
- 通過訪問 Cognos 8.3 Software Environments，瞭解 Cognos 8.3 產品安裝的相關環境要求。
獲得產品和技術
- 在線試用 IBM Cognos BI 試用版軟件，瞭解 IBM Cognos BI 商業智能解決方案的最新版本新功能。
- 下載 IBM Cognos Express V9 試用版軟件，瞭解 IBM 專爲中型企業定製的集成商業智能和計劃解決方案。
- 下載免費的 IBM Information Management 試用版軟件，瞭解 IBM Information Management 軟件的最新版本和特性。
- 獲取更多 IBM 試用版軟件，並熟練掌握來自 DB2®、Lotus®、Tivoli®，以及 WebSphere® 的開發工具和中間件產品，用這些試用版軟件開發您的下一個項目。這些試用版軟件可以免費直接從 developerWorks 下載。
討論
- 參與 developerWorks blogs 並加入 developerWorks 中文社區，查看開發人員推動的博客、論壇、組和維基，並與其他 developerWorks 用戶交流。
條評論
|
快來添加第一條評論 |
-
![]()
IBM PureSystems
IBM PureSystems™ 系列解決方案是一個專家集成系統
-
![]()
developerWorks 學習路線圖
通過學習路線圖系統掌握軟件開發技能
-
![]()
軟件下載資源中心
軟件下載、試用版及雲計算
請 登錄 或 註冊 後發表評論。
注意：評論中不支持 HTML 語法