8 Erstellen Ihres eigenen Themes

Übersicht

Standardmäßig stellt Zabbix eine Reihe vordefinierter Frontend-Themes bereit. Um ein benutzerdefiniertes Theme zu erstellen, folgen Sie der hier beschriebenen Schritt-für-Schritt-Anleitung.

Schritt 1: Erstellen Sie Ihr Theme

Um Ihr eigenes Theme zu erstellen:

  1. Erstellen Sie eine CSS-Datei von Grund auf neu oder kopieren Sie ein vorhandenes Theme (z. B. blue-theme.css, dark-theme.css oder ein anderes) aus dem Verzeichnis assets/styles/ und passen Sie es an.
  2. Speichern Sie Ihr Theme (zum Beispiel custom-theme.css) im Verzeichnis assets/styles/.
Schritt 2: Aktivieren Sie Ihr Theme in der Theme-Liste

Damit Ihr benutzerdefiniertes Theme im Frontend verfügbar ist, müssen Sie es der Liste der Themes hinzufügen, die von der Methode APP::getThemes() zurückgegeben wird. Dies geschieht durch Überschreiben der Methode ZBase::getThemes() innerhalb der Klasse APP wie folgt:

  1. Öffnen Sie die Datei include/classes/core/APP.php und suchen Sie die Klasse APP:
class APP extends ZBase {

}
  1. Fügen Sie innerhalb der Klasse, vor der abschließenden geschweiften Klammer }, die folgende Methode hinzu:
public static function getThemes() {
          return array_merge(parent::getThemes(), [
              'custom-theme' => _('Custom theme')
          ]);
}

wobei:

  • custom-theme - die interne Kennung Ihres Themes und muss mit dem Namen Ihrer CSS-Datei ohne die Erweiterung .css übereinstimmen;
  • Custom theme - der Anzeigename, den Sie im Frontend sehen.

Um mehrere Themes hinzuzufügen, listen Sie sie im Array auf und trennen Sie jeden Eintrag mit einem Komma. Ein abschließendes Komma nach dem letzten Eintrag ist optional.

Zum Beispiel:

      public static function getThemes() {
          return array_merge(parent::getThemes(), [
              'custom-theme' => _('Custom theme'),
              'anothertheme' => _('Another theme'),
              'onemoretheme' => _('One more theme')
          ]);
      }
Ändern der Diagrammfarben

Um die Diagrammfarben zu ändern, muss ein Datensatz für das neue Theme in der Datenbanktabelle graph_theme hinzugefügt werden.

Beispiel für das Hinzufügen eines Datensatzes zu einer MySQL/MariaDB-Datenbank:

    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'
);
Schritt 3: Das neue Theme verwenden

Im Zabbix-Frontend können Sie dieses Theme entweder als Standard-Theme festlegen oder es in einem Benutzerprofil auswählen.