任务 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:　　-　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

　　所有和品牌相关文件都在 <_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:　poer;　
　cursor:　hand;　
　color:　#333399　!important;　
　}　

　　要添加区别颜色标题请添加适当参数:

　　.Header1　
　{　}　
　.Header2　
　{　}　

　　任务 2 – 修改工具栏

　　要修改工具栏请根据突出显示部分修改 QSRVCommonUI.css 文件:

图 38.修改工具栏


　　Crn.css

　　修改工具栏背景颜色

　　.Header3　
　{　
　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:　poer;　
　cursor:　hand;　
　}　

　　控制单击工具栏上选项时颜色

　　.toolbarButtonPressed　{　
　padding:　1px　0px　0px　0px;　height:22px;　
　border　:　1px　solid　#ffcd6d;　
　background　-　color:　#f8f8dc;　
　cursor:　poer;　
　cursor:　hand;　
　}　

　　控制悬停在工具栏上选项时颜色

　　.toolbarButtonOverPressed　
　{　
　padding:　1px　0px　0px　0px;　
　height:22px;　
　border　:　1px　solid　#ffcd6d;　
　background　-　color:　#f8f8dc;　
　cursor:　poer;　
　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:　poer;　
　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:　poer;　
　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:　poer;　
　cursor:　hand;　
　}　

图 42.控制围绕整个菜单树和已收起菜单边框


　　任务 4 – 修改网格部分

　　要修改默认空网格请根据突出显示部分修改 QSReport.css 文件:

　　.startPageTextOver　
　{　
　font-weight:　normal;　
　font-size:　70%;　
　color:　#333399;　
　}　
　.startPageListColumnTitle　
　{　
　padding:　3px　5px;　
　border:　1px　solid　#ffce6d;　
　line-:　strict;　
　background　-　color:　#f8f8dc;　
　}　
　.startPageListColumnTitleOver　
　{　
　padding:　3px　5px;　
　border:　1px　solid　#ffce6d;　
　line-:　strict;　
　background　-　color:　#f8f8dc;　
　}　
　.startPageListColumn　
　{　
　padding:　3px　5px;　
　border　-　color:　#ffce6d;　
　border　-　width:　Opx　1px　1px;　
　border　-　style:　dashed;　
　line-:　strict;　
　background　-　color:　none;　
　}　
　.startPageListColumnOver　
　{　
　padding:　3px　5px;　
　border　-　color:　#ffce6d;　
　border　-　width:　Opx　1px　1px;　
　border　-　style:　dashed;　
　line-:　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

　　和品牌相关所有文件位于 <_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.g);　
　padding:　2px;　
　border:　0px;　
　width:　578px;　
　}　
　.menu,　.menu_hover,　.menu_pressed　
　{　
　cursor:　poer;　
　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.修改工具栏


　　._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;　
　/*　poer　for　standards　compliant　browsers,　hand　for　ie　5.5　*/　
　cursor:　poer;　
　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:　poer;　
　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:　poer;　
　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;　　
　}