定制 IBM Cognos 8 UI (7)

xiaoerp

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: urlimages/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


该贴已经同步到 xiaoerp的微博