1 Creating your own theme

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

Step 1

Create your own CSS file.

The file can be based on existing CSS files coming with Zabbix. For example, you may take Black&Blue CSS file from styles/css_bb.css and create new css_new.css.

Step 2

Place the new CSS file into correct location.

The file you created, css_new.css, into directory styles/.

Step 3

Edit include/forms.inc.php.

Open this file for editing, search for css_bb.css. There are two pieces of code that have to be amended.

Original code:

$cmbTheme = new CComboBox('theme',$theme);
       $cmbTheme→AddItem(ZBX_DEFAULT_CSS,S_SYSTEM_DEFAULT);
       $cmbTheme→AddItem('css_ob.css',S_ORIGINAL_BLUE);
       $cmbTheme→AddItem('css_bb.css',S_BLACK_AND_BLUE);

Modified code:

$cmbTheme = new CComboBox('theme',$theme);
       $cmbTheme→AddItem(ZBX_DEFAULT_CSS,S_SYSTEM_DEFAULT);
       $cmbTheme→AddItem('css_ob.css',S_ORIGINAL_BLUE);
       $cmbTheme→AddItem('css_bb.css',S_BLACK_AND_BLUE);
       $cmbTheme→AddItem('css_new.css','MY_COOL_THEME');

Note that original themes use constants, but the new example uses string (enclosed in apostrophes). You should not omit apostrophes, as that will result in warnings. If you want your theme name to be translatable, you must add the constant used for name in locale files - in that case make sure to prefix it with S_.

Step 4

You should also add your new theme to the config.php file:

$combo_theme→addItem('css_new.css','MY_COOL_THEME');

Step 5

Activate new theme.

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

Enjoy new look and feel!

Documentation