こんにちは、LinuCエバンジェリストこと、鯨井貴博@opensourcetechです。
今回は、Zabbix 4.0 LTS用に
Zabbixが3倍早くなるかもしれないカラーリングの独自テーマを作成して使用してみます。
なお、デフォルトテーマなどや変更方法については以下の記事をご覧ください。
Zabbix 4.0 LTS のテーマ変更・アクセシビリティ対応 - Opensourcetechブログ
独自テーマの作成
独自テーマですが、デフォルトテーマがCSSで存在するのでそれをベースにします。
デフォルトテーマのCSSファイルですが、「/usr/share/zabbix/styles」ディレクトリに格納されています。
/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ファイルが、テーマで選択できるようになっています。
今回は、dark-theme.cssをベースに、original-theme.cssという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のテーマ選択画面で表示されるワードです。
こちらも、以下にアップしてます。
zabbix_template/Z.php at master · kujiraitakahiro/zabbix_template · GitHub
独自テーマを適用する
ここまでの作業で独自テーマが使用できるようになるので、
テーマ欄で選択します。
選択すると、以下のように作成した独自テーマが使用できるようになります。
おまけ
独自テーマの作成方法や、複数の独自テーマを適用する方法については、
以下のドキュメントに記載されています。
https://www.zabbix.com/documentation/3.4/manual/web_interface/theming
