CSS-klassen met relatieve breedte voor themalayouts

Als hulp om de elementen van een pagina aan te passen aan diverse breedtes, zijn CSS-klassen voor relatieve breedtes toegevoegd aan de themalayouts. Deze klassen zijn slechts markeringsklassen. Er zijn standaard geen stijlen gedefinieerd voor deze klassen. Ze zijn aanwezig voor de containers, rijen en kolommen, van de layouts, zodat u uw eigen stijlen kunt definiëren en deze waar nodig kunt koppelen aan de klassen. Hierdoor kunnen uw paginaelementen worden aangepast aan de diverse breedtes.

Er zijn twee typen klassen voor de relatieve breedte, waarbij van beide typen één wordt gebruikt voor elke layoutcontainer.

Semantisch type, één van:

wpthemeThin

wpthemeNarrow

wpthemeMedium

wpthemeWide

wpthemeFull

Deze typen ondersteunen maximaal vijf variaties van de breedte, en worden omschreven met gewone woorden, zoals narrow en wide.

Rastertype, één van:

wpthemeCol1of12

wpthemeCol2of12

wpthemeCol1of5

wpthemeCol3of12

wpthemeCol4of12

wpthemeCol2of5

wpthemeCol5of12

wpthemeCol6of12

wpthemeCol7of12

wpthemeCol3of5

wpthemeCol8of12

wpthemeCol9of12

wpthemeCol4of5

wpthemeCol10of12

wpthemeCol11of12

wpthemeCol5of5

wpthemeCol12of12

Deze typen ondersteunen maximaal 16 variaties van de breedte, en worden omschreven met een nummeringsysteem van nvann breedte-eenheden. Op het eerste gezicht lijkt het op een eenvoudig talstelsel, waarbij voor een layout met 5 kolommen de kolommen worden genummerd als wpthemeCol1of5, wpthemeCol2of5, wpthemeCol3of5, wpthemeCol4of5 en wpthemeCol5of5. De beste manier om hiermee te werken is echter om deze waarden niet te zien als het nummer van de kolom, maar eerder als het aantal breedte-eenheden dat de kolom in beslag neemt op de pagina. wpthemeCol2of5 betekent dus dat de kolom twee van de vijf breedte-eenheden van de pagina inneemt (2/5 van de paginabreedte) en wpthemeCol8of12 betekent dat de kolom 8 van de 12 breedte-eenheden van de pagina inneemt (3/4 van de paginabreedte). Op deze manier wordt voor een layout met vijf kolommen van dezelfde breedte wpthemeCol1of5 gebruikt voor alle kolommen.