About Zabbix
Zabbix is a free and open source network monitoring Software tool which is used to monitor and track the availability and performance of your IT infrastracture: servers, network devices and other IT assets.
In this article we are going to demonstrate how to change the Zabbix Frontend Logo in the Signin Page and in the top left of the Dashboard.
Check our previous tutorials to learn how to install Zabbix Server:
- How To Install Zabbix 3.4 Monitoring Server On Ubuntu 16.04 LTS
- How To Install Zabbix 3.4 Server On CentOS 7 / RHEL 7
- How to install Zabbix Agent on Ubuntu 16.04 LTS
- How to install Zabbix Agent on CentOS 7 / RHEL 7
– Before we start make sure to backup the css file using the following commands:
root@ylplzbx01:~# cp /usr/share/zabbix/styles/dark-theme.css{,.otg}
root@ylplzbx01:~# cp /usr/share/zabbix/styles/blue-theme.css{,.org}
Signin Logo
– Use FTP or another tools to insert your custom logo into the directoy /usr/share/zabbix/img/, in this tutorial we are using a png logo with a dimension 280px x 30px named signin-logo.png
– Open now the dark-theme.css and blue-theme.css and do the following modification:
.signin-logo {
margin: 0 auto;
margin-bottom: 21px;
height: 30px;
background: url(../img/signin-logo.png) no-repeat 0; }
Top Left Dashboard Logo
– To change the Top left Dashboard Zabbix Frontend logo, we use a custom png logo with dimension 95px x 25px named dashboard-logo inserted into the directory /usr/share/zabbix/img/
– Open the dark-theme.css and blue-theme.css and do the following modification:
.logo {
float: left;
display: block;
width: 95px;
height: 25px;
background: url(../img/dashboard-logo.png) no-repeat 0; }
.browser-logo-chrome {
background: url(../img/dashboard-logo.png) no-repeat 0 0; }
.browser-logo-ff {
background: url(../img/dashboard-logo.png) no-repeat; }
.browser-logo-ie {
background: url(../img/dashboard-logo.png) no-repeat 0; }
.browser-logo-opera {
background: url(../img/dashboard-logo.png) no-repeat 0; }
.browser-logo-safari {
background: url(../img/dashboard-logo.png) no-repeat 0; }
– Once you already done with the modification restart the apache service.
systemctl restart apache2 # For Ubuntu OS systemctl restart httpd # For CentOS / RHEL OS
We hope this tutorial was enough Helpful. If you need more information, or have any questions, just comment below and we will be glad to assist you!
24 comments
Hello Friend!
Maybe you know how to add your buttons to the panel with links to your pages or resources (sites) ???
Hello
In version 4 has changed, do you know where changes are made?
Hello Jesus,
Even for the zabbix 4.x the steps still the same as zabbix 3.x
Thanks, but it´s impossible, I had have the change and the logo is white. I prove with 30 logos more or less.
The new file in zabbix 4 is .svg
Doesnt matter the extension of the logo should works even if you are using .png . Did you cleaned the cache of the browser after you make changes ? Or you can use anonymous mode in your browser and finally make sure to use the indicate dimensions of the logo as the tutorial
Hi all,
For zabbix4 with the modified indicate in the site Yallalabs the logo dashboard-logo.png and signin-logo.png remains blank/white, nothing is visible .
the problem is that the .png files must be saved in the folder /usr/share/zabbix/assets/img/ and not /usr/share/zabbix/img/ .
sorry for my English 🙂
Yes, I did everything he tells me but it still does not work
How to change the ICON
What icon?
Zabbix icon, hostname: Dashboard having red box and white Z i.e; favicon.ico.
How to change zabbix Favicon ICON?
Hi
The problem are the back color of the icon.
The solution is correct
Thanks
We are glad that our guide was so helpful. Subscribe abd share the content of our website
Holaaa
Ya ingrese la imagen en el archivo pero cuando recargo la pagina aparece en blanco, ayuda por favor.
Clear the cache of your browser or use the anonymous browser mode
Sorry guys, i’ve modifie the field as the post, but still appears the zabbix logo…can you help me? I’ve 4.2.4 zabbix server
Hi Fabio, clear the cache of the browser and try again or use to anonymous web mode to verify .
Holaaa buen dia
Quisiera saber cual es el directorio (root @ ylplzbx01: ~ # cp /usr/share/zabbix/styles/dark-theme.css{,.otg}
root @ ylplzbx01: ~ # cp /usr/share/zabbix/styles/blue-theme.css{,.org} ) para CENTOS 7 ya que busco y no se encuentra
Hi,
The css files should be under the directory /usr/share/zabbix/styles/
Hi Lotfi,
Seeking your Help. i am having centos7 and RHEL6.2 and installed zabbix 3.4 on both servers. I have done all the above changes in both the servers to change the logo. chnages has been deployed on Centos7 but logos are not changing on RHEL6.2.
Thanks.
Hi, the procedure should works fine for both the version of centos. Maybe doesn’t showed because of the cache of the browser.
Hello,
I Have installed zabbix 3.4 on centos7 and rhel6.2 and done above changes on both OS to change the logo, its working perfectly fine with centos 7 but logo is not changing on rhel 6.2. please help.
Hi all,
For zabbix4 with the modified indicate in the site Yallalabs the logo dashboard-logo.png and signin-logo.png remains blank/white, nothing is visible .
the problem is that the .png files must be saved in the folder /usr/share/zabbix/assets/img/ and not /usr/share/zabbix/img/ .
sorry for my English 🙂
Excellent set of instructions and with a little extra experimentation I got the exact look I wanted.
If you’re having issues with a .svg file, I found that adding an extra line :
background: url(../img/NobiusColor-nobackground.svg) no-repeat 0 ;
background-size: 100% }
i.e. the background-size:100% saves a lot of hassle when your SVG isn’t perfectly formed.
Great article, works fine on 4.4.0 and tested across IE, Safari, FF and Chrome. Well done.