8 Tworzenie własnego motywu

Przegląd

Domyślnie Zabbix udostępnia kilka predefiniowanych motywów frontend themes. Aby utworzyć własny motyw, wykonaj krok po kroku procedurę opisaną tutaj.

Krok 1: Utwórz swój motyw

Aby utworzyć własny motyw:

  1. Utwórz plik CSS od podstaw lub skopiuj istniejący motyw (na przykład blue-theme.css, dark-theme.css albo inny) z katalogu assets/styles/ i zmodyfikuj go.
  2. Zapisz swój motyw (na przykład custom-theme.css) w katalogu assets/styles/.
Krok 2: Włącz swój motyw na liście motywów

Aby udostępnić własny motyw we frontendzie, musisz dodać go do listy motywów zwracanej przez metodę APP::getThemes(). Osiąga się to przez nadpisanie metody ZBase::getThemes() wewnątrz klasy APP w następujący sposób:

  1. Otwórz plik include/classes/core/APP.php i znajdź klasę APP:
class APP extends ZBase {

}
  1. Wewnątrz klasy, przed jej końcowym zamykającym nawiasem klamrowym }, dodaj następującą metodę:
public static function getThemes() {
          return array_merge(parent::getThemes(), [
              'custom-theme' => _('Custom theme')
          ]);
}

gdzie:

  • custom-theme - wewnętrzny identyfikator Twojego motywu, który musi odpowiadać nazwie pliku CSS bez rozszerzenia .css;
  • Custom theme - nazwa wyświetlana, którą zobaczysz we frontendzie.

Aby dodać wiele motywów, wypisz je w tablicy, oddzielając każdy wpis przecinkiem. Końcowy przecinek po ostatnim wpisie jest opcjonalny.

Na przykład:

      public static function getThemes() {
          return array_merge(parent::getThemes(), [
              'custom-theme' => _('Custom theme'),
              'anothertheme' => _('Another theme'),
              'onemoretheme' => _('One more theme')
          ]);
      }
Zmiana kolorów wykresu

Aby zmienić kolory wykresu, do tabeli bazy danych graph_theme należy dodać rekord dla nowego motywu.

Przykład dodania rekordu do bazy danych 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'
);
Krok 3: Użyj nowego motywu

W frontend Zabbix możesz ustawić ten motyw jako domyślny motyw albo wybrać go w profilu użytkownika.