Criando seu próprio tema

Visão geral

Por padrão, o Zabbix fornece vários temas predefinidos do frontend. Para criar um tema personalizado, siga o procedimento passo a passo fornecido aqui.

Etapa 1: Crie seu tema

Para criar seu próprio tema:

  1. Crie um arquivo CSS do zero ou copie um tema existente (como blue-theme.css, dark-theme.css ou outro) do diretório assets/styles/ e modifique-o.
  2. Salve seu tema (por exemplo, custom-theme.css) no diretório assets/styles/.
Etapa 2: Ative seu tema na lista de temas

Para disponibilizar seu tema personalizado no frontend, você deve adicioná-lo à lista de temas retornada pelo método APP::getThemes(). Isso é feito substituindo o método ZBase::getThemes() dentro da classe APP, conforme mostrado a seguir:

  1. Abra o arquivo include/classes/core/APP.php e localize a classe APP:
class APP extends ZBase {

}
  1. Dentro da classe, antes da chave de fechamento final }, adicione o método a seguir:
public static function getThemes() {
          return array_merge(parent::getThemes(), [
              'custom-theme' => _('Custom theme')
          ]);
}

onde:

  • custom-theme - o identificador interno do seu tema, que deve corresponder ao nome do seu arquivo CSS sem a extensão .css;
  • Custom theme - o nome de exibição que você verá no frontend.

Para adicionar vários temas, liste-os no array, separando cada entrada com uma vírgula. A vírgula após a última entrada é opcional.

Por exemplo:

      public static function getThemes() {
          return array_merge(parent::getThemes(), [
              'custom-theme' => _('Custom theme'),
              'anothertheme' => _('Another theme'),
              'onemoretheme' => _('One more theme')
          ]);
      }
Etapa 3: Altere as cores dos gráficos

Para alterar as cores dos gráficos, um registro do novo tema deve ser adicionado à tabela de banco de dados graph_theme.

Exemplo de adição de um registro a um banco de dados 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;
Etapa 4: Usar o novo tema

No frontend do Zabbix, você pode definir este tema como o tema padrão ou selecioná-lo em um perfil de usuário.