Als je een pagina anders wil opmaken dan de rest van de website kan je gebruik maken van een "Pagina class". Als de stijl van je template de parameter heeft die je wil wijzigen zou je dit ook kunnen doen door meerdere stijlen aan te maken.

Een Class toevoegen

Eerst moeten we een class toevoegen aan de pagina die je anders wil opmaken. Op deze manier creëren we een extra selector die we later via de CSS vorm kunnen geven.

Ga naar het menu-item van de pagina die je anders wil opmaken via Menubeheer > Kies je menu-item > Tabblad Paginaweergave

Vul daar een naam in voor de CSS-class van de pagina: bv. groen

Laat deze voorafgaan door een SPATIE.

In principe kan je de naam van de class ook zonder spatie invoeren of laten voorafgaan door een liggend streepje (underscore): _groen

Deze werkwijze zal echter de reeds aanwezige selector veranderen, waardoor de gekoppelde CSS niet meer zal werken:

class=”blog_groen”

Waar komt de class terecht?

Dit is afhankelijk van de gebruikte template én de view van de component die je voor die pagina gebruikt. In heel wat gevallen zal deze toegevoegd worden  aan de div-tag of de section-tag waarin de component wordt weergegeven.  Bij andere templates wordt de page class toegevoegd aan de main-tag of de body-tag. Het is noodzakelijk om dit even te controleren.

Controleer ook of de class gescheiden wordt door een spatie.

Protostar:

Beez3:

In dit opzicht is de benaming "Pagina class" misschien wat misleidend. De class wordt immers niet altijd toegevoegd aan de body-tag maar meestal aan de tag van de component.

De opmaak aanpassen

We beschikken nu over een class-selector waardoor we extra CSS kunnen toevoegen. Ook onderliggende selectors kunnen we aanspreken. Voeg de extra opmaakregels toe aan het CSS-bestand van je template (zie Opmaak aanpassen).

Bv: Je hebt op je site 2 blogs die je verschillend wil opmaken. Als je de kleuren wil aanpassen van de titels van je 2e blog voeg je de Pagina class toe (bv.  groen) en voorzie je volgende CSS.

.groen h2 {
font-size: 24px;
color:#fff;
border-radius: 15px;
background-color: green;
}

Resultaat:

Indien je echter de HTML-structuur van je 2e blog wil aanpassen moet je werken met een "Alternatieve weergave".