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.

We naderen het eind van de upgrade van het Plankenkoor template. Het stramien van de pagina is nu in DIVs opgebouwd; nu is het tijd om ook de stukjes code die we voorheen nog insloten met een include op een Joomla manier in te sluiten. Ook beginnen we ermee de randen van deze onderdelen op een nieuwe CSS manier op te bouwen.

Terug naar jdoc:include
De manier om in Joomla een module in te sluiten is met jdoc:include.

In dit voorbeeld uit het Beez template worden de modules user3 en user4 ingesloten. In het Plankenkoor template maken we hier nog geen gebruik van:

Zoals je kunt zien gebruiken we include_one om twee aparte bestand in te sluiten, _sidenavigation.php en _contact.php. Het werkt, maar het is geen Joomla 1.5 methodiek. Ook in de rest van de pagina staan zulke includes.

Gebruik van jdoc:includes met stijl rounded
We gaan de includes vervangen door jdoc:includes. Daarbij geven we aan dat de style gelijk is aan 'rounded'.

Het effect hiervan is dat er vier geneste DIVs om de inhoud van het menu en het inlogelement van Community Builder worden gezet. Die DIVs hebben we nodig om zo direct weer de randen te kunnen maken. De pagina verliest nu tijdelijk de opmaak, want we zullen het stylesheet moeten aanpassen aan de nieuwe situatie.

Een nieuwe module maken voor de contactgegevens
De contactgegevens zijn verdwenen. Logisch, want die waren niet gemaakt via de beheeromgeving van Joomla, maar stonden 'hard' in het bestandje dat we insloten. Een nieuwe module kan je gemakkelijk maken via Extensies > Module beheer. Klik daar op 'Nieuw'.

Aangezien we een statische tekst gaan maken met de contactgegevens, kies ik hier voor de eerste optie: Aangepast HTML-module. Ik stel hier een paar dingen in:
1) de titel en dat deze getoond moet worden,
2) dat deze module op de positie left zit (bij het menu) en
3) een plek in de volgorde.
4) bij de Module class achtervoegsel vul ik een spatie in en dan de classenaam 'contact'. Het voordeel hiervan is dat ik zo beschikking heb over de standaard classe 'module' en mijn eigen class 'contact'. Dit scheelt later complexiteit in het CSS stylesheet.
5) Onderin geef ik nu de tekst op die ik al had.
Het effect van deze actie is:

Het instellen van andere module en overige includes
Op dezelfde manier kan je alle andere includes vervangen door jdoc:includes en er de juiste stijl aan meegeven.

Hoe nu verder?
Het enige wat we nu nog moeten doen is de vormgeving van de elementen weer terugkrijgen. Hierover meer in het volgende artikel in deze serie.

Nu we het Plankenkoor template hebben omgezet naar DIVs moeten we het stylesheet nog zo aanpassen, dat de elementen ook goed ten opzichte van elkaar gepositioneerd worden. Ze staan nu nog onder elkaar. Een onmisbare plugin bij zo'n karwei is Firebug voor Firefox. Daarmee kan je heel eenvoudig bestaande stijlen bekijken en een beetje aanpassen. Als je tevreden bent dan sla je het op in je echte stylesheet.

De header aanpassen
We beginnen door de stylesheets van het beez templates in te sluiten. Pas daarvoor de header aan.

Er zijn vier stylesheets bijgekomen: 1) template.css, 2) position.css, 3) ieonly.css en 4) ie7only.css. Position.css bepaalt de positie van de verschillende divs op het scherm; ieonly.css en ie7only.css zijn 'patches' voor Internet Explorer. Door de notaties [if lte IE 6] en [if IE 7] worden deze stylesheets alleen ingesloten als aan deze voorwaarden wordt voldaan. (De term 'lte' staat voor lesser then or equal, dus als iets versie IE 6 is of lager.)

Bedankt voor je bezoek aan mijn weblog. Een bijzonder moment, want dit is namelijk een jubileum artikel: mijn 300ste! In de loop van de afgelopen jaren heb ik over allerlei onderwerpen geschreven. Van lieverlee kwam daar een aantal hoofdthema's uit boven drijven (tot mijn eigen verrassing). Aan al mijn bezoekers: dank voor jullie interesse! Dit jubileum artikel gaat over Wordle. Een leuke website waarmee je van je site een woordpatroon kan maken.

Tagclouds maken met Wordle
Hierboven zie je wat Wordle maakt van mijn website. Het is heel eenvoudig. Ga naar Wordle, geef daar je eigen website op en – als deze een feed heeft – dan maakt Wordle er een schitterende afbeelding van. Met het menu kan je je eigen kleurstijlen erop los laten en verschillende opzetjes uitproberen. Heb je geen RSS feed? Kopieer dan gewoon de tekst van je homepage naar Wordle. Het aardige is dat je zo ook kunt zien welke woorden je vaak gebruikt (en misschien wel te vaak).

In het vorige artikel hebben we de header en de footer van het Plankenkoor template aangepast. We kijken nu naar de body. We gaan dit omzetten naar template dat klaar is voor Joomla 1.5 en beter met CSS bestuurd kan worden. Veel code in dit artikel, maar dit komt ten goede aan de overzichtelijkheid.

De basisopzet van het template
De indeling van de body is grofweg alsvolgt:
1) een allesomvattende tabel (een raamwerk met een linkerzijkant, het midden, en de rechterzijkant)
2) het logo
3) de bovennavigatie
4) de zijbalk met navigatie en contactgegevens
5) de hoofdinhoud met
a) een deel voor speciale berichten (bovenaan) – nieuwsflitsen
b) de gewone berichten (daaronder)
6) en tot slot code om statistieken te kunnen volgen
Dit ziet er dan als volgt uit:

Het raamwerk
Groot nadeel van het gebruik van een tabel is dat je er maar weinig aan kunt aanpassen. Daar komt bij dat een tabel eerst helemaal moet worden ingeladen, voordat deze getoond wordt. Als je gebruik maakt van div's kan het goed stijlen met CSS en zal de pagina beter inladen. Zoals je ziet heb ik in het template heel wat extra's moeten gebruiken om de juist witmarges te krijgen. Dit kan veel beter.