很多时候,会有用户想自定义或者调整Zabbix的主题内容,包括颜色、字体、图形等等。下面我们简单介绍一下如何调整Zabbix的主题,以Zabbix4.0版本为例。
默认情况下,Zabbix4.0版本提供四个样式的主题,分别是:Blue theme,Dark theme, High-contrast light theme, High-contrast dark theme。如下列图:
![](http://imgsrc.baidu.com/forum/w%3D580/sign=7cdaa120ba4543a9f51bfac42e158a7b/d7f1eb58ccbf6c814fc9533cb13eb13531fa40df.jpg)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=3b07fda14ea98226b8c12b2fba80b97a/9a2bf6bf6c81800ac91bf6dabc3533fa808b47df.jpg)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=6686094d8f26cffc692abfba89034a7d/87cc5681800a19d86dfdfbd13efa828ba41e46df.jpg)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=916ac8c2c2fc1e17fdbf8c397a92f67c/27f2ba0a19d8bc3e63f6791e8f8ba61eaad345df.jpg)
Zabbix没有内置现成的自定义主题的功能,如果需要自定义或者调整Zabbix主题的话,只能通过修改和调整CSS的方式来实现,下面详细介绍:
1. 首先,备份当前在用的Zabbix前端页面文件
# cp -R /usr/share/zabbix/ ./zabbix_bak
2. 创建CSS样式文件
# cd /usr/share/zabbix/styles/
# cp dark-theme.css dark-orange-theme.css
3. 在主题列表中添加自定义的主题信息
# vi ../include/classes/core/Z.php
添加以下内容:
class Z extends ZBase {
public static function getThemes() {
return array_merge(parent::getThemes(), array(
'dark-orange-theme' => _('Dark orange')
));
}
}
4. 修改dark-orange-theme.css文件
# vi /usr/share/zabbix/styles/dark-orange-theme.css
把以下颜色
![](http://imgsrc.baidu.com/forum/w%3D580/sign=51e5851813178a82ce3c7fa8c601737f/cb7923d8bc3eb135e039c86fab1ea8d3ff1f44df.jpg)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=1b3f54f38782b9013dadc33b438fa97e/52ab863eb13533fa5648ecfaa5d3fd1f43345bdf.jpg)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=cbd4c066b4014a90813e46b599753971/f74d8b3533fa828b73dde237f01f4134950a5adf.jpg)
换成
![](http://imgsrc.baidu.com/forum/w%3D580/sign=5c41f3e54790f60304b09c4f0910b370/fa4609fa828ba61e7e10b7fb4c34970a324e59df.jpg)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=6ec20074fb03738dde4a0c2a8319b073/7889b88ba61ea8d32adc0bd09a0a304e271f58df.jpg)
然后在Zabbix前端页面查看主题选项:
![](http://imgsrc.baidu.com/forum/w%3D580/sign=9253bce77e8da9774e2f86238053f872/c9f89c1ea8d3fd1f99f7ddee3d4e251f97ca5fdf.jpg)
5. 修改dark-orange-theme.css文件
.top-nav 样式中按照以下内容更新:
![](http://imgsrc.baidu.com/forum/w%3D580/sign=2fc03969a4773912c4268569c81b8675/ed6d92d3fd1f41344ec97aaa281f95cad3c85edf.jpg)
↓ ↓ ↓ ↓ ↓
![](http://imgsrc.baidu.com/forum/w%3D580/sign=a94ee3933412b31bc76ccd21b61a3674/e3a0c71f4134970aea8d6ffb98cad1c8a5865ddf.jpg)
效果如下:
![](http://imgsrc.baidu.com/forum/w%3D580/sign=72b473f6be1bb0518f24b3200678da77/b66c7b34970a304efedcdf2edcc8a786cb175cdf.jpg)
↓ ↓ ↓ ↓ ↓![](http://imgsrc.baidu.com/forum/w%3D580/sign=e5d1f9ffbd51f819f1250342eab64a76/0a47ad0a304e251f49099b2caa86c9177d3e53df.jpg)
6. 修改dark-orange-theme.css文件
.top-subnav样式中按照以下内容更新:
![](http://imgsrc.baidu.com/forum/w%3D580/sign=6ed8fab5f51986184147ef8c7aef2e69/dc790a4e251f95ca0c0bed62c4177f3e650952df.jpg)
↓ ↓ ↓ ↓ ↓
![](http://imgsrc.baidu.com/forum/w%3D580/sign=6e92b2fd8b18367aad897fd51e718b68/7b3d1f1f95cad1c8794583f3723e6709cb3d51df.jpg)
效果如下:
![](http://imgsrc.baidu.com/forum/w%3D580/sign=27daccfc3b7adab43dd01b4bbbd6b36b/6e6cafcad1c8a78616d435da6a09c93d72cf50df.jpg)
↓ ↓ ↓ ↓ ↓![](http://imgsrc.baidu.com/forum/w%3D580/sign=66db7c9ed7b44aed594ebeec831e876a/deb9ebc8a786c9179ffd2dedc43d70cf39c757df.jpg)
7. 调整页面主体、按钮等颜色
# sed -i 's/4796c4/e97505/g; s/768d99/e97505/g; s/69808d/e97505/g;
s/787878/e97505/g; s/5e737e/b34a00/g; s/c5c5c5/b34a00/g'
/usr/share/zabbix/styles/dark-orange-theme.css
# sed -i 's/rgba(71, 150, 196, 0.5)/rgba(242, 91, 34, 0.5)/g' \
/usr/share/zabbix/styles/dark-orange-theme.css
效果如下:
![](http://imgsrc.baidu.com/forum/w%3D580/sign=d7b9905047ed2e73fce98624b703a16d/9abb9d86c9177f3e86ca83d97dcf3bc79d3d56df.jpg)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=3877000923738bd4c421b2399189876c/ecf5f3177f3e67092bfe3a2b36c79f3dfadc55df.jpg)
8. 更改图形的颜色
图形的颜色更新,需要在数据库中insert,如下:
mysql> INSERT INTO `graph_theme` (`graphthemeid`,`theme`,`backgroundcolor`,
`graphcolor`,`gridcolor`,`maingridcolor`,`gridbordercolor`,`textcolor`,
`highlightcolor`,`leftpercentilecolor`,`rightpercentilecolor`,`nonworktimecolor`)
values ('5','dark-orange-theme','2B2B2B','2B2B2B','454545','4F4F4F','4F4F4F',
'F2F2F2','E45959','59DB8F','E45959','333333');
效果如下:
![](http://imgsrc.baidu.com/forum/w%3D580/sign=a92e649786d4b31cf03c94b3b7d4276f/8264453e6709c93d930c7123923df8dcd30054df.jpg)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=cab0c130be1c8701d6b6b2ee177d9e6e/344d5d09c93d70cfdf04d5d9f5dcd100b8a12bdf.jpg)
按照这些操作,用户可以根据自身的实际需求做个性化的主题,切记调整之前请备份原始Zabbix前端页面文件。
默认情况下,Zabbix4.0版本提供四个样式的主题,分别是:Blue theme,Dark theme, High-contrast light theme, High-contrast dark theme。如下列图:
![](http://imgsrc.baidu.com/forum/w%3D580/sign=7cdaa120ba4543a9f51bfac42e158a7b/d7f1eb58ccbf6c814fc9533cb13eb13531fa40df.jpg)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=3b07fda14ea98226b8c12b2fba80b97a/9a2bf6bf6c81800ac91bf6dabc3533fa808b47df.jpg)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=6686094d8f26cffc692abfba89034a7d/87cc5681800a19d86dfdfbd13efa828ba41e46df.jpg)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=916ac8c2c2fc1e17fdbf8c397a92f67c/27f2ba0a19d8bc3e63f6791e8f8ba61eaad345df.jpg)
Zabbix没有内置现成的自定义主题的功能,如果需要自定义或者调整Zabbix主题的话,只能通过修改和调整CSS的方式来实现,下面详细介绍:
1. 首先,备份当前在用的Zabbix前端页面文件
# cp -R /usr/share/zabbix/ ./zabbix_bak
2. 创建CSS样式文件
# cd /usr/share/zabbix/styles/
# cp dark-theme.css dark-orange-theme.css
3. 在主题列表中添加自定义的主题信息
# vi ../include/classes/core/Z.php
添加以下内容:
class Z extends ZBase {
public static function getThemes() {
return array_merge(parent::getThemes(), array(
'dark-orange-theme' => _('Dark orange')
));
}
}
4. 修改dark-orange-theme.css文件
# vi /usr/share/zabbix/styles/dark-orange-theme.css
把以下颜色
![](http://imgsrc.baidu.com/forum/w%3D580/sign=51e5851813178a82ce3c7fa8c601737f/cb7923d8bc3eb135e039c86fab1ea8d3ff1f44df.jpg)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=1b3f54f38782b9013dadc33b438fa97e/52ab863eb13533fa5648ecfaa5d3fd1f43345bdf.jpg)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=cbd4c066b4014a90813e46b599753971/f74d8b3533fa828b73dde237f01f4134950a5adf.jpg)
换成
![](http://imgsrc.baidu.com/forum/w%3D580/sign=5c41f3e54790f60304b09c4f0910b370/fa4609fa828ba61e7e10b7fb4c34970a324e59df.jpg)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=6ec20074fb03738dde4a0c2a8319b073/7889b88ba61ea8d32adc0bd09a0a304e271f58df.jpg)
然后在Zabbix前端页面查看主题选项:
![](http://imgsrc.baidu.com/forum/w%3D580/sign=9253bce77e8da9774e2f86238053f872/c9f89c1ea8d3fd1f99f7ddee3d4e251f97ca5fdf.jpg)
5. 修改dark-orange-theme.css文件
.top-nav 样式中按照以下内容更新:
![](http://imgsrc.baidu.com/forum/w%3D580/sign=2fc03969a4773912c4268569c81b8675/ed6d92d3fd1f41344ec97aaa281f95cad3c85edf.jpg)
↓ ↓ ↓ ↓ ↓
![](http://imgsrc.baidu.com/forum/w%3D580/sign=a94ee3933412b31bc76ccd21b61a3674/e3a0c71f4134970aea8d6ffb98cad1c8a5865ddf.jpg)
效果如下:
![](http://imgsrc.baidu.com/forum/w%3D580/sign=72b473f6be1bb0518f24b3200678da77/b66c7b34970a304efedcdf2edcc8a786cb175cdf.jpg)
↓ ↓ ↓ ↓ ↓
![](http://imgsrc.baidu.com/forum/w%3D580/sign=e5d1f9ffbd51f819f1250342eab64a76/0a47ad0a304e251f49099b2caa86c9177d3e53df.jpg)
6. 修改dark-orange-theme.css文件
.top-subnav样式中按照以下内容更新:
![](http://imgsrc.baidu.com/forum/w%3D580/sign=6ed8fab5f51986184147ef8c7aef2e69/dc790a4e251f95ca0c0bed62c4177f3e650952df.jpg)
↓ ↓ ↓ ↓ ↓
![](http://imgsrc.baidu.com/forum/w%3D580/sign=6e92b2fd8b18367aad897fd51e718b68/7b3d1f1f95cad1c8794583f3723e6709cb3d51df.jpg)
效果如下:
![](http://imgsrc.baidu.com/forum/w%3D580/sign=27daccfc3b7adab43dd01b4bbbd6b36b/6e6cafcad1c8a78616d435da6a09c93d72cf50df.jpg)
↓ ↓ ↓ ↓ ↓
![](http://imgsrc.baidu.com/forum/w%3D580/sign=66db7c9ed7b44aed594ebeec831e876a/deb9ebc8a786c9179ffd2dedc43d70cf39c757df.jpg)
7. 调整页面主体、按钮等颜色
# sed -i 's/4796c4/e97505/g; s/768d99/e97505/g; s/69808d/e97505/g;
s/787878/e97505/g; s/5e737e/b34a00/g; s/c5c5c5/b34a00/g'
/usr/share/zabbix/styles/dark-orange-theme.css
# sed -i 's/rgba(71, 150, 196, 0.5)/rgba(242, 91, 34, 0.5)/g' \
/usr/share/zabbix/styles/dark-orange-theme.css
效果如下:
![](http://imgsrc.baidu.com/forum/w%3D580/sign=d7b9905047ed2e73fce98624b703a16d/9abb9d86c9177f3e86ca83d97dcf3bc79d3d56df.jpg)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=3877000923738bd4c421b2399189876c/ecf5f3177f3e67092bfe3a2b36c79f3dfadc55df.jpg)
8. 更改图形的颜色
图形的颜色更新,需要在数据库中insert,如下:
mysql> INSERT INTO `graph_theme` (`graphthemeid`,`theme`,`backgroundcolor`,
`graphcolor`,`gridcolor`,`maingridcolor`,`gridbordercolor`,`textcolor`,
`highlightcolor`,`leftpercentilecolor`,`rightpercentilecolor`,`nonworktimecolor`)
values ('5','dark-orange-theme','2B2B2B','2B2B2B','454545','4F4F4F','4F4F4F',
'F2F2F2','E45959','59DB8F','E45959','333333');
效果如下:
![](http://imgsrc.baidu.com/forum/w%3D580/sign=a92e649786d4b31cf03c94b3b7d4276f/8264453e6709c93d930c7123923df8dcd30054df.jpg)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=cab0c130be1c8701d6b6b2ee177d9e6e/344d5d09c93d70cfdf04d5d9f5dcd100b8a12bdf.jpg)
按照这些操作,用户可以根据自身的实际需求做个性化的主题,切记调整之前请备份原始Zabbix前端页面文件。