...
- 通过替换图片及样式来改变Smartbi的皮肤。
- 通过替换HTML文件来改变Smartbi的布局。修改某JavaScript对象的方法。
- 修改某JavaScript对象的方法,参考第四课:如何修改Smartbi JS文件。
关于如何查找定位对应图片、css或js,请见Smartbi前端框架介绍及调试定位入门。
替换图片文件
示例说明:
Smartbi默认登录界面的背景图如下所示:
按某项目要求,需要将原登录界面修改为:
实现步骤:
- 在smartbi.war包中找到登录背景图片所在目录:"smartbi.war\vision\img\login\"。
- 把需要替换的背景图、输入框的背景图及确定按钮图,分别命名为login把需要替换的背景图、输入框的LOGO图及登陆按钮图,分别命名为login_bg_bg2default.jpg、login_bg3.gif、login_btn_ok.gif。png、logo.png、loginbutton_zhCN.png。
- 在Sample项目中按背景图文件在smartbi.war中的目录结构创建相同的目录,并把制作好的三个图片文件放到该目录中。
- 将Sample项目打包为sample2.ext,参照上节在Smartbi应用服务器中加载扩展插件。
- 重启Smartbi应用服务器后,再次登录即可看到替换的效果。
...
替换css样式:
示例效果:
修改前:
修改后:
实现步骤:
1、在smartbi的扩展包中vision\js\ext\目录创建文件:ConfigurationPatch.js,在文件中指定项目使用的css文件。
...
代码块 | ||
---|---|---|
| ||
.queryview-toolbar-refresh { background: #FFFFFF#ffffff url(../img/querygrid/refresh.gifpng) no-repeat left center; } |
示例代码下载