WebAppBuilder自定义主题

WebAppBuilder自定义主题

by 李远祥

 

基本步骤：

1. 创建新主题的文件夹
2. 注册新的主题到manifest.json 文件
3. 覆盖HeaderController 部件的颜色、
4. 覆盖panel的颜色
5. 覆盖弹出框的颜色
6. 自定义字体

 

主题可以自定义的部分包括Brand的颜色、字体和其他的基础UI属性。以下使用珠宝箱主题进行修改，新的主题修改涉及到UI的一些CSS属性

Background color

Text color

Font family

Font size

Padding

这些UI组件在珠宝箱主题的标题控制组件、panel组件和地图弹出框中。

 

1. 创建一个新的主题文件夹

   打开webappbuilder的~/client/stemapp/themes/JewelryBoxTheme/styles 文件夹，创建一个新的文件夹为myStyle。在mystyle文件夹下创建名为style.css文件。当然，也可以见将css文件所用到的其他资源如图片等关联到该CSS文件中。

   

2. 注册新的主题到manifest.json 文件

   打开~/client/stemapp/themes/JewelryBoxTheme/manifest.json文件

   将以下关于myStyle的属性添加到styles节点中

   A．"name"—必须与myStyle的主题匹配

   B. "description"—添加关于主题的描述

   C．"styleColor"定义主题在WebAppBuilder的中的显示背景颜色

   

    

   D.重新启动webAppbuilder 可以看到宝箱主题里面新的样式，如下图

   

3. 重写标题控制部件的颜色

更新标题控制部件的颜色方案，可以添加CSS代码到style.css文件中。

1. 以下代码使背景变成白色（#fff）

   .jimu-main-background {

   background-color: #fff;

   }

   名为background-color 的类名是.jimu-main-background的属性，这是Jimu CSS框架和    其他UI包元素中的其中一个类型，详细的Jimu CSS类，可以查看 CSS框架 ，https://developers.arcgis.com/web-appbuilder/api-reference/css-framework.htm

2. 使用以下代码将标题和子标题的颜色更改为灰色(#232323)

   

3. 使用以下代码移除阴影效果和在底部添加一个边框。与第一和第二步不同的是，这里在使用了一个部件的特殊类名

   

   注：特定的指定部件类名的写法一般是jimu-widget-{widgetname}这种形式

4. 修改背景颜色，移除右边框和修改图标的透明度

现在可以查看具体的效果了，如下图

 

1. 更改和对齐图标

   让标题栏图标变小一点，使用下面代码

   

   图标的边缘对齐设置

   

   让图标变成圆形

   

   让图标的图片变得更小

   

    

   修改结果如下

   

   可以修改选中后的样式

   

    

   当屏幕缩小时标题栏按钮会自动进行组合，可以修改该组合按钮的样式，例如，一下代码分别为设置组合按钮的对齐方式、背景颜色、图标大小及文字样式

   

   

   

   

    

   其最终显示效果如下

   

    

   可以改变标题栏的连接样式，如下

   

   具体效果

   

    

    

2. 修改panel的颜色

Panel微件包括了可扩展微件和屏幕微件，所有的微件都可以修改其背景颜色和标题样式，例如下面代码修改了panel的标题颜色和标题背景

将pannel的边框去掉

 

展示结果如下

1. 修改弹出框样式

   类似panel的做法，改变弹出框的背景颜色做法如下

   

    

   

2. 使用不同的字体

   可以设置不同的字体

   如果想使用一些网络字体，可以在style.css文件中引用，如

   

然后修改 .jimu-main-font. 节点值，例如