Wanneer je de CSS-taal kent (lees anders eerst artikel «Introductie in Stylesheets»), dan kun je op eenvoudige wijze de weergave van jouw site aanpassen, zelfs zonder de taal van bakens en lussen van SPIP te kennen.
Maak jouw stylesheet
Bij de installatie van SPIP worden de skeletten aangeleverd samen met enkele externe stylesheets die de grafische weergave van de site bepalen. Je kunt deze bestanden aanpassen en je eigen definities toevoegen, maar als je wilt voorkomen dat ze bij een volgende update van SPIP worden overschreven, kun je dat beter in "eigen" stylesheets doen.
Belangrijk: Werk nooit in de standaard bestanden die door SPIP worden aangeleverd, anders riskeer je dat deze aanpassingen overschreven worden bij een volgende update van SPIP! Maak daarom een kopie van het bestand dat je wilt aanpassen.
1. Maak een bestand mijn_styles.css (of wat voor naam dan ook) en plaats dat in jouw map «squelettes». In dit bestand neem je de definities op die je wilt aanpassen of toevoegen. In de rest van dit artikel gaan we uit van een leeg bestand.
2. Zorg dat deze stylesheet wordt aangeroepen in de heading van het skelet (of de skeletten), dus binnen de <head> tags (waar je onder andere ook de title en andere meta tags vindt). Doe dat op deze manier:
<link rel="stylesheet" type="text/css" href="#CHEMIN{mijn_styles.css}" />
Vaak volstaat een enkele stylesheet, maar indien nodig kun je er meerdere gebruiken.
- SPIP maakt het je gemakkelijk met perso.css
Om een eerste stap in de aanpassing van de styling te maken, kun je ook een bestand perso.css in de (aan te maken) map squelettes/css/ (of squelettes/ voor SPIP 2.1) plaatsen.
Omdat SPIP dit bestand (altijd als laatste) zal proberen te laden, hoef je dit niet apart in de heading op te nemen. Dubbele CSS definities zullen elkaar overschrijven, dus een aanpassing die je in perso.css overschrijft een eerdere definitie in een standaard stylesheet van SPIP. Het gebruikt van dit bestand is dus handig om:
- de een of andere stijl aan te passen
- aanpassingen uit te proberen
- persoonlijk stijlen te definiëren
Omdat dit bestand altijd wordt geladen (en dus op alle skeletten wordt toegepast), kun je voor meer specifieke toepassingen beter één of meer eigen stylesheets definiëren en toepassen zoals hierboven omschreven.
Respecteer de «cascadering»
Het is belangrijk de «waterval» functionaliteit van CSS in gedachten te houden. De naam (Cascading Style Sheets) zegt het letterlijk: het begrip "cascading" (als een waterval) verwijst naar de mogelijkheid van het overerven van opmaak-eigenschappen. Wanneer meerdere definities worden gevonden, wordt degene die in definitie het dichtst bij het element komt, toegepast. De volgorde waarin ze worden gelezen is belangrijk.
- Externe stylesheets
Gebruik je meerdere stylesheets, dan is de volgorde waarin ze worden aangeroepen belangrijk. Roep je eerst mijn_styles.css en vervolgens spip_style.css dan worden jouw wijzigingen mogelijk niet meegenomen. Doe dus het omgekeerde:
<link rel="stylesheet" type="text/css" href="#CHEMIN{spip_style.css}">
<link rel="stylesheet" type="text/css" href="#CHEMIN{mijn_styles.css}">- CSS binnen de HTML
Wil je de stylesheets niet aanpassen, dan kun je altijd een aanpassing op het element zelf (in de statische HTML-pagina of in het skelet) doen. Ook daar kun je tussen de head tags direct CSS opnemen.
Maar de CSS die je direct op een HTML-tag toepast en dus het dichtst bij het element staat, zal voorrang krijgen boven de CSS tussen de head tags, en ten laatste boven die van de externe stylesheets.
Styling met «class»
Hoe kun je bijvoorbeeld de tussentitels van SPIP aanpassen? Het is heel eenvoudig. Open je bestand mijn_styles.css of perso.css in een tekstverwerker (Notepad is al voldoende) en voeg de volgende regel toe:
h3.spip { color: red; font-size: 18px; }
Bekijk de pagina: Alle tussentitels staan in het rood, maar alle andere eventuele h3 tags op je pagina zijn niet veranderd.
Let op: In moderne browsers worden ook externe stylesheets in de cache opgeslagen. Mogelijk moet je dus die cache leegmaken vóórdat je de veranderingen kunt zien!
Een korte uitleg van bovenstaande aanpassing:
- h3.spip verwijst naar een specifieke <h3> tag, namelijk die tag die ook een class gelijk aan «spip» heeft. Alleen de <h3> tags met dit attribuut worden door de definitie beïnvloed.
Wil je je eigen styling toevoegen, dan is de waarde van dit attribuut class volledig arbitraire. Het enige wat telt is dat je dezelfde naam in zowel de HTML code (class="toto") als in de CSS van je stylesheet (.toto { ... }) toepast.
Denk er wel aan dat je een door SPIP gegenereerde class niet kunt hernoemen (wel aanpassen). De standaarddefinities van hun styling zijn gegroepeerd in spip_style.css.
- Accolades omvatten de lijst van grafische eigenschappen die aan een bepaalde style zijn toegekend. In het voorbeeld zie je dat het attribuut voor de kleur rood aangeeft en de grootte van het lettertype op 18 pixels wordt vastgelegd.
Alle niet-gedefinieerde eigenschappen behouden hun gebruikelijke (of eerder gedefinieerde) waarde: voor h3 betekent dat altijd een tekst in vetschrift, omdat niets tegen die standaarddefinitie ingaat.
De cache
Het feit dat van een externe stylesheet gebruik gemaakt wordt, heeft een belangrijk gevolg. Dit bestand wordt niet beheerd door SPIP wat betekend dat wanneer je een stylesheet aanpast je de cache van SPIP niet hoeft te ledigen. Mogelijk wel die van je browser, zoals we al eerder opmerkten!
Je aanpassingen in een skelet vereisen wél dat je de cache ververst! Je kan dat doen door de pagina in je browser te laten herberekenen met de daarvoor aanwezige knop van SPIP.