Deze opdracht is ook onderdeel van je examen, want daar maak je een Brandbook ofwel Huisstijlboek. Om dit te oefenen maak je nu een analyse van een artikel in een door jou gekozen medium. Je beschrijft de grafische stijl in een Bericht op je website, zie hieronder. Lever deze analyse in als url, in Teams.
Aan de hand van de analyse maak je daarna met Custom CSS die stijlen na. Zodat jouw artikelen in de stijl van jouw gekozen medium zijn.
1. Analyse
Kies een medium. Bekijk een artikel en noteer de stijl van de onderstaande onderdelen. Gebruik het web-infovenster (rechtsklik > Inspecteer). Schrijf er een verslag over, als Bericht op je website.
- De koptekst: kleur, lettertype, fontgrootte en interlinie
oftewel color, font-family, font-size en line-height - Hetzelfde van de tussenkopjes
- Idem van de broodtekst ofwel body text
- De kleur en stijl van links
- Streamers of quotes: een blockquote, zie hieronder, als die er zijn
- De stijl van Onderschriften bij foto’s
- Als de eerste alinea afwijkt (de intro of lead), dan ook deze stijl
- Een Chapeau: staat er nog iets bovenaan, boven de kop?
Een voorbeeld van het webinfovenster:
In het voorbeeld hierboven schrijf je op wat de stijl van de koptekst h1 is:
- kleur / color: #141412 (donkergrijs)
- lettertype / font-family: Bitter, Georgia, serif
(dus bij voorkeur de Bitter, maar als de bezoeker dat niet heeft, dan de Georgia, en anders gewoon een serif font ofwel een schreefletter) - fontgrootte / font-size: 48px
- interlinie / line-height: 1.3
Verder noteer je ook de HTML van deze kop. In dit voorbeeld is dat een h1 met class=”entry-title”.
Hieronder een voorbeeld van een HTML blockquote:
Dit is voorbeeld van een streamer, ofwel quote. In WordPress en HTML heet dat een blockquote.
2. Custom CSS
Als je in jouw Customizer geen Custom CSS ziet (niet elk Thema heeft dat), dan activeer je de plugin voor Custom CSS. Voeg daar je css-code toe.
Noteer ook de HTML en de class van elementen. Bijvoorbeeld een h1 met class=”entry-title“. Een gewone paragraaf staat meestal in een div met class=entry-content. Dus elke p in elk artikel kun je in de CSS zo vormgeven:
.entry-content p { color: red; }
Dit betekent: alle p’s die in een div met class=”entry-content” staan worden rood.
Als het niet werkt zet je er !important bij, zo:
.entry-content p { color: red !important; }
Gebruik ook ergens een eigen class, en pas die ook ergens toe in je artikel. Bijvoorbeeld voor de intro, of voor een kader om een plaatje. Zoek zelf uit waar je deze CSS in jouw artikel kan toevoegen (ergens in de blok-editor bijvoorbeeld):
.plaatje {border: 1px solid black;}
3. Logo en Favicon
Info volgt nog.
4. Homepage
Info volgt nog.