6 Creating your own theme

Overview

By default, Zabbix provides a number of predefined themes. You may follow the step-by-step procedure provided here in order to create your own. Feel free to share result of your work with Zabbix community if you created something nice.

Step 1

To define your own theme you'll need to create a CSS file and save it as styles/themes/mytheme/main.css. You can either copy the files from a different theme and create your theme based on it or start from scratch. The rules in the main.css file will extend the ones that are defined in the base Zabbix CSS files located in the styles folder. Any theme-specific images must be placed in the styles/themes/mytheme/images folder.

Step 2

Add your theme to the list of themes returned by the Z::getThemes() method. You can do this by overriding the ZBase::getThemes() method in the Z class. This can be done by adding the following code before the closing brace in include/classes/core/Z.php:

  public static function getThemes() {
             return array_merge(parent::getThemes(), array(
                 'mytheme' => _('My theme')
             ));
         }

To add multiple themes, just list them under the first theme, for example:

  public static function getThemes() {
             return array_merge(parent::getThemes(), array(
                 'mytheme' => _('My theme'),
                 'anothertheme' => _('Another theme'),
                 'onemoretheme' => _('One more theme')
             ));
         }

Note that every theme except the last one must have a trailing comma.

Step 3

Activate the new theme.

In Zabbix GUI, you may either set this theme to be the default one or change your theme in the user profile.

Enjoy the new look and feel!