定制 IBM Cognos 8 UI (6)

xiaoerp

5.3 重新塑造 Analysis Studio
与品牌相关的所有文件位于 /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 最终结果


该贴已经同步到 xiaoerp的微博