Creación de tu propio tema

Descripción general

De forma predeterminada, Zabbix proporciona una serie de temas predefinidos del frontend. Para crear un tema personalizado, siga el procedimiento paso a paso que se proporciona aquí.

Paso 1: Cree su tema

Para crear su propio tema:

  1. Cree un archivo CSS desde cero o copie un tema existente (como blue-theme.css, dark-theme.css u otro) del directorio assets/styles/ y modifíquelo.
  2. Guarde su tema (por ejemplo, custom-theme.css) en el directorio assets/styles/.
Paso 2: Habilitar el tema en la lista de temas

Para que el tema personalizado esté disponible en el frontend, debe agregarlo a la lista de temas que devuelve el método APP::getThemes(). Esto se hace sobrescribiendo el método ZBase::getThemes() dentro de la clase APP, de la siguiente manera:

  1. Abra el archivo include/classes/core/APP.php y localice la clase APP:
class APP extends ZBase {

}
  1. Dentro de la clase, antes de la llave de cierre final }, agregue el siguiente método:
public static function getThemes() {
          return array_merge(parent::getThemes(), [
              'custom-theme' => _('Custom theme')
          ]);
}

donde:

  • custom-theme: identificador interno del tema; debe coincidir con el nombre del archivo CSS sin la extensión .css;
  • Custom theme: nombre visible que verá en el frontend.

Para agregar varios temas, inclúyalos en el array y separe cada entrada con una coma. La coma final después de la última entrada es opcional.

Por ejemplo:

      public static function getThemes() {
          return array_merge(parent::getThemes(), [
              'custom-theme' => _('Custom theme'),
              'anothertheme' => _('Another theme'),
              'onemoretheme' => _('One more theme')
          ]);
      }
Paso 3: Cambiar los colores de los gráficos

Para cambiar los colores de los gráficos, debe agregarse un registro para el nuevo tema en la tabla de base de datos graph_theme.

Ejemplo de cómo agregar un registro a una base de datos 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;
Paso 4: Usar el nuevo tema

En el frontend de Zabbix, puede establecer este tema como el tema predeterminado o seleccionarlo en un perfil de usuario.