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 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 (z. B. custom-theme.css) im Verzeichnis assets/styles/.
Schritt 2: Ihr Theme in der Theme-Liste aktivieren

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, indem Sie die Methode ZBase::getThemes() innerhalb der Klasse APP wie folgt überschreiben:

  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 durch ein 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')
          ]);
      }
Farben des Diagramms ändern

Um die Farben des Diagramms 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: Verwenden Sie das neue Theme

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