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:
Eli Winderickx
2024-03-24 20:34:27 +01:00
parent ceb3785c5d
commit 1a10fcdf49
31 changed files with 48 additions and 23 deletions

View 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;
````