定制 IBM Cognos 8 UI (5)

xiaoerp

5.2 重新塑造 Query Studio
所有与品牌相关的文件都在 /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. 保持风格变更


该贴已经同步到 xiaoerp的微博