How to change logo in zabbix 3.2

[jaydeep]

I wonder how to change the logo in zabbix 3.2
I could not find a way out to change the default zabbix logo or to add another logo.
If any one can help.

[Atsushi]

Please try to change the background of the .logo of the setting.

.logo{
	float:left;
	display:block;
	width:95px;
	height:25px;
	margin:10px 10px 0 0;
	background:url(../img/icon-sprite.svg) no-repeat 0 -903px
}

[jaydeep]

Thanks Atsushi.
Can I replace the logo of zabbix with another logo? If yes, need your guidance on how to do it.

[Atsushi]

Logo of the image has been set in the CSS file.
The target file is the styles/blue-theme.css and styles/dark-theme.css.

For example, it had become the setting, such as the following in 2.2 and 2.4.

background: #FFFFFF url('../images/general/zabbix.png') no-repeat;

Place the image file in the same way, please try to specify the path to the url.

[jaydeep]

How to change logo in zabbix 3.2

I think the .svg file can be changed with another logo file to change the logo.
Please correct me if I am mistaken.

[jaydeep]

Sorry I did not check your post and sent my point. Yes you have already updated.
thanks

[jaydeep]

How to change logo in zabbix 3.2

Hi,

As per the guidance I tried changing the logo file in the stylesheet .css but could not succeed. I could change the logo by changing the .svg file with my png file renamed as .svg but that also changed lots of other formats which are required hence reverted back.
Kindly help further in resolving it.

Thanks.

[Atsushi]

You do not need to change the file extension.
Please tell me how the specified for.

[jaydeep]

How to change logo in Zabbix 3.2

Hi Atsushi,

Thanks for your kind support. While I changed the blue-theme.css I changed
background:url(../img/icon-sprite.svg) no-repeat 0 -903px
TO
background:url(../img/logo1.png) no-repeat 0 -903px

[Atsushi]

Please try to change from

background:url(../img/icon-sprite.svg) no-repeat 0 -903px

to

background: #FFFFFF url('../img/logo1.png') no-repeat;

Please adjust the width and height.

[jaydeep]

How to change logo in zabbix 3.2

Please try to change from

background:url(../img/icon-sprite.svg) no-repeat 0 -903px

to

background: #FFFFFF url('../img/logo1.png') no-repeat;

Please adjust the width and height.

Hi Atsushi,

Thanks for your kind guidance but while applying the above mentioned suggested changes, I observed that the zabbix logo on top left corner is removed after login but mylogo (logo1.png) is not displayed.

Also observed that on the first login page, the zabbix logo is as it is & is not changed.

Kindly guide further.

Thanks
Jaydeep

[Atsushi]

I was able to change the icon in the following code.

.logo{width:199px;height:44px;background:url(../img/newlogo.png) no-repeat;}

[diego.carmignani]

Theme files location

Sorry but i didn't find the theme.css file on my Zabbix 3.2.4
I able to find only classic or darkblue folder with "main.css" file but there isn't any location with .svg file...
I want to set my company logo in Zabbix

[Atsushi]

Have you checked other versions of the file?
If you use 3.2.x, the target file is the styles/blue-theme.css and styles/dark-theme.css.

[pedroitsol]

I have managed to change the zabbix icon. Even if I arrive a little late I hope it helps someone. I use zabbix 3.4 appliance. The styles are on the path: / usr / share / zabbix / styles # ls /usr/share/zabbix/styles blue-theme.css dark-theme.css I searched for .logo in the .css and deleted -903px so I could do a simpler svg. .logo { float: left; display: block; width: 95px; height: 25px; background: url(../img/icon-sprite2.svg) no-repeat 0; } <--- I edited the name to take the new icon Following a svg manual, I made a small icon for zabbix named icon-sprite2.svg in / usr / share / zabbix / img This is my icon-sprite2.svg: <svg xmlns="http://www.w3.org/2000/svg"> <g> <rect x="0" y="0" width="95" height="25" fill="red"></rect> <text x="4" y="17" font-weight="bold" font-family="Arial" font-size="15" fill="white">HELLO!!</text> </g> </svg> x="4" y="17" <--- I used it for the separation You can now reload the page.