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 Design

Um Ihr eigenes Design zu erstellen:

  1. Erstellen Sie eine CSS-Datei von Grund auf neu oder kopieren Sie ein vorhandenes Design (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 Design (zum Beispiel custom-theme.css) im Verzeichnis assets/styles/.
Schritt 2: Aktivieren Sie Ihr Theme in der Themenliste

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

  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')
          ]);
}

Dabei gilt:

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

Um mehrere Themes hinzuzufügen, führen Sie sie im Array auf und trennen Sie die einzelnen Einträge durch ein Komma. Ein nachgestelltes Komma nach dem letzten Eintrag ist optional.

Beispiel:

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

Um die Diagrammfarben zu ändern, muss ein Datensatz für das neue Theme zur 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
)
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;
Schritt 4: Das neue Theme verwenden

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