8 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 tornar seu tema personalizado disponível no frontend, você deve adicioná-lo à lista de temas retornada pelo método APP::getThemes(). Isso é feito sobrescrevendo o método ZBase::getThemes() dentro da classe APP da seguinte forma:

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

class APP extends ZBase {

}

2. Dentro da classe, antes da chave de fechamento final }, adicione o seguinte método:

public static function getThemes() {
          return array_merge(parent::getThemes(), [
              'custom-theme' => _('Custom theme')
          ]);
}

onde:

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

Para adicionar vários temas, liste-os no array, separando cada entrada por uma vírgula. Uma 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')
          ]);
      }

Alterando as cores do gráfico

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

Exemplo de adição de um registro em 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
)
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'
);

Etapa 3: Use 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.