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/ ... k.htm
2. 使用以下代码将标题和子标题的颜色更改为灰色(#232323)
   
3. 使用以下代码移除阴影效果和在底部添加一个边框。与第一和第二步不同的是，这里在使用了一个部件的特殊类名
   
   注：特定的指定部件类名的写法一般是jimu-widget-{widgetname}这种形式
4. 修改背景颜色，移除右边框和修改图标的透明度

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

1. 更改和对齐图标 让标题栏图标变小一点，使用下面代码
   
   图标的边缘对齐设置
   
   让图标变成圆形
   
   让图标的图片变得更小
   
   修改结果如下
   
   可以修改选中后的样式
   
   当屏幕缩小时标题栏按钮会自动进行组合，可以修改该组合按钮的样式，例如，一下代码分别为设置组合按钮的对齐方式、背景颜色、图标大小及文字样式
   
   
   
   
   其最终显示效果如下
   
   可以改变标题栏的连接样式，如下
   
   具体效果
   
2. 修改panel的颜色

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

将pannel的边框去掉


展示结果如下

1. 修改弹出框样式 类似panel的做法，改变弹出框的背景颜色做法如下
   
   
2. 使用不同的字体 可以设置不同的字体 如果想使用一些网络字体，可以在style.css文件中引用，如
   

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

文章来源：http://blog.csdn.net/liyuanxiang1984/article/details/52774284