Een eigen Joomla template maken (11) – een nieuwe header

Joomla 1.5 Templates
Inmiddels zijn we gestart met een nieuwe serie over joomla templates in Joomla 1.5!

In het vorige artikel zijn we geëindigd bij een nieuwe Joomla index met DIV elementen. De laatste website zag er nogal summier uit, maar de contouren waren zichtbaar. We gaan de vormgeving van whelp.nl nu verder over zetten en beginnen met wat er onder de motorkap zit: de header.

Stappenplan voor je nieuwe Joomla template
De beste manier om je nieuwe Joomla template te realiseren is de pagina in stappen op te bouwen:
1) Bedenk hoe je vormgeving eruit moet zien.
2) Maak een raamwerk zonder functionaliteit.
3) Breid het raamwerk uit met Joomla code.
4) Vereenvoudig je PHP code.
5) Bouw het CSS stylesheet verder uit.

1) Bedenk hoe je vormgeving eruit moet zien
Dat is voor nu eenvoudig: het doel is de vormgeving van whelp.nl over te zetten naar Joomla. Als je het moeilijk vindt om een mooie vormgeving te maken, schakel dan een ontwerper in of ga eens kijken op diverse template websites (waarover binnenkort meer).
Mijn vormgeving heb ik gebaseerd op het raamwerk van het 3 Column Relaxation Theme.

2) Maak het raamwerk zònder functionaliteit
Dit helpt je om even los te denken van enige php code. Voordeel daarvan is dat je eenvoudiger kunt schuiven. Werk eventueel met nonsense teksten, zoals Lorem Ipsum. Een nonsense tekst helpt je het woordbeeld van een pagina te zien, zonder je al over de tekst druk te maken.
TIP Ga je ooit een ontwerp presentatie geven aan een klant, gebruik dan altijd nonsense teksten, anders krijg je een discussie over de verkeerde zaken (namelijk de tekst in plaats van het ontwerp).

3) Breid het raamwerk uit met Joomla code: de header
De volgende stap is het raamwerk te vullen met echte content van Joomla. Dit doen we ook in meerdere stappen, we beginnen met de header (alles tot aan de start body tag).

Zie voor meer informatie over deze code mijn toelichting op de header van een Joomla Template.

Toelichting
1) Begin gewoon met alle noodzakelijke Joomla beveiliging en encodings gegevens. Deze haal je uit het template van Madeyourweb.
2) Daarna laat je de mosShowHead(); functie in.
3) Vervolgens roep je twee externe bestanden aan: je stylesheet en je favicon. Het CSS stylesheet plaats je dus in een apart bestand. Dit vereenvoudigt je beheer aanzienlijk en zal je pagina sneller doen laden.
Je favicon roep je ook aan op deze plek. Meestal zie je bij Joomla templates het logo van Joomla (niet erg origineel). Dus met deze simpele actie begint het al goed in de adresbalk. (Hoe maak je een favicon?)

4) Vereenvoudig je PHP code
Zoals je kunt zien in het bovenstaande stukje gebruik je 2x de tekst

Dat kan beter. Vervang deze code door 1 nieuwe variabele: $GLOBALS['templatepath'] en plaats die bovenin je document. Je code komt er nu als volgt uit te zien:

Hoe nu verder?
De volgende stap is ook de body te voorzien van de eigen opmaak: het logo met de omschrijving en het zoekvenster, de navigatie, de content en de twee sidebars. We gaan dan verder met stappen 3-5. Dit alles voor het beoogde eindresultaat!

Stem / Bookmark [?]