Stijlen aanpassen

In de eerste plaats is het natuurlijk nodig dat je kennis hebt van het maken van stijldefinities in CSS. Indien je dit niet of niet in voldoende mate beheerst, neem dan contact op met je webdesigner om de aanpassingen te doen die je wenst.

Om de stijlen aan te passen in je website is het in verder nodig dat je ook de bestanden van het ingestelde thema op je eigen computer heb staan. Je kunt in de Admin zien welk thema geactiveerd is.

Vervolgens zul je in dat thema op zoek moeten gaan naar het bestand custom.css. Alleen dat bestand zou ik aanpassen, de andere .css bestanden laat je gerust.

Een handige manier om te controleren welke stijl in gebruik is voor een bepaald element is de developer-tool die tegenwoordig in elke belangrijke browser aanwezig is. Voor Google Chrome, Firefox en Edge druk je daarvoor op F12. Er wordt vervolgens een scherm getoond, waarin je kunt kiezen voor Elements. Als je vervolgens in het HTML-gedeelte een bepaald element aanklikt krijg je in het rechter paneel te zien welke stijlen er voor dat element in gebruik zijn. Je kunt de stijl daar ook veranderen, om te zien wat het resultaat is. Je maakt hier natuurlijk geen echte veranderingen. Die doe je in custom.css, dat je vervolgens upload met FTP. Daarna ververs je de pagina en kun je zien of het resultaat je bevalt.

dev tools

Een zeer handige optie van dit gereedschap is het tonen hoe je website er op andere apparaten uitziet. Klik hiervoor op het device-icoontje (zie afbeelding hieronder)

device

Hier zie je het resultaat van de apparaatinstelling voor een iPhone:

iphone

Dit geeft enkel een indruk! Check altijd je website op echte apparaten of maak gebruik van een goede simulator.

De pagina verversen lukt soms niet goed. Om de een of andere manier blijf je het resultaat zien dat in de cache van je browser aanwezig is. Een handige uitbreiding van onder andere Google Chrome is de add-on Clear Cache die je hier kunt vinden en installeren. In de opties van deze add-on (klik met je rechtermuistoets op het icoontje boven in de browser) vink je meteen de instelling bij Reload aan:

clear cache

Mocht dit nog niet helpen dan dien je de cache te legen van GRAV.