8 独自テーマ作成

概要

デフォルトでは、Zabbix はあらかじめ定義された Webインターフェース themes をいくつか提供しています。 カスタムテーマを作成するには、ここで説明する手順に従ってください。

ステップ 1: テーマを作成する

独自のテーマを作成するには:

  1. CSSファイルを新規作成するか、assets/styles/ ディレクトリから既存のテーマ（たとえば blue-theme.css、dark-theme.css、または別のテーマ）をコピーして変更します。
  2. テーマ（たとえば custom-theme.css）を assets/styles/ ディレクトリに保存します。
ステップ 2: Theme list でテーマを有効にする

カスタムテーマを Webインターフェース で利用できるようにするには、APP::getThemes() メソッドが返すテーマ一覧に追加する必要があります。
これは、APP クラス内で ZBase::getThemes() メソッドを次のようにオーバーライドして行います。

  1. include/classes/core/APP.php ファイルを開き、APP クラスを見つけます:
class APP extends ZBase {

}
  1. クラス内の最終的な閉じ波かっこ } の前に、次のメソッドを追加します: 
public static function getThemes() {
          return array_merge(parent::getThemes(), [
              'custom-theme' => _('Custom theme')
          ]);
}

ここで:

  • custom-theme - テーマの内部識別子であり、.css 拡張子を除いた CSS ファイル名と一致する必要があります;
  • Custom theme - Webインターフェース で表示される名前です。

複数のテーマを追加するには、配列に列挙し、各エントリをカンマで区切ります。
最後のエントリの末尾にカンマを付けるかどうかは任意です。

例:

      public static function getThemes() {
          return array_merge(parent::getThemes(), [
              'custom-theme' => _('Custom theme'),
              'anothertheme' => _('Another theme'),
              'onemoretheme' => _('One more theme')
          ]);
      }
グラフの色を変更する

グラフの色を変更するには、新しいテーマのレコードを graph_theme データベーステーブルに追加する必要があります。

MySQL/MariaDB データベースにレコードを追加する例:

    mysql -u zabbix -p
    # Enter password:
mysql> USE zabbix;
mysql> INSERT INTO graph_theme (
    graphthemeid,
    theme,
    backgroundcolor,
    graphcolor,
    gridcolor,
    maingridcolor,
    gridbordercolor,
    textcolor,
    highlightcolor,
    leftpercentilecolor,
    rightpercentilecolor,
    nonworktimecolor,
    colorpalette
)
VALUES (
    5,
    'custom-theme',
    'FFFFFF',
    'FFFFFF',
    'CCD5D9',
    'ACBBC2',
    'ACBBC2',
    '1F2C33',
    'CC745E',
    '5ECCAB',
    'CC745E',
    'EBEBEB',
    '329F7E,C2583D,346D91,B26E44,CC6C91,7A6DC2,C4AA56,7C2731,BF75B8,73A350,B04833,633A60,879CCC,7FAD6C,324978,3F5C3D,795C94,D66B58,732230,809C5D,C79DD1'
);
ステップ 3: 新しいテーマを使用する

Zabbix Webインターフェースでは、このテーマを デフォルトテーマ として設定するか、ユーザープロファイル で選択できます。