ITPub博客

首页 > 大数据 > 数据挖掘 > 修改BIEE Dashboard的显示样式

修改BIEE Dashboard的显示样式

数据挖掘 作者:terryisme 时间:2014-03-07 15:03:07 0 删除 编辑

修改BIEE Dashboard的显示样式

 

BIEE的Dashboard在引用列时,自动为列加上了边框,便于用户对各列进行显示上的区分,但在布局上却会因为浏览器不同而带来一些其他的问题。

比如在chrome中为Dashboard的排版布局,看起来是整齐的,但使用firefox打开后却发现因为引用内容在不同浏览器的展示效果,而使得整个Dashboard的排版也变得参差不齐了。

 


显示问题


Chrome中排版布局可能如下图:

 

而使用火狐打开时,因为其它原因,则变成了:

 

 


解决方法


为解决这种情况,可以考虑将Dashboard的底色也设置为"白色",同时取消列的"左、右、下"三个边框(保留上边框是为了显示美观,同时便于区分显示内容)。

最终显示效果如下。

 

修改Dashboard样式后Chrome中显示效果如下图:

 

修改Dashboard样式后火狐显示效果如下图:

可见其实内容在不同浏览器时发生变化,布局也不会变得突兀。

 

 


修改Dashboard样式方法


Dashboard样式控制主要在

%BIEE_HOME%\user_projects\domains\bifoundation_domain\servers\AdminServer\tmp\_WL_user\analytics_11.1.1\silp1v\war\res\s_FusionFX\b_mozilla_4的portalcontent.css文件中。

(如有必要,可以找到原始war包,位于%BIEE_HOME%\Oracle_BI1\bifoundation\jee,修改初始源文件)

 

找到如下内容:
.DashboardPageContentDiv{background-color:#EFF7FF;padding:4px 4px 4px 0;position:relative;}

.SectionTable{margin-bottom:2px;margin-left:2px;width:100%;border-width:1px;border-style:solid;border-color:#C2C7D3;border-radius:6px;-moz-border-radius:6px;-moz-box-shadow:2px 2px 2px #B3B7BB;-webkit-box-shadow:2px 2px 2px #B3B7BB;box-shadow:2px 2px 2px #B3B7BB;background-color:#FFF;background-image:url(dashboard_section_background.gif);background-repeat:repeat-x;background-position:top left;}

.AccordionPaneHeadRoundCorner .RoundCornerLeft{background-image:url(section_roundedcorner_left.gif);}

.AccordionPaneHeadRoundCorner .RoundCornerRight{background-image:url(section_roundedcorner_right.gif);}

.AccordionPaneHead,.AccordionPaneHeadContent{background-image:url(dashboard_section_background.gif);}

.AccordionPaneCollapsed .AccordionPaneHeadRoundCorner .RoundCornerLeft{background-image:url(section_roundedcorner_left.gif);}

.AccordionPaneCollapsed .AccordionPaneHeadRoundCorner .RoundCornerRight{background-image:url(section_roundedcorner_right.gif);}

.AccordionPaneCollapsed .AccordionPaneHead,.AccordionPaneCollapsed .AccordionPaneHeadContent{background-color:#FFF;background-image:url(dashboard_section_background.gif);}

 

建议修改为:
.DashboardPageContentDiv{background-color:#FFFFFF;padding:4px 4px 4px 0;position:relative;}/*修改背景颜色*/

 

/*修改边框*/

.SectionTable{margin-bottom:2px;margin-left:2px;width:100%;border-width:1px;border-style:none;border-color:#C2C7D3;border-radius:6px;-moz-border-radius:6px;-moz-box-shadow:2px 2px 2px #FFF;-webkit-box-shadow:2px 2px 2px #FFF;box-shadow:2px 2px 2px #FFF;background-color:#FFF;background-image:url(dashboard_section_background.gif);background-repeat:repeat-x;background-position:top left;}

.AccordionPaneHeadRoundCorner .RoundCornerLeft{background-color:#FFF;}

.AccordionPaneHeadRoundCorner .RoundCornerRight{background-color:#FFF;}

.AccordionPaneHead,.AccordionPaneHeadContent{background-image:url(dashboard_section_background.gif);}

.AccordionPaneCollapsed .AccordionPaneHeadRoundCorner .RoundCornerLeft{background-color:#FFF;}

.AccordionPaneCollapsed .AccordionPaneHeadRoundCorner .RoundCornerRight{background-color:#FFF;}

.AccordionPaneCollapsed .AccordionPaneHead,.AccordionPaneCollapsed .AccordionPaneHeadContent{background-color:#FFF;background-image:url(dashboard_section_background.gif);}

 

注意代码中红色部分的相应调整,可根据需要在进行其它修改。

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/93029/viewspace-1103094/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2009-02-23

  • 博文量
    142
  • 访问量
    632451