CSS uitdagingen bij DotCMS

Ik heb al een aantal keren wat verteld over de mogelijkheden van DotCMS, maar ik heb nog niets verteld over de interessante uitdagingen die erbij komen kijken om het gebruiksvriendelijk te houden. Het is niet zo moeilijk om een pagina (template) te definiëren waar je content in kan plaatsen, maar hoe zorg je ervoor dat de klant in zijn WYSIWYG editor ook meteen krijgt te zien wat er op de website komt te staan? En hoe ver moet je gaan om dat zo echt mogelijk te laten lijken? Daar ga ik het over hebben.



DotCMS maakt gebruik van TinyMCE, een gratis open-source WYSIWYG editor. In deze editor komt in standaard HTML te staan hoe de opmaak eruit zou kunnen komen te zien, maar in de praktijk is dat altijd anders. Nu kun je aan de WYSIWYG editor wel een stylesheet koppelen (per website), maar dan ben je er nog niet. Want de WYSIWYG editor weet niet in welke div je bezig bent, dus klopt het nog niet allemaal. Hoe kun je dit nu netjes oplossen?

Het antwoord is: "Dat ligt eraan...". Als je maar 1 soort content hebt op 1 plaats in een pagina (bijvoorbeeld in de div 'container'), dan kun je overal waar iets staat zoals '#container p {}' vervangen door 'p {}'. Dit werkt! Of je maakt gebruik van de class 'mceContentBody' die de WYSIWYG editor gebruikt (maar dan moet je vanalles 2x definieren, daar word je ook niet vrolijk van). Maar, stel je hebt 2 verschillend gekleurde templates met dezelfde content, of je hebt 1 template met daarin witte content en een grijze banner content, dan heb je een probleem.


Dus de vraag is eigenlijk: hoe ver wil je gaan om alles in de WYSIWYG editor precies zo te krijgen als in het echt? Ik zou zeggen: niet heel ver. Je kan niet rekening houden met alles. Wat je wel kan doen is standaard fonts definieren die in 90% van de gevallen worden gebruikt (h1, h2, p, a). Maar zelfs dat zou ik niet zo snel doen. Wat ik wel zou doen is speciale classes definieren. Bijvoorbeeld speciale classes voor tabellen, speciale a classes en speciale inputs. Dat een H1 net een andere kleur heeft is niet zo erg, maar je wil wel zien dat je link met class='fancybutton' een fancy knop weergeeft ipv een blauw tekstje.

Dit soort afwegingen en het spelen met de CSS maken het werken met DotCMS wel leuk en interessant. Bij veel css zaken moet je je afvragen hoe je het definieert en wat de gevolgen zijn voor de pagina's, de edit mode (daar heb ik het nog nieteens over gehad!) en de WYSIWYG editor. En hoe maak je het zo makkelijk mogelijk voor de klant om daarna zelf zijn pagina's op te maken in de, toch beperkte, WYSIWYG editor. Ik kan er nog wel aardig wat bladzijden over voltypen maar ik ga weer even verder met mijn CSS issues bij Lasercards in DotCMS :)