Zabbix Documentation 4.4

3.04.04.4 (current)| In development:5.0 (devel)| Unsupported:1.82.02.22.43.23.44.2Guidelines

User Tools

Site Tools


manual:web_interface:theming

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
manual:web_interface:theming [2014/09/25 14:26]
sasha Page moved from 2.4:manual:web_interface:theming to manual:web_interface:theming
manual:web_interface:theming [2019/06/14 13:59] (current)
martins-v formatting change
Line 1: Line 1:
-==== Creating your own theme ====+==== Creating your own theme ====
  
 === Overview === === 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.+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 the result of your work with Zabbix community if you created something nice.
  
 == Step 1 == == 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.+To define your own theme you'll need to create a CSS file and save it in the ''​assets/styles<​nowiki>​/</nowiki>''​ folder (for example, ​//​custom-theme.css//). You can either copy the files from a different theme and create your theme based on it or start from scratch.
  
 == Step 2 == == Step 2 ==
Line 14: Line 14:
  public static function getThemes() {  public static function getThemes() {
  return array_merge(parent::​getThemes(),​ array(  return array_merge(parent::​getThemes(),​ array(
- 'mytheme' => _('My theme'​)+ 'custom-theme' => _('Custom ​theme'​)
  ));  ));
  }  }
  
-<note important>​Note that the name you specify within the first pair of quotes must match the name of the directory under which the theme files have been saved.</​note>​+<note important>​Note that the name you specify within the first pair of quotes must match the name of the theme file without extension.</​note>​
  
 To add multiple themes, just list them under the first theme, for example: To add multiple themes, just list them under the first theme, for example:
Line 24: Line 24:
  public static function getThemes() {  public static function getThemes() {
  return array_merge(parent::​getThemes(),​ array(  return array_merge(parent::​getThemes(),​ array(
- 'mytheme' => _('My theme'​),​+ 'custom-theme' => _('Custom ​theme'​),​
  '​anothertheme'​ => _('​Another theme'​),​  '​anothertheme'​ => _('​Another theme'​),​
  '​onemoretheme'​ => _('One more theme'​)  '​onemoretheme'​ => _('One more theme'​)
Line 32: Line 32:
 Note that every theme except the last one must have a trailing comma. Note that every theme except the last one must have a trailing comma.
  
-<note tip>To change graph colours, entry must be added in the database table //​graph_theme//​.</​note>​+<note tip>To change graph colours, ​the entry must be added in the //​graph_theme// ​database table.</​note>​
  
 == Step 3 == == Step 3 ==
 Activate the new theme. 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.+In Zabbix ​frontend, 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! Enjoy the new look and feel!