Dag 8: Design omzetten naar Joomla! template

 Afdrukken

Gisteren hebben we voorbereidingen getroffen voor het maken van onze Joomla! template. Vandaag gaan we de template maken op basis van het design dat we hebben gemaakt op dag 6. We laten zien hoe de structuur van een template is opgemaakt en hoe we de HTML gaan opmaken.

We hebben een standaardtemplate voorbereid om het wat makkelijker te maken vandaag: Download de standaard template.

Voordat we beginnen met het maken van onze HTML, bekijken we de structuur die een template van Joomla! heeft. Op het onderstaande plaatje is de meest simpele versie van een Joomla! template te zien.

template-structuur

Een Joomla!-template bestaat in de kern uit de volgende bestanden:

  • index.php: in dit bestand gaan we de HTML toevoegen
  • templateDetails.xml: dit bestand bevat meta data over de template.
  • template.css: een standaard CSS bestand. De naam van dit bestand is niet verplicht.

templateDetails.xml
De kern van de template wordt beschreven in het bestand 'templateDetails.xml'. Dit bestand bevat informatie over de template, zoals auteur en copyright, en welke bestanden er in de template zitten. In ons geval ziet templateDetails.xml er als volgt uit:

Het bestand begint met een aantal benodigdheden voor Joomla!, waarna we informatie over de template en de maker kunnen invullen. Vervolgens vullen we tussen <files></files> de bestanden in die we in onze template gebruiken.

De HTML
Gisteren hebben we de verschillende jdoc statements bekeken. Vandaag gaan we ze in de HTML zetten. De volgende drie jdoc statements gaan we gebruiken: head, modules en component. De HTML template van Joomla! komt in index.php en is een normale HTML-pagina, verweven met jdoc statements. Voordat we de HTML gaan invoeren, bekijken we eerst nogmaals het ontwerp en bepalen we de structuur van de HTML.

html layout

Nu we de structuur hebben bepaald, kunnen we de HTML gaan schrijven.

Let op: wegens technische redenen zitten in bovenstaande code twee fouten. De eerste is een dubbele </head> tag. De tweede is de spatie bij het begin van elk jdoc statement. Beide zijn in de werkelijke template niet aanwezig.

Als we de HTML nader bekijken vallen een aantal dingen op. Ten eerste de <head> sectie. Hierin wordt met een jdoc statement de meta-informatie van de website geladen. Daarna laden we de twee CSS stylesheets die we willen gebruiken. Hiervoor gebruiken we een stuk PHP-code om de juiste template te laden. In $this->template wordt de naam van de huidige template opgeslagen. Mocht de naam van de template ooit nog veranderen, dan verandert het in onze template automatisch mee.

Een tweede ding dat opvalt is dat we voor het gehele linkergedeelte en voor de top-bar maar één jdoc statement gebruiken. Dit doen we zodat die gedeeltes flexibel kunnen worden aangepast. Buiten de modules die we in het ontwerp hebben opgenomen, kunnen we later nog andere modules op dezelfde positie toevoegen. Op die manier kun je zonder veel werk elementen, bijvoorbeeld een poll, toevoegen aan de website.

Als laatste moeten we de namen die we hebben gegeven aan de module jdoc statements onthouden. Later gaan we in Joomla! namelijk deze modules toewijzen aan een positie. Zo zal 'Laatste nieuws' de module positie left meekrijgen. Op die manier weet Joomla! welke module op welke plek moet komen.

De CSS
De laatste stap is om de CSS te maken voor de HTML die we zojuist hebben geschreven. We gaan niet in op de hele template, maar laten wel zien hoe we bepaalde modules kunnen stylen. In onze HTML hebben we de module jdoc statements de style 'xhtml' meegegeven. Hierdoor krijgen de modules een bepaalde class mee. Hiermee kunnen we gerichter CSS schrijven. Hieronder hebben we bijvoorbeeld een stukje CSS geschreven voor het 'Laatste nieuws'-blok in het ontwerp.

Joomla! genereert de .moduletable class voor alle modules die de style 'xhtml' hebben meegekregen. Wanneer je met CSS bezig bent, is het nog belangrijk om te weten welke CSS classes door Joomla! worden gegenereerd. In het maken van de template houden we rekening met deze classes, zodat wanneer we de content gaan invoeren de opmaak direct goed staat.

Een extra toevoeging die wij altijd doen aan onze templates is reset.css. In dit bestand zetten wij de reset stylesheet van Eric Meyer. Deze stylesheet zorgt er voor dat alle HTML-elementen worden gereset, zodat ze in alle browsers (zelfs IE) nagenoeg gelijk staan. Hiermee voorkomen we de meeste problemen die ontstaan tussen browsers bij het maken van CSS.

Samenvatting
Vandaag hebben we de structuur van een template bekeken en besproken wat de verschillende bestanden zijn. Daarna zijn we aan de slag gegaan met het maken van onze eigen template. Hiervoor hebben we eerst een structuur gemaakt aan de hand van het ontwerp. Daarna hebben we dit omgezet in een HTML-template met daarin jdoc statements. Nu we onze template klaar hebben, kunnen we aan de slag met de content.

Voor meer informatie over het maken van templates met Joomla! raden wij aan de officiële Joomla! documentatie te bekijken. Voor meer informatie in het Nederlands over het maken van templates (met name CSS) raden wij de documentatie op Joomlacommunity.eu aan.
Commentaar (14)Add Comment
Jeroen de Gouw
december 09, 2008
92.66.177.106
...

Mooi werk, bedankt ga het zeker volgen

Arthur Peters
februari 01, 2009
82.169.151.160
...

Wat een goede heldere uitleg. Echt super zo'n Nederlandstalige handleiding Hulde aan de makers...

leon
november 04, 2009
84.25.118.205
...

Wat ik niet begrijp is hoe joomla weet waar "left"is... ik zie het nergens of kijk ik erover heen?

Robert Roose
november 04, 2009
78.27.23.23
...

Leon, dit kun je aanpassen in de backend van Joomla. Hier kun je bij de Module Manager aangeven op welke positie een module geladen moet worden.

Sander
november 12, 2009
94.209.12.129
...

echt super dit

Xander
december 19, 2009
81.19.35.227
...

Tot nu toe is het me een beetje duidelijk maar ik kan helaas de standaard template niet openen. Ik krijg de volgende melding ; XML Parsing Error at 1:0. Error 4: not well-formed (invalid token)
Iemand een suggestie ?

Groetjes

André
januari 24, 2010
77.251.50.101
...

Wederom: een heel goed document, maar... helaas is voorkennis html wel vereist ...

Hebben jullie misschien tips voor websites als je helemaal from 'scratch' moet beginnen. Ben nu boekhouder (serieus), maar zit serieus te denken aan een carrièreswitch ...

Bij voorbaat dank,
André

Robert Roose
januari 26, 2010
78.27.23.23
...

Een basis kennis van HTML en CSS is vereist om een (goede) Joomla website te maken van 'scratch'. Ik zou je daarom ook adviseren om ergens een boek te kopen over HTML en CSS en er een paar avonden voor te gaan zitten. Zonder deze kennis is het niet te doen.

Leek
mei 19, 2010
213.93.79.41
...

Of gebruik artisteer, andre!

Roland
juli 27, 2010
83.83.135.38
...

Beste lezer,
in de tekst staat "Een tweede ding dat opvalt is dat we voor het gehele linkergedeelte en voor de top-bar maar één jdoc statement gebruiken". Echter, dit lijkt niet alleen te gelden voor het linkergedeelte en de top-bar, maar ook voor bv top-menu. Lees ik misschien ergens overheen ?
Met vriendelijke groet, Roland.

Robert Roose
augustus 02, 2010
84.27.117.134
...

Hoi Ronald,
Dat klopt dat staat niet echt handig opgeschreven.

Frank
september 27, 2010
204.104.55.242
...

Goede site over HTML en CSS:
http://www.handleidinghtml.nl/

Sara
oktober 02, 2010
77.251.50.199
...

Is bovenstaand ook allemaal nodig wanneer je een template uit Artisteer exporteert? Moet je dan ook al die html invoeren?

Robert Roose
oktober 04, 2010
84.27.216.249
...

Hoi Sara,

Ik heb geen ervaring met Artiseer. Ik zou dus ook niet weten wat Artiseer voor een output genereert.

Schrijf commentaar
 
  kleiner | groter
 

busy