8 Creating your own theme

Overview

By default, Zabbix provides a number of predefined frontend themes. To create a custom theme, follow the step-by-step procedure provided here.

Step 1: Create your theme

To create your own theme:

1. Create a CSS file from scratch or copy an existing theme (such as blue-theme.css, dark-theme.css, or another one) from the assets/styles/ directory and modify it.
2. Save your theme (for example, custom-theme.css) in the assets/styles/ directory.

Step 2: Enable your theme in the Theme list

To make your custom theme available in the frontend, you must add it to the list of themes returned by the APP::getThemes() method. This is done by overriding the ZBase::getThemes() method inside the APP class as follows:

1. Open the include/classes/core/APP.php file and and locate the APP class:

class APP extends ZBase {

}

2. Inside the class, before its final closing brace }, add the following method:

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

where:

• custom-theme - the internal identifier of your theme and must match the name of your CSS file without the .css extension;
• Custom theme - the display name you will see in the frontend.

To add multiple themes, list them in the array, separating each entry with a comma. A trailing comma after the last entry is optional.

For example:

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

Changing graph colors

To change graph colors, a record for the new theme must be added to the graph_theme database table.

Example of adding a record to a MySQL/MariaDB database:

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

Step 3: Use the new theme

In the Zabbix frontend, you can either set this theme as the default theme or select it in a user profile.