独自のテーマを作成する

概要

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

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

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

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

カスタムテーマを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')
          ]);
      }
ステップ 3: グラフの色を変更する

グラフの色を変更するには、新しいテーマのレコードを 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
)
SELECT
    MAX(graphthemeid) + 1,
    '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'
FROM graph_theme;
ステップ 4: 新しいテーマを使用する

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