[0. Ce que vous voulez faire / Pourquoi le faites-vous](# Ce que vous voulez faire / Pourquoi le faites-vous) 1. Objectif [2. Préparation de l'image](# Préparation de l'image) [3. Préparer l'environnement](#Préparer l'environnement) [4. Transférer l'image vers le serveur Zabbix](Transférer l'image vers le serveur #Zabbix) [5. Réécriture du code source](# réécriture du code source)
Je veux rendre zabbix mignon! Il y a des moments où vous voulez changer l'image, la couleur, l'arrière-plan, etc., n'est-ce pas? Je ne suis pas un ingénieur front-end, mais je comprends les bases, donc je joue avec. Quant à savoir pourquoi je le fais, pour moi c'est "changer d'avis !! En savoir plus sur ZABBIX!" D'un autre côté, je pense que certaines personnes ont une configuration Active / Standby, donc je pense qu'il sera plus facile de voir à quelle machine vous accédez immédiatement.
Cette fois, je vais changer l'image de ZABBIX en tamolab comme l'image que j'ai faite!
Créez une image. Je suis un partisan de Power Point, alors je vais le créer avec Powerpo. Je me fichais de la taille, mais je l'ai créée avec 88 × 20 (tamlab.JPG). Une fois créé, enregistrez-le sur votre bureau.
Transférez l'image sur le serveur.
transfert de données
PC$ scp ~/Desktop/tamlab.png <IP du serveur zabbix>:~/
#Espérons qu'il sera transféré comme ci-dessous
tamlab.png 100% 31KB 3.0MB/s 00:00
PC$
Déplacez l'image transférée vers l'emplacement suivant.
Mouvement de données
zabbix-server$ sudo mv ~/tamlab.png /usr/share/zabbix/assets/img/
Accédez à la hiérarchie ci-dessous et vérifiez le fichier.
Mouvement hiérarchique
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 est lié aux paramètres suivants. Par exemple, si vous sélectionnez le thème "Sombre" dans les paramètres du compte (GUI), dark-theme.css sera appliqué.
Modifions le thème "Dark". Modifiez le .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; }
...
J'ai commenté le code original et changé l'image de référence de ../ img / icon-sprite.svg
à ../ img / tamlab.JPG
.
la fin. Vous pouvez également le personnaliser de différentes manières en jouant avec CSS!
Recommended Posts