Kruimelpad
Aan de slag met CSS
CSS oftewel Cascaded Style Sheets is een 'taal' die beschrijft hoe HTML content er uit moet zien. Dit hoofdstuk is geen cursus in CSS noch in HTML, maar het geeft wel de samenhang weer en hoe je door eigen CSS aan de site toe te voegen, de weergave van de content kunt beïnvloeden. HTML (HyperTextMarkupLanguage) is gemaakt om je content te tonen en in te delen in bijvoorbeeld koppen en paragrafen, CSS is bedoeld om daar een leuke opmaak aan toe te voegen (even kort door de bocht uitgelegd).
Jouw browser ontvangt die combinatie van HTML en CSS en maakt daaruit hetgeen je feitelijk ziet.
Dus stel, je hebt in HTML een eenvoudige paragraaf dan wordt die 'achter de schermen' doorgestuurd als dit: <p>Dit is de tekst</P>.
Op het scherm zie je dan verschijnen: Dit is de tekst.
Maar als je meegeeft dat je de content in blauw wilt zien en de letters 20px groot, dan kan je CSS meegeven. Dat ziet er dan uit als:
<p style="color:blue; font-size:20px">Dit is de tekst</p>
En dat toont als
Dit is de tekst
Kortom, HTML is de inhoud, CSS is de opmaak.
Nu staan wij in het Drupal CMS (Content Management System) niet toe dat elke klant de basisopmaak mag aanpassen. Maar dat hoeft ook niet met CSS. De C staat voor 'Cascaded' en dat houdt in dat de browser in een bepaalde volgorde kijkt naar CSS. Zogenaamde 'inline CSS' komt eerst, dan toegevoegde CSS en dan de basis CSS (het ontwerp). Aangezien wij inline CSS ook niet toestaan uit security overwegingen, houdt dat bij onze sites in dat de browser eerst kijkt naar toegevoegde CSS en dan naar de basis CSS.
En het toevoegen van eigen CSS gebeurt via het Dashboard met de optie 'Thema instellingen' -> 'VU THEME CUSTOM CSS'. Daar zet je jouw eigen CSS neer die dan voorgaat op de basis CSS bij het laden van een pagina. En daarmee kan je nagenoeg alles aanpassen... maar dus ook overhoop halen. En dus: als je hiermee aan de slag gaat:
- Leer eerst CSS bijvoorbeeld via w3schools.
- Leer ook hoe je de CSS uit het basis thema kunt opzoeken in je browser. Die CSS gebruik je als basis om een aanpassing te doen en die plaats je dan in de CUSTOM CSS. Zie het plaatje hieronder waar je met de rechtermuisknop via de 'inspect (inspecteer) functie in de browser kan opzoeken hoe een bepaald gebied is gestyled. Die instructie kopieer je, pas je aan en plaats je in je eigen CSS.
- Op veel plekken in met name de 'Advanced pages' kan je een zelfbedachte 'CSS class' toevoegen, Kijk daarvoor onderaan in het gekozen blok bij 'Styling'. Die class neem je vervolgens op in je CSS en geef je alle kenmerken mee die je wilt toepassen.
- Weet dat de standaard CSS vaak op meerdere plekken wordt toegepast. Als je dus een aanpassing maakt in de CSS van het thema, test dan al je pagina's op je site om te zien of overal het beoogde effect is bereikt (en er niet per ongeluk iets mee veranderd wat niet was bedoeld).
- Probeer alles eerst uit op je test site voordat je het overzet naar productie (knip/plak alle custom CSS uit de dashboard pagina van je test site naar je productie site).
- VERGEET NIET OM ALLE AANPASSINGEN MINSTENS OOK OP DE MOBIEL TE TESTEN!!! Veel goed bedoelde pogingen zien er op een PC nog aardig uit, maar storten op een mobiel volledig in.
Rond het schermvoorbeeld hieronder zie je een kader in de vorm van een trapezium in het groen. Dit is gedaan als volgt (bedoeld als CSS voorbeeld):
- Definieer een strook met als type 'Landingspagina sectie'
- Geef hier een achtergrond aan. In dit geval een statische background color vanuit het kleurpalet (hier 'Success') en met een doorzichtigheid van 1 (niet doorzichtig)
- Als je dit opslaat, dan zie je wanneer je het resultaat met 'Inspect' bekijkt dat het gebied een class heeft gekregen zoals bijvoorbeeld 'background-23'.
- Als je dan in de CUSTOM CSS het volgende toevoegt:
#background-23 {
clip-path: polygon(0 3rem,100% 0,100% calc(100% - 3rem),0 100%);
}
Dan krijgt het achtergrond vlak die schuine lijnen.
Dit is uiteraard maar een heel klein voorbeeld van alles wat je met CSS kan. Ik hoop dat je het leuk vindt om ermee aan de slag te gaan en je erin te bekwamen.