Nu we de includes zo goed als geregeld hebben, gaan we de randen van de onderdelen aanpassen. Net als in het rhuk_milkyway template gaan we de randen opbouwen met CSS (in plaats van tabellen). We gebruiken hiervoor dezelfde techniek als in het rhuk_milkyway template, namelijke vier geneste divs met elk een eigen achtergrond.

De voorbereiding
Voordat we de CSS bestanden gaan aanpassen maken we twee nieuwe afbeeldingen die we gebruiken voor de randen: één met een bruine achtergrond (voor het menu) en één met een witte achtergrond (voor de teksten). Een gemakkelijk pakket voor het maken van dit soort afbeeldingen is bijvoorbeeld Adobe Illustrator of Adobe FireWorks. Het voordeel van deze pakketten is dat je en vectorafbeelding maakt en die makkelijk kunt schalen.
1) We stellen in dat de achtergrond kleur de gele kleur krijgt van de achtergrond van de pagina (de nerf). De techniek van het rhuk_milkyway template werkt namelijk niet met transparante hoeken.
2) De hoogte en breedte van de afbeeldingen zijn afhankelijk van het hoogste en breedste element in je pagina. Dat is eigenlijk wel een nadeel aan deze techniek (en maakt het minder geschikt voor heel lange pagina’s).
3) De hoeken kan je vrij gemakkelijk ronder maken. De dikte wordt 2px, de kleur bruin. Wil je weten welke kleur je nodig hebt vanuit je browser? Installeer dan bijvoorbeeld de ColorZilla plugin in FireFox
4) Als de afbeeldingen klaar zijn kunnen we ze gemakkelijk slicen in Adobe ImageReady of Photoshop. Maak twee ‘guides’ in het plaatje. Deze twee guides stellen we zo in dat het kruispunt zit in de linkerbovenhoek. Klik daarna op ‘Slices from Guides’. Je hebt nu één afbeelding met vier slices.
5) Nu exporteren we het resultaat als een png. Je kunt daarbij aangeven dat het bewaarde resultaat meteen verdeeld moeten worden volgens de slices. Deze krijgen dan de nummers 01, 02, 03 en 04. Voor het gemak noem ik ze even net als de afbeeldingen van het rhuk_milkyway template: mw_box.
6) Nu de afbeeldingen klaar zijn maak ik twee nieuwe mapjes aan in het plankenkoor template: images/white en images/brown. Hierin komen de plaatjes met de witte achtergrond en de plaatjes met de bruine achtergrond.
De voorbereiding is nu klaar.

Het template nog één keer langslopen
Het is goed nog even te kijken of het template wel overal voldoet. Dit kan je makkelijk controleren door even onder water te kijken met Firebug. Dan valt op dat het content gedeelte nog niet is zoals we willen: de inhoud van de pagina die standaard wordt gegenereerd heeft geen DIVs.
Ik kon in de instellingen niet achterhalen hoe dit via de backend opgelost kon worden (wie het weet mag het zeggen), dus heb ik het opgelost door ze er handmatig om te zetten: