Nu je weet hoe je een logo, navigatie, zoekveld en kruimelpad in een Joomla Template kan plaatsen, stappen we door naar het middelste deel van de body. Hier staat in het rhuk_milkyway template de echte inhoud van je website: een tweede menu, een inlogformulier voor leden, het laatste nieuws, populaire artikelen, en nog een paar interactieve modules. Heel wat code. We kijken in dit artikel naar de basisopzet en de linkerkolom.
Een frisse start
Het begint met een simpel stukje code dat ervoor zorgt dat je - bij wijze van spreken - het ontwerp weer even reset.
Dit heb ik al eerder besproken: de .clr class zorgt ervoor dat de div’s die volgen weer vanaf de linkerkant worden opgebouwd. Dit principe zullen we nog vaker gaan zien.
Het raamwerk
Vervolgens wordt de whitebox opgebouwd. Dit onderdeel bevat drie delen:
1) Een bovenkant (whitebox_t - top)
2) Een midden-gedeelte (whitebox_m - middle)
3) Een onderkant (whitebox_b - bottom)
In het raam wordt dezelfde truc toegepast als in het vorige artikel: geneste div’s om de bovenkant, de linkerhoek en de rechterhoek op te bouwen. Het ziet er omslachtig uit, maar garandeert dat bij het verkleinen of vergroten van de pagina het raamwerk vanzelf groter of kleiner wordt. Zie template.css regels 182-219 om te zien hoe dit via het stylesheet geregeld wordt.
Linkerkolom (menu) en hoofdkolom
Binnen de whitebox_m bevindt zich een blok (area) met daarin de linkerkolom en hoofdkolom met de tekstuele inhoud van de pagina. Voor het gemak laat ik het hier zien zonder de inhoud van de hoofdkolom:
1) Een bericht
Het blok begint met een jdoc:include van eventuele berichten. Stel dat iemand via je online enquête module een stem uitbrengt, dan zie je een bericht verschijnen op die plek.
2) Wel of geen linkerkolom?
Vervolgens wordt er in het template gekeken of er wel of geen linkerkolom opgebouwd moet worden. Dit gebeurt met PHP code (if, else, endif). Zo ja, dan wordt die ingesloten en wordt de hoofdkolom smal gehouden (en krijgt het id maincolumn). Zo nee, dan blijft de linkerkolom leeg en wordt de hoofdkolom breed van opzet (en krijgt het id maincolumn_full).
Het controleren van de aanwezigheid van een module kan je doen met behulp van de functie $this->countModules(). Aan deze functie geef je 1 waarde mee, nl de naam van de positie waar de modules moeten komen. In deze code kijken we of op de positie ‘left’ modules moeten komen. Via de module manager zien we dat dit er maar liefst 6 zijn:
3) Wat komt er in de linkerkolom?
1) Het Main Menu bevat het hoofdmenu van je website (naast de navigatie bovenin). Ik heb dit altijd wat onlogisch gevonden, maar goed.
2) De Resources bevat een lijstje van verwijzigingen naar online hulpmiddelen. Mijn advies is deze module gewoon uit te zetten, of alleen toegankelijk te maken voor zeer bijzondere gebruikers.
3) De Key Concepts bevat een aantal links naar belangrijke pagina’s. Hier geldt min of meer hetzelfde voor. Je zou het kunnen gebruiken om pagina’s die je extra onder de aandacht wilt brengen te noemen.
4) Het User Menu is een menu dat je pas ziet als je bent ingelogd: het is alleen toegankelijk voor de groep Registered users. Handig voor community websites. Ben je niet van plan dit te gaan gebruiken, zet het dan ook uit.
5) De Example Pages zul je niet snel zien, tenzij je het even activeert voor de home-page. Ook hiervoor geldt: zet het gewoon uit tenzij je met overzichtspagina’s gaat werken.
6) Het Login Form tot slot heb je ook nodig als je een community website start. Hiermee kunnen bezoekers inloggen, wachtwoorden opvragen of een nieuw gebruikersaccount aanvragen.
Voor al deze modules geldt dat je via de module manager de inhoud ervan naar je hand kunt zetten.
4) Modules insluiten in de linkerkolom
De modules zelf sluit je weer eenvoudig in met een jdoc:include. Door bij de name ‘left’ op te geven haal je alle modules op die op die positie zijn gezet. Nieuw is hier de stijl die je eraan meegeeft: rounded. Die zorgt ervoor dat elke module een eigen rand kan krijgen door vier geneste div’s. Vergeleken met Joomla 1.0 is dit een hele verbetering!
5) De opbouw van een module in de linkerkolom
Vrijwel elke module (behalve het inlogformulier) in de linkerkolom is als volgt opgebouwd:
Main Menu
</div> </div> </div> </div>Dit levert het volgende resultaat:
In blue.css kun je op regels 27 e.v. zien hoe hiermee het kader van dit element is opgebouwd. De nummers komen overeen met het plaatje hierboven (deze staan niet in de code zelf):
De truc voor de posities zit hem in het nesten van de divs, het inladen van achtergrondafbeeldingen en in de procenten:
1) 100% x 100% betekent rechtsonder (nl 100% in de breedte en 100% in de hoogte),
2) 0% x 100% linksonder etc.
De plaatjes aan de onderkant zijn heel lang, zodat ook bij een lang menu je ze goed blijft zien.
Tip: gebruik de Module Class Suffix
Stel dat je het inlogformulier ook zo’n rand wilt meegeven, vul dan via de Module Manager bij het Login Form ‘_menu’ in in het veld Module Class Suffix. Dit wordt dan achter de naam van de class gezet (en wordt daarmee gelijk aan de overige modules: ‘module_menu’)!
Hoe nu verder?
Een heel verhaal… maar belangrijk is dat we hier nu voor het eerst hebben gezien hoe een volledig kader wordt opgebouwd met behulp van de stijl ’rounded’. Dit kan je als ontwerper overal toepassen. Hiermee wordt Joomla 1.5 een stuk beter te beinvloeden dan Joomla 1.0.
In het volgende artikel gaan we verder met de ‘maincolumn’ en maken we kennis met de stijl ‘XHTML’.