[0. What you want to do / Why do you do it](#What you want to do / Why do you do it) 1. Goal [2. Image preparation](#Image preparation) [3. Preparing the environment](#Preparing the environment) [4. Transfer images to Zabbix server](#Transfer images to Zabbix server) [5. Source code rewriting](# source code rewriting)

What you want to do and why you do it

I want to make zabbix look cute! There are times when you want to change the image, color, background, etc., right? I'm not a front-end engineer, but I understand the basics, so I'm playing around with it. As for why I do it, for me it is "change my mood !! Learn more about ZABBIX!". On the other hand, I think that some people have an Active / Standby configuration, so I think it will be easier to see which machine you are accessing immediately.

goal

This time I will change the image of ZABBIX to tamolab like the image I did! スクリーンショット 2020-08-22 11.12.48.png

Image preparation

Create an image. I am a PowerPoint believer, so I will create it with Powerpoint. I didn't care about the size, but I created it with 88 × 20 (tamlab.JPG). Once created, save it to your desktop. スクリーンショット 2020-08-22 11.00.41.png

Transfer images to Zabbix server

Transfer the image to the server.

`data transfer`


PC$ scp ~/Desktop/tamlab.png <zabbix server IP>:~/
#Hopefully it will be transferred as below
tamlab.png               100%   31KB   3.0MB/s   00:00
PC$

Image placement

Move the transferred image to the following location.

`Data movement`


zabbix-server$ sudo mv ~/tamlab.png /usr/share/zabbix/assets/img/

Source code rewriting

Go to the hierarchy below and check the file.

`Hierarchical movement`


zabbix-server$ cd /usr/share/zabbix/assets/styles
zabbix-server$ ls 
blue-theme.css  dark-theme.css  hc-dark.css  hc-light.css

blue-theme.css dark-theme.css hc-dark.css hc-light.css is linked to the following settings. For example, if you select the "Dark" theme in the account settings (GUI), dark-theme.css will be applied. スクリーンショット 2020-08-22 11.25.46.png

Let's edit the "Dark" theme. Edit the .logo.

`/usr/share/zabbix/assets/styles/dark-theme.css`


zabbix-server$ sudo vim /usr/share/zabbix/assets/styles/dark-theme.css
...
.logo {
  float: left;
  display: block;
  width: 95px;
  height: 50px;
  background: url(../img/tamlab.JPG) no-repeat 0 11px; }
  //background: url(../img/icon-sprite.svg) no-repeat 0 -903px; }
...

I commented out the original code and changed the reference image from ../img/icon-sprite.svg to ../img/tamlab.JPG. スクリーンショット 2020-08-22 11.42.41.png

the end. You can also customize it in various ways by playing with CSS!

I want to customize the appearance of zabbix