专注于互联网--专注于架构

 最新标签
网站地图
文章索引
Rss订阅

首页 »编程综合 » IBM Cognos BI 最佳实战: 定制 IBM Cognos 8 UI(上) »正文

IBM Cognos BI 最佳实战: 定制 IBM Cognos 8 UI(上)

来源: 发布时间:星期三, 2010年5月26日 浏览:0次 评论:0
　　1. 介绍

　　本文档为在 IBM Cognos 8 中创建定制风格(或 “皮肤”)提供些窍门技巧本文档概述了在 IBM Cognos 8 中创建皮肤涉及到概念、颜色模式和文件此外还提供了些任务举例以更好地演示创建定制风格需要进行所有更改本文档提供了两个例子；个例子演示如何使用 find-and­replace 技术快速地重新修改 IBM Cognos 8 风格以适合您企业风格另个例子介绍了许多区别参数并展示如何通过调整这些参数改变界面附录提供了个常见参数列表本文档不提供有关如何定制现有报告风格介绍说明

图 1. IBM Cognos 8 UI 举例


　　查看原图(大图)

　　2. 理解各种风格中使用颜色模式

　　“Corporate”风格默认颜色

　　了解默认颜色模式让您能够根据自己想要风格匹配默认颜色所有 IBM Cognos 组件都严格遵循相同颜色模式下图列出了“Corporate ”风格预定义大部分颜色些 IBM Cognos 组件可能经常会使用未在下图中给出颜色

图 2. IBM Cognos 8 UI 常用颜色


　　查看原图(大图)

　　理解十 6进制颜色

　　挑选颜色最好思路方法是进入 Web 站点并将它截屏下来放到 Pa Shop Pro (PSP) 中然后使用 pa dropper 工具找出颜色十 6进制值思路方法为单击颜色并在右边面板双击该颜色　

　　将颜色映射到用户界面各个部分

　　下图提供例子展示了默认“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. 复制个现有风格当做模板使用所有风格都在 < 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 ”文件夹下找到； < 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



　　.xml – system.xml 文件(< 安装位置 >\c8\templates\ps\portal 目录)用于修改功能或隐藏用户界面特定部分该文件中大部分参数适用于所有用户

　　更改文本、字体和图像

　　更改组件名和文本消息 – 您可以更改 IBM Cognos 8 组件名称并修改附带文本消息思路方法为在文本编辑器中打开相关消息文件然后对文本串执行搜索替换消息文件在 c8_location/msgsdk 目录下要让修改生效必须重新启动 IBM Cognos 服务

　　更改 IBM Cognos 8 字体 – 您可以通过修改 <-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

　　使用文件

　　< location>/c8/webcontent/skins/my_style/portal/default.css

　　< 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. 将图像放到 < location>/c8\webcontent\skins\my_style\branding 文件夹中

　　2. 使用 XML 编辑器编辑 system.xml 文件

　　3. 搜索“<!-- Custom OEM headers --> ”

　　4. 您将注意到这部分已被注释掉去掉这部分注释符号并为您新风格添加以下部分:

　　<!--　Custom　OEM　headers　-->　
<param　name="0EM">　
<!--　
Specy　custom　Cognos　Connection　/　Cognos　Viewer　left　side　
header　here　in　the　form　of　XHTML　snippets.　
Custom　headers　can　be　style　-　specic.　
Example:　
-->　
　
<customHeader　showContext="false"　contextDelimiter="">　
<style　styleFolderName="my_style">　
　<table　style="background-color:#2d5d3d">　
　<tr>　
　<td><img　
　src="../skins/my_style/branding/bank_logo.g"/></td>　
　</tr>　
　</table>　
</style>　
　
<style　styleFolderName="corporate">　
　<table　style="background　-　color:#ffffff"　>　
　<tr>　
　<td>　<img　
　src="../skins/corporate/branding/my_logo.g"/>　
　</td>　
　<td　="headerTitle"　s　
　tyle="padding　-　right:2px;white　-　
　space:nowrap">　My　company　</td>　
　</tr>　
　</table>　
</style>　
　
<style　styleFolderName="ic">　
　<table　style="background　-　color:#cccccc">　
　<tr>　
　<td>　<img　
　src="../skins/ic/branding/my_logo.g"/>　
　</td>　
　<td　="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

　　使用文件

　　< location>/c8/webcontent/skins/my_style/qs/crn.css

　　< location>/c8/webcontent/skins/my_style/qs/QSRVCommonUI.css

　　查找替换

　　在上面两个 CSS 文件中查找并替换上图中颜色保存并关闭该文件

　　最终结果

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


　　4.3 重新塑造 Analysis Studio

　　使用文件

　　< location>/c8/webcontent/skins/my_style/ans/background.css

　　< location>/c8/webcontent/skins/my_style/ans/explore.css

　　< 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.g);　
　padding:　2px;　
　border:　Opx;　
　width:　578px;　
　}　

　　最终结果

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


　　4.4 重新塑造 Report Studio

　　使用文件

　　< location>/c8/webcontent/skins/my_style/pat/skin.css

　　< location>/c8/webcontent/skins/my_style/ans/explore.css

　　< 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.g);　
　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

　　使用文件

　　< location>/c8/webcontent/skins/my_style/cmm/default.css

　　< location>/c8/webcontent/skins/my_style/cmm/admin_styles.css

　　查找替换

　　Metrics Manager 提供浓度稍微区别颜色在上面两个 CSS 文件中查找并替换我们在上图中匹配颜色但以下颜色除外:

　　#999999 --> #8bb093

　　#99AACC --> #8bb093

　　#CCCCCC --> #c8ddca

　　其他配置变化

　　在 default.css 文件中分别修改以下参数:

　　修改 Main Header

　　.Header1　{　
　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　-　ser;　
　font-weight:　bold;　
　color:　#2d5c3d;　
　background　-　color:　#c8ddca;　
　}　
　.tableTitleHover　
　{　
　font:　70%　Tahoma,　arial,　geneva,　helvetica,　sans　-　ser;　
　font-weight:　bold;　
　color:　#2d5c3d;　
　background　-　color:　#8bb093;　
　cursor　:　poer;　
　}　
　.tableSortTitle　
　{　
　font:　70%　Tahoma,　arial,　geneva,　helvetica,　sans　-　ser;　
　font-weight:　bold;　
　color:　#2d5c3d;　
　background　-　color　:　#8bb093;　
　}　
　.tableSortTitleHover　{　
　font:　70%　Tahoma,　arial,　geneva,　helvetica,　sans　-　ser;　
　font-weight:　bold;　
　color:　#2d5c3d;　
　background　-　color　:　#8bb093;　
　cursor　:　poer;　
　}　
　.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-ser;　
　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-ser;　
　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

　　使用文件

　　< location>/c8/webcontent/skins/my_style/ags/crn.css

　　< 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

　　所有和品牌相关文件储存在 <_directory>/c8/webcontent/skins/your_style/portal 文件夹中

　　任务 1 – 修改 IBM Cognos Connection 中 Top Line Header

　　要修改顶端标题在 default.css 文件中修改突出显示部分:

图 25. 修改顶端标题


　　主标题

　　修改主标题栏背景

　　.Header1　
{　
　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.g);　
　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.g) 背景颜色

　　.logoImageContainer　
　{　
　padding　-　right:　5px;　
　padding　-　left:　3px;　
　background　-　color:　#e72b41;　
　}　

　　通过修改 system.xml 文件可以在“IBM Cognos Connection ”文本位置添加公司 logo 这些步骤已在 举例 1 中进行了详细描述需要重启 IBM Cognos 8 服务以使对 system.xml 更改生效

图 26. 修改后结果


　　查看原图(大图)

　　任务 2 – 修改第 2行标题

　　要修改第 2行标题和门户选项卡在 default.css 文件中修改突出显示部分:

　　标题背景、边框和超链接文本

　　修改第 2和第 3标题背景和边框颜色

　　.Header2　
　{　
　border:　#f8f8dc　2px　solid;　
　padding:　2px;　
　height:　25px;　
　background　-　color:　#f8f8dc;　
　}　
　.Header3　
　{　
　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. 修改第 2和第 3标题背景和边框颜色


　　动态滚动按钮

　　.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 表


标签：
0
我顶

相关文章

读者评论

发表评论

  • 昵称：
  • 内容：

热门标签

精华推荐

最新标签

Dig排行

阅读排行

最新文章