Grafische overhoal & Post sort
modified: components/BlogList.js modified: components/Header.js modified: components/Layout.js deleted: data/info.md new file: data/over.md renamed: pages/info.js -> pages/over.js renamed: posts/24Jun-zabbix-prom.md -> posts/23-06-24-zabbix-prom.md renamed: posts/1Jul-SELinuxMetZabbix.md -> posts/23-07-01-SELinuxMetZabbix.md renamed: posts/9Jul-zabbix-ha-cluster.md -> posts/23-07-09-Zabbix-ha-cluster.md renamed: posts/16Jul-rebranding-zabbix.md -> posts/23-07-16-Rebranding-zabbix.md renamed: posts/21Jul-OpenSSH.md -> posts/23-07-21-OpenSSH.md renamed: posts/22Jul-Permissions.md -> posts/23-07-22-Permissions.md renamed: posts/24Jul-SyncRepo.md -> posts/23-07-24-SyncRepo.md renamed: posts/28Jul-SystemdApps.md -> posts/23-07-28-SystemdApps.md renamed: posts/31Jul-SELinux.md -> posts/23-07-31-SELinux.md renamed: posts/1Aug-Documentatie.md -> posts/23-08-01-Documentatie.md renamed: posts/10Aug-AWK_basis.md -> posts/23-08-10-AWK_basis.md renamed: posts/16Aug-GetAGrep.md -> posts/23-08-16-GetAGrep.md renamed: posts/23Aug-Git_masterclass.md -> posts/23-08-23-Git_masterclass.md renamed: posts/30Aug-ZabbixBackup.md -> posts/23-08-30-ZabbixBackup.md renamed: posts/6Sept-Kickstart.md -> posts/23-09-06-Kickstart.md renamed: posts/27Sept-GitlabUpgrade.md -> posts/23-09-27-GitlabUpgrade.md renamed: posts/4Okt-HashicorpVault.md -> posts/23-10-04-HashicorpVault.md renamed: posts/8Okt-Certbot.md -> posts/23-10-08-Certbot.md renamed: posts/11Okt-HashicorpVault.md -> posts/23-10-11-HashicorpVault.md renamed: posts/12Okt_ACL.md -> posts/23-10-12-ACL.md renamed: posts/18Okt-InABind.md -> posts/23-10-18-InABind.md renamed: posts/23Okt-Autofs.md -> posts/23-10-23-Autofs.md renamed: posts/25Okt-RPM.md -> posts/23-10-25-RPM.md renamed: posts/26Okt-Journald.md -> posts/23-10-26-Journald.md modified: styles/Info.module.css
This commit is contained in:
57
posts/23-07-16-Rebranding-zabbix.md
Normal file
57
posts/23-07-16-Rebranding-zabbix.md
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
title: "Zabbix rebranden"
|
||||
excerpt: 'Zabbix heeft standaard een mooie look and feel. We kunnen hiernaast toch nog een huisstijl toepassen.'
|
||||
date: '2023-07-16T18:00:00.000Z'
|
||||
author: Eli Winderickx
|
||||
hero_image: /ZabbixRebranding_cover.png
|
||||
category: Aanpassen,Zabbix,Logo's
|
||||
---
|
||||
## Vereisten
|
||||
Omdat we een rebranding gaan doen hebben we een aantal items nodig;
|
||||
- Een groot logo: 114x30px
|
||||
- Een logo voor de zijbalk: 91x24px
|
||||
- Een compact logo voor de zijbalk: 24x24px
|
||||
|
||||
> Sysadmin tip: Heb je geen logo's of grafische vaardigheden? Gebruik een tekst editor naar keuze (neovim, Libreoffice Writer, ...) typ daar een naam in en maak een screenshot.
|
||||
|
||||
Als je ook de kleuren wilt aanpassen, moet je ook weten naar welke kleuren je dit wilt doen. Hou dus zeker de hexadecimale notatie bij de hand!
|
||||
|
||||
## De logo's
|
||||
Hier ga ik er even van uit dat je ``NGINX`` gebruikt als webserver. In ``/etc/nginx/conf.d/zabbix.conf`` ga je normaal dan de configuratie van jouw site terugvinden en normaal is de standaard document root ``/usr/share/zabbix``. Maak hierin een map die al jouw logo's gaat bevatten.
|
||||
|
||||
````bash
|
||||
sudo mkdir /usr/share/zabbix/my_images
|
||||
sudo cp logo*.png /usr/share/zabbix/my_images/
|
||||
````
|
||||
|
||||
Nu kan je onder ``/usr/share/zabbix/local/conf`` het bestand ``brand.conf.php`` aanpassen. Als deze niet bestaat, kan je die gewoon aanmaken. Deze moet een array teruggeven van de verschillende logo's en eventueel kan je hier ook de footer en help pagina meegeven.
|
||||
|
||||
````php
|
||||
<?php
|
||||
|
||||
return [
|
||||
'BRAND_LOGO' => '/my_images/EliFull.png',
|
||||
'BRAND_LOGO_SIDEBAR' => '/my_images/EliFullSmaller.png',
|
||||
'BRAND_LOGO_SIDEBAR_COMPACT' => '/my_images/EliSmall.png',
|
||||
'BRAND_FOOTER' => '©Eli Winderick',
|
||||
'BRAND_HELP_URL' => 'https://winderickx.me/'
|
||||
];
|
||||
````
|
||||
|
||||
## Kleuren aanpassen
|
||||
Opnieuw in de document root van de zabbix website (/usr/share/zabbix) ga je in de map ``assets/styles/`` verschillende CSS bestanden terugvinden. Kopieer hier gerust een theme als startpunt. Hierna kan je hier aanpassen wat nodig. Het is een heel bestand dus ik overloop hier de voornaamste items.
|
||||
|
||||
````bash
|
||||
sudo cp /usr/share/zabbix/assets/styles/blue-theme.css /usr/share/zabbix/assets/styles/new-theme.css
|
||||
sudo vim /usr/share/zabbix/assets/styles/new-theme.css
|
||||
````
|
||||
|
||||
Een simpele maar toch ingrijpende aanpassing is de kleur van de sidebar. Deze kan je een duidelijke kleur van jouw huisstijl geven en zo dus meteen naar je hand zetten. Je kan de volledige ``look and feel`` aanpassen hier dus wees voorzichtig met grote wijzigingen, bouw stuk per stuk op en vooral:
|
||||
``KEEP IT SIMPLE, STUPID``
|
||||
|
||||
````css
|
||||
/* ... */
|
||||
.sidebar {
|
||||
/* ... */
|
||||
background: #ff0000;
|
||||
````
|
||||
Reference in New Issue
Block a user