13.07.10 | Eindeloze mogelijkheden met dynamische stylesheets

Wanneer Insyde websites programmeert, zal de CSS code in een van de eerste stappen gemaakt worden. Hierdoor wordt een saaie HTML-pagina voorzien van opmaak, kleur en layout.

Maar wat als de klant een website wil, waarbij deze in ons CMS kan instellen welk kleurenschema deze website zal krijgen? Bij twee voorgedefinieerde schema's is dit prima statisch te doen, maar bij veel schema's, of wanneer de klant zelf schema's kan maken, is het nodig dat je stylesheets dynamisch zijn.

Daarom leg ik in dit weblog uit hoe je dit voor elkaar kunt krijgen.

Normaal gesproken wordt er gebruik gemaakt van een losse stylesheet, die in de van de template gelinkt wordt door middel van deze regel:

In styles.css staat alle opmaak voor de pagina. Bijvoorbeeld dat de body een rode achtergrondkleur moet krijgen:

Als je nu een blauw kleurenschema wilt toepassen, zou je de body dynamisch de klasse "blauw" kunnen geven en met de volgende css code de achtergrondkleur blauw maken. Een element met klasse is namelijk een sterkere selector dan een element zonder.

Met veel kleurenschema's kan deze wildgroei aan CSS code behoorlijk uit de hand lopen en wanneer de klant zelf te alle tijden mag bepalen welke kleuren in het schema zitten, ben je verplicht om je CSS code dynamisch te maken.

Stylesheets transformeren naar php

Gelukkig kunnen we er redelijk eenvoudig voor zorgen dat de stylesheet met php te 'besturen' is. Eerst maken we in de html template een verwijzing naar onze dynamische stylesheet. Welk kleurenschema gebruikt wordt (in dit geval blauw), kan natuurlijk bepaald worden vanuit het CMS.

Vervolgens maken we de stylesheet (styles.php) dynamisch door de volgende code er in te plaatsen:

Nu zijn de kleurenschema wel statisch genoteerd, namelijk een rood en een blauw kleurenschema met elk maar één kleur, maar het mag voor zich spreken dat  de mogelijkheden eindeloos zijn, wanneer je gebruik kunt maken van variabelen in de stylesheets.

Zeker in combinatie met ons CMS, de Webmagiër, biedt dit veel mogelijkheden, omdat klanten nu zelf live invloed kunnen uitoefenen op bepaalde opmaakgerelateerde zaken op hun website.

Reageer

Laat zien wie je bent met een Gravatar. Hiervoor dien je wel je e-mail adres in te voeren, deze zal echter nooit getoond worden. HTML is niet toegestaan. Een URL in je reactie toevoegen werkt wel.