by 李远祥
基本步骤:
-
创建新主题的文件夹
-
注册新的主题到manifest.json 文件
-
覆盖HeaderController 部件的颜色、
-
覆盖panel的颜色
-
覆盖弹出框的颜色
-
自定义字体
主题可以自定义的部分包括Brand的颜色、字体和其他的基础UI属性。以下使用珠宝箱主题进行修改,新的主题修改涉及到UI的一些CSS属性
Background color
Text color
Font family
Font size
Padding
这些UI组件在珠宝箱主题的标题控制组件、panel组件和地图弹出框中。
-
创建一个新的主题文件夹
打开webappbuilder的~/client/stemapp/themes/JewelryBoxTheme/styles 文件夹,创建一个新的文件夹为myStyle。在mystyle文件夹下创建名为style.css文件。当然,也可以见将css文件所用到的其他资源如图片等关联到该CSS文件中。
-
注册新的主题到manifest.json 文件
打开~/client/stemapp/themes/JewelryBoxTheme/manifest.json文件
将以下关于myStyle的属性添加到styles节点中
A."name"—必须与myStyle的主题匹配
B. "description"—添加关于主题的描述
C."styleColor"定义主题在WebAppBuilder的中的显示背景颜色
D.重新启动webAppbuilder 可以看到宝箱主题里面新的样式,如下图
-
重写标题控制部件的颜色
更新标题控制部件的颜色方案,可以添加CSS代码到style.css文件中。
-
以下代码使背景变成白色(#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
-
使用以下代码将标题和子标题的颜色更改为灰色(#232323)
-
使用以下代码移除阴影效果和在底部添加一个边框。与第一和第二步不同的是,这里在使用了一个部件的特殊类名
注:特定的指定部件类名的写法一般是jimu-widget-{widgetname}这种形式
-
修改背景颜色,移除右边框和修改图标的透明度
现在可以查看具体的效果了,如下图
-
更改和对齐图标
让标题栏图标变小一点,使用下面代码
图标的边缘对齐设置
让图标变成圆形
让图标的图片变得更小
修改结果如下
可以修改选中后的样式
当屏幕缩小时标题栏按钮会自动进行组合,可以修改该组合按钮的样式,例如,一下代码分别为设置组合按钮的对齐方式、背景颜色、图标大小及文字样式
其最终显示效果如下
可以改变标题栏的连接样式,如下
具体效果
-
修改panel的颜色
Panel微件包括了可扩展微件和屏幕微件,所有的微件都可以修改其背景颜色和标题样式,例如下面代码修改了panel的标题颜色和标题背景
将pannel的边框去掉
展示结果如下
-
修改弹出框样式
类似panel的做法,改变弹出框的背景颜色做法如下
-
使用不同的字体
可以设置不同的字体
如果想使用一些网络字体,可以在style.css文件中引用,如
然后修改 .jimu-main-font. 节点值,例如