Opensourcetechブログ

OpensourcetechによるNGINX/Zabbix/Neo4j/Linuxなどオープンソース技術に関するブログです。

Zabbix 4.0 LTS 独自テーマの作成・適用

こんにちは、LinuCエバンジェリストこと、鯨井貴博@opensourcetechです。

 Alexei Vladishevさんと一緒

 

今回は、Zabbix 4.0 LTS用に

Zabbixが3倍早くなるかもしれないカラーリングの独自テーマを作成して使用してみます。

 

なお、デフォルトテーマなどや変更方法については以下の記事をご覧ください。

Zabbix 4.0 LTS のテーマ変更・アクセシビリティ対応 - Opensourcetechブログ

 

 

独自テーマの作成

独自テーマですが、デフォルトテーマがCSSで存在するのでそれをベースにします。

 

デフォルトテーマのCSSファイルですが、「/usr/share/zabbix/styles」ディレクトリに格納されています。

XYZ@Ubuntu:/usr/share/zabbix/styles$ pwd
/usr/share/zabbix/styles
XYZ@Ubuntu:/usr/share/zabbix/styles$ ls
blue-theme.css dark-theme.css hc-dark.css hc-light.css

 

上記の4つのCSSファイルが、テーマで選択できるようになっています。

f:id:opensourcetech:20190331212904p:plain

 

 今回は、dark-theme.cssをベースに、original-theme.cssというCSSファイルを作成します。

XYZ@Ubuntu:/usr/share/zabbix/styles$ sudo cp -p dark-theme.css original-theme.css
XYZ@Ubuntu:/usr/share/zabbix/styles$ ls
blue-theme.css dark-theme.css hc-dark.css hc-light.css original-theme.css

 

編集したoriginal-theme.cssは、以下にアップしてあります。

zabbix_template/original-theme.css at master · kujiraitakahiro/zabbix_template · GitHub

 

dark-theme.cssからの変更点ですが、「background-color:」という背景色を指定するパラメータに全て「#c1473a」変更しています。

※216箇所、ありました。

 

 

独自テーマを選択可能にする

独自テーマを選択出来るようにするには、Z.phpというファイルを編集します。

以下のように30行目から34行目を追加します。

左側の「original-theme」がCSSファイルの拡張子を以外の部分、右側の「original-theme」がZabbixのテーマ選択画面で表示されるワードです。

f:id:opensourcetech:20190331213651p:plain

 

こちらも、以下にアップしてます。

zabbix_template/Z.php at master · kujiraitakahiro/zabbix_template · GitHub

 

 

独自テーマを適用する

ここまでの作業で独自テーマが使用できるようになるので、

テーマ欄で選択します。

f:id:opensourcetech:20190331213853p:plain

 

選択すると、以下のように作成した独自テーマが使用できるようになります。

f:id:opensourcetech:20190331214126p:plain

 

 

 

おまけ

独自テーマの作成方法や、複数の独自テーマを適用する方法については、

以下のドキュメントに記載されています。

https://www.zabbix.com/documentation/3.4/manual/web_interface/theming

 

 

www.slideshare.net

github.com

www.facebook.com

twitter.com

www.instagram.com

 

 

にほんブログ村 IT技術ブログ Linuxへ
Linux

にほんブログ村 IT技術ブログ オープンソースへ
オープンソース

 

 

Opensourcetech by Takahiro Kujirai