WordPress is heel makkelijk aan te passen als je eenmaal gebruik maakt van de kracht van de “themes”. Een hele set van html pagina’s en style sheet opmaak vervang je met een enkele muisklik door een andere set terwijl de content op de webpagina hetzelfde blijft. Er zijn dan ook al veel thema’s al beschikbaar voor WordPress, de ?©?©n nog beter dan de ander.
Voor mijn eigen weblog gebruik ik een theme (Hemingway), maar deze heb ik nog wel behoorlijk aangepast. Het aanpassen van de style sheets die bij het Hemingway thema zaten heb ik gedaan met CSSEdit 2.0, van Jan van Borghout, voor de Mac. Dit was het eerste project waarbij ik met deze applicatie werkte. In eerste instantie maakte ik gebruik van de demo (tot 2500 karakters per style sheet), maar vroeg in het proces heb ik hem ook gekocht ($36 incl. BTW).
CSSEdit heeft twee soorten schermen. Allereerst is er het ‘gewone’ scherm waarin je je style sheet kunt bekijken met gekleurde opmaak. In dit scherm is alles gedaan om het werken met style sheets zo makkelijk mogelijk te maken. Zo worden automatisch, met behulp van ‘code sense’, de mogelijkheden weergegeven als je een stukje van een tag intikt. Bijvoorbeeld “font-” geeft automatisch de mogelijkheden ‘family’, ‘size-adjust’, ‘stretch’, ‘style’, ‘variant’ en ‘weight’ weer. Vervolgens worden soms na de “:” ook de mogelijkheden getoond, maar hiervoor moet je eerst de eerste letter intikken. “font-weight: b” geeft dan de opties “bold” en “bolder”. Jammer genoeg zie je niet de andere mogelijkheden zoals ‘lighter’, ‘normal’, ‘inherit’ in hetzelfde overzicht, wellicht in een volgende versie?

Andere functionaliteit is het indelen van tags in groepen, het toevoegen van comments vanuit de interface en het snel filteren op tags. Ook kun je style sheets opslaan als ‘milestone’ zodat je afgeronde onderdelen niet kunt slopen met latere experimenten zonder terug te gaan naar een oudere versie. Ook kun je de style sheet valideren en heeft CSSEdit een compleet menu waarbij je enkel door te klikken complete tags in elkaar kunt klussen.
Het mooie van CSSEdit is dat je je website kunt weergeven in een “Live Web Preview” (maakt gebruik van Apple’s web kit, dus ziet er hetzelfde uit als in Safari) waarmee je tijdens de ontwikkeling kunt beoordelen of je style sheet er uit ziet zoals je had bedoeld (natuurlijk moet je de site nog steeds wel op andere sites en platformen bekijken). Mochten er aanpassingen nodig zijn, dan kun je de op de website gebruikte style sheets virtueel overschrijven met een style sheet dat lokaal staat. Hierdoor kun je dingen uitproberen in de lay-out zonder dat de bezoekers van de site hier last van hebben of dat je trucs moet uithalen om de site ook lokaal (zie tip helemaal onderaan deze review) aan te kunnen passen en te controleren.

Ook handig in de Live Preview is dat je met de X-ray functie je style sheet kunt ontdoen van problemen. Je kijkt in de lay-out of alles er uit ziet zoals je had verwacht en kunt met de muis op de verschillende onderdelen drukken en kijken hoe ze in de style sheet heten. Hierdoor kun je heel snel naar de goede regel springen om een aanpassing te maken. De Live Preview is trouwens ook erg handig om iemand anders site te bekijken en te zien hoe hij/zij iets heeft bereikt in een style sheet ;)
Ok, best wel wat van de functionaliteit zit ook in de Firefox developer toolbar, maar CSSEdit werkt toch zeker sneller en lekkerder. Vooral ook door de code sense suggesties die worden gedaan om de regel aan te vullen. Met CSSEdit kan ik veel sneller het probleem ontdekken en oplossingen uitproberen zonder de webpagina op de site zelf te slopen. Terwijl ik wel met de content van de webpagina kan spelen. Daarnaast ziet de applicatie er ook nog eens lekker Mac OS X uit.
Mocht je nu niet met CSSEdit aan de slag willen/kunnen op je Mac, maar je wilt wel graag je weblog ‘offline’ draaien om te ontwikkelen, dan is MAMP wellicht wel iets voor je. MAMP (Mac, Apache, MySQL en PHP) is een volledig werkende webserver met alles voorgeconfigureerd. Even installeren, de bijgeleverde “widgets” (voor het starten en stoppen van de server) naar je “dashboard” slepen en vervolgens ben je klaar om WordPress 2.0, Movable Type, etc. te installeren in de nieuw beschikbaar gekomen “htdocs” map. Via http://localhost:8888/ is het weblog vervolgens beschikbaar. Ideaal.

Pingback: Stap van desktop naar web is weer wat kleiner | Information Engineer in het Wild