Styling: cssVars

Wat zijn cssVars?

cssVars zijn voorgedefinieerde waardes die gebruikt kunnen worden om de styling van jouw website aan te passen.

Waar kan ik de cssVars instellen om mijn website te stylen of vormgeven?

Ga naar: Drupal beheermenu > Instellingen > Website (klik) > Tab: Branding > Veld: Theme settings

Hoe weet ik welke cssVar ik moet gebruiken?

Er zijn twee manieren om te achterhalen welke cssVar van toepassing is:

Ga op de website naar het element dat je wilt aanpassen:
- Klik op element met rechtermuis en kies voor 'Inspect'
- In de tab 'Styles" venster zie je welke cssVars er beschikbaar zijn
- De cssVars zijn te herkenen aan de twee voorloopstreepjes: --NAAMVANCSSVAR
De andere manier is om een nieuwe cssVar toe te voegen is in de dropdown lijst de juiste waarde op te zoeken zoals in de volgende alinea is beschreven

Hoe kan ik nieuwe cssVars toevoegen?

Toevoegen en verwijderen van nieuwe cssVars is eenvoudig:

Ga naar de onderste variabele en klik op het linker icoon
Kies voor append > string (zie afbeelding hieronder)
De waarde is aan te passen door erop te klikken in het veld zelf
Eventueel kun je de volgorde aanpassen door de cssVars te verslepen met drag/drop functionaliteit

Wat zijn "variables"?

In de thema-instellingen is een sectie opgenomen met "variables". Deze waardes kunnen hergebruikt worden in het 'cssVar' sectie gedeelte. Vaak zet je hier de huisstijl kleurcodes zodat je deze maar 1 keer hoeft te zetten en vervolgens in de verschillende cssVars kunt hergebruiken. Vergeet niet om het $-teken (dollar-teken) voor de naam van de variabele te zetten.

Voorbeeld: