Skinning Zabbix

[oliverm]

Hi,

Is there an official way to skin zabbix ? I need to tweak the layout a bit (increase the size of the navbar and nav links, colours, logo etc) in order to fit in with out company look.

Rather than just dive in there (as usual) i thought i'd check.

Olly

[rolandsym]

Been looking too

I've been looking to do this too.

Changed public_html/images/general/zabbix.png with a customized images but same name. or change reference in include/page_header.php

public_html/css.css for the color scheme


I haven't had the time but I'd like to modify a way to make the last value on the latest.php page show more than 18 - 20 characters. Right now I think it just defaults the the cell size.

Rolandsym

[nelsonab]

One option would be to wrap the various items you are looking for. If you add &fullscreen=1 to the url you loose the top and bottom navbar. You could then perhaps use that inside an include on your page.

[sdwilders]

I thought I'd bring this post back to the front of the forums as I'm quite interested in seeing if there are many people who would have a go at doing this. I managed to implement some very simple changes to the interface by going from blues and reds to greens and blacks as per our company colours, and to change the Zabbix logo to our logo.

I know that the functionality is the highest priority and you can tell this is the case because Zabbix is one fantasically powerful program that has increased our service levels significantly; and Zabbix doesn't look so bad in its default state.

I've worked with Nagios previously and hated its default skin - looked so amateur especially in comparison to Zabbix's very professional look. Someone did skin Nagios very well:


Maybe we can add a section to the wiki for people to submit their CSS and image folder?

[Alexei]

FYI Support of GUI themes is already implemented for 1.6, which will be officially released exactly after one month.

[dido1975]

Hi!
I'm sorry, I'm just playing around with the new version of Zabbix (compliments, it is great!!). Anyway, I cannot find how to deal with themes.. I mean, there is a guide on how to change the layout or adding a new theme?
Thank you very much!
Tom

[Aly]

I'm afraid there isn't such guide for now. Themes are created by creating custom CSS file and editing one php file(to add needed theme to selection menu in users profile and systems conf). By default zabbix has 2 themes, original and "Black & Blue". "Black & Blue" one is made by PATH_TO_ZABBIX_FRONTEND/styles/css_bb.css. You can refer to it as an example.

A small HOWTO (create your own theme) :

1. Create your own custom CSS file
2. Place it with other zabbix CSS files(PATH_TO_ZABBIX_FRONTEND/styles/)
3. Edit PATH_TO_ZABBIX_FRONTEND/include/forms.inc.php, search for string "css_bb.css" (there are 2 places, which needed to be edited). Code there should be something like:

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

4. Add your theme. Example:
   

   		$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);
   			[B]$cmbTheme->AddItem('css_my_theme.css','MY_CUSTOM_THEME');[/B]

5. Save PATH_TO_ZABBIX_FRONTEND/include/forms.inc.php
6. Select added theme in zabbix frontend as your default theme
   

It's not so hard if you are familiar with web programming even on beginners level

[Alexei]

I added the HOWTO into the Manual!

[cjwallace]

Guys,

Anyone know if anyone has released any themes for Zabbix?

Craig

[nibb]

Customization is one the reasons I choosed to implement Zabbix.

Someone posted here a Nagios customization screen. I can only say WOWO

I know Nagios and the default skin is horrible, not to mention its not easy to customize, i cant believe someone actually made Nagios look like that. If people can do this with Nagios imagine what they can do with Zabbix.

Im happy that we all are going to see very good themes for Zabbix very soon. I dont care how Zabbix looks as default, what is important is the core and functions. Themes and looks will appear from the community. I will start to design some skin myself and post it here once its finished. It will take some time but im going to do it even with icons.

Im not a programmer, but im others are. So let people that are better with CSS and designs, make themes and let programmers focus on core. Its a mutal relantioship since i know most programmers are very bad designers.

Im sure others will also do it. If there is a category on the forum we could posts skins there.

[cjwallace]

Customization is one the reasons I choosed to implement Zabbix.

Someone posted here a Nagios customization screen. I can only say WOWO

I know Nagios and the default skin is horrible, not to mention its not easy to customize, i cant believe someone actually made Nagios look like that. If people can do this with Nagios imagine what they can do with Zabbix.

Im happy that we all are going to see very good themes for Zabbix very soon. I dont care how Zabbix looks as default, what is important is the core and functions. Themes and looks will appear from the community. I will start to design some skin myself and post it here once its finished. It will take some time but im going to do it even with icons.

Im not a programmer, but im others are. So let people that are better with CSS and designs, make themes and let programmers focus on core. Its a mutal relantioship since i know most programmers are very bad designers.

Im sure others will also do it. If there is a category on the forum we could posts skins there.

I am very much looking forward to seeing your results.

Craig

[kiesa]

Hi,

Is there any place where you can get Zabbix skins?

[pierre-hoffmann]

Hi,

Here my little tuto for add skin to 1.8.x

Add the new skin file here:

/var/www/zabbix/styles/css_mytheme.css

Add new logo here:

/var/www/zabbix/images/general/mylogo.png

Edit lang file to a string constant

vi /var/www/zabbix/include/locales/en_gb.inc.php
390         'S_THEMES'=>                                    'Themes',
391         'S_SYSTEM_DEFAULT'=>                            'System default',
392         'S_BLACK_AND_BLUE'=>                            'Black & Blue',
393         'S_ORIGINAL_BLUE'=>                             'Original blue',
394         'S_DEFAULT_THEME'=>                             'Default theme',
395         'S_MY_THEME'=>                                 'Theme mytheme',

Edit include "Forms" (for "Profile" upper right option)

vi /srv/www/htdocs/zabbix/include/forms.inc.php
[...]
803              $cmbTheme->addItem(ZBX_DEFAULT_CSS,S_SYSTEM_DEFAULT);
804              $cmbTheme->addItem('css_ob.css',S_ORIGINAL_BLUE);
805              $cmbTheme->addItem('css_bb.css',S_BLACK_AND_BLUE);
[B]806              $cmbTheme->addItem('css_mytheme.css',S_MY_THEME);[/B]
[...]

And for the admin->general config page:

vi /srv/www/htdocs/zabbix/config.php
877     $combo_theme = new CComboBox('default_theme',$config['default_theme']);
878     $combo_theme->addItem('css_ob.css',S_ORIGINAL_BLUE);
879     $combo_theme->addItem('css_bb.css',S_BLACK_AND_BLUE);
[B]880     $combo_theme->addItem('css_mytheme.css'S_MY_THEME);[/B]

Regards,

[yuhuu]

to pierre-hoffmann

to pierre-hoffmann

i did the same thing what u did.
but i the new theme doesnt appear at all at my gui selection.

do u have any others step that i can follow?

-----------------------------------
i want to change the theme.
i added new theme and save it in

/usr/ports/net-mgmt/zabbix-server/work/zabbix-1.8/frontends/php/styles/

then change in forms.inc.php

$cmbTheme->addItem('mytheme.css',MYTHEME);

plus add in en_gb_inc.php

'MYTHEME'=> 'Mytheme',

the last thing i change the config.php

 $combo_theme->addItem('mytheme.css',MYTHEME);

but in the frontend gui. there is new theme to be implement.




fyi,
i use FreeBSD 8.0
Zabbix 1.8

[CeeEss]

I'd sure like to see that Nagios reskin, but the image seems to have disappeared.

Anyhow, I have been on Zabbix's case for a long time re skinning/branding the interface. It's a grand pain to have to edit a selection of files and keep a cache of modded .css files to transplant each time the frontend changes (i update roughly monthly to get the bug fixes and the frontend files are _never_ sufficiently similar to leave them at earlier versions).

Alexei is in principle very recepetive to this idea so i urge you to vote on ZBXNEXT issues relating to separating out skin-worthy items from the base php/css so that site-specific changes get retained across frontend updates.