Als je de sjabloonontwerper wilt gebruiken met de CSS van je blogsjabloon, moet je enkele richtlijnen volgen.
De variabelen instellen
In de sectie <head> van je code moet het tagpaar <b:skin> </b:skin> worden geplaatst.
De CSS-stijldeclaraties komen tussen die tags te staan, samen met de namen van de variabelen die ervoor zorgen dat je ontwerp werkt met de pagina 'Lettertypen en kleuren'.
<head>
...
<b:skin>
<style type='text/css'>
/*
* Variable definitions:
* <Variable name='bgcolor' description='Page Background Color'
type='color' default='#fff'/>
*/
body {
background: $bgcolor;
margin: 0;
padding: 40px 20px;
}
</style>
</b:skin>
</head>De CSS-code die is ingesloten tussen de commentaartags /* en */, is niet zichtbaar op je blog.
Hier wordt een lijst met variabelen weergegeven, een voor elk lettertype of elke kleur die je wilt kunnen bewerken via het tabblad 'Lettertypen en kleuren'. Elke variabele moet de informatie uit het eerder genoemde voorbeeld en de hierna beschreven informatie bevatten:
- name: kan letters of cijfers bevatten. Elke naam in je sjabloon moet uniek zijn.
- description: hiermee voeg je een beschrijving toe die in de sectie 'Lettertypen en kleuren' wordt weergegeven.
- type: 'Lettertype' of 'Kleur'.
- default: de standaardwaarde. Voor kleuren is dit bijvoorbeeld een hexadecimale kleurcode zoals #FF0066. Voor lettertypen is dit een lijst met deze indeling: font-style font-weight font-size font-family.
De variabelen gebruiken
Als je, nadat de variabelen zijn ingesteld, de waarde van een variabele wilt gebruiken, geef je $variable_name op in de CSS-tag b:skin.
De sjabloonontwerper biedt bewerkingsondersteuning voor een specifieke set van CSS-variabeletypen. Het type variabele instellen:
- Kleurvariabelen leveren een kleurenpalet dat in de sjabloonontwerper kan worden geselecteerd.
- Lettertypevariabelen leveren een lettertypeselectie (met opties voor grootte en vet of cursief) in de sjabloonontwerper.
Het bovenstaande voorbeeld bevat een variabele bgcolor die is ingesteld op wit (#fff). In de volgende code staat: background: $bgcolor. Hierdoor wordt de achtergrond wit. Je kunt dit aanpassen in de sectie 'Lettertypen en kleuren'.
Opmerking: Je hoeft geen variabelen te maken voor andere typen CSS-kenmerken. Deze kunnen zoals gebruikelijk in de CSS worden ingevoegd (zoals de kenmerken margin: en padding: in het bovenstaande voorbeeld).