Een eigen Joomla template maken (1) – inleiding
Er zijn heel wat kant-en-klare Joomla templates beschikbaar. Maar misschien wil je iets unieks. Dat kan – je kunt namelijk zelf een Joomla template maken. Dit heeft zo zijn voor- en nadelen.
Mijn ervaring tot nu toe
Tot nu toe heb ik 3 Joomla templates gemaakt:
- www.joah.nl (ontworpen door Jof Neuhaus)
- www.plankenkoor.nl (ontworpen door Sjors Wurpel)
- de site van Oostrom Arbeidsconsultancy (zelf ontworpen, maar helaas niet meer online)
Mijn ervaring is dat het te doen is, maar veel werk. Weet dus goed waaraan je begint. Meer hierover in dit artikel.
Wat heb je nodig voor een eigen Joomla template?
1) De juiste software
Het begint met een goed programma om code te maken. Ik zelf gebruik Eclipse. Naar mijn mening het beste open source pakket voor de ontwikkeling van websites! Maar het kan ook met bijvoorbeeld Dreamweaver. Gebruik in ieder geval een programma dat voor je kan controleren of de code die je maakt wel klopt. Eclipse doet dat.
2) Een Joomla test installatie
Download de laatste versie van Joomla en installeer dit op je eigen computer.
3) Een design
Je kunt werken met een bestaand design of zelf een design maken. Houd er rekening mee dat Joomla nogal rechthoekig werkt doordat je je modules in blokken in je pagina plaatst. Juist doordat je modules naast elkaar bestaan leidt dit ertoe dat je mogelijkheden – naar mijn mening – beperkt zijn. Joomla sites lijken hierdoor vaak op elkaar. Dit vind ik zelf een groot nadeel aan Joomla. Als Joomla een betere CSS ondersteuning zou bieden (zoals WordPress) dan zouden we denk ik wat spannender website krijgen – maar dit terzijde.
Welke bestanden zijn onderdeel van een Joomla template?
Als je een Joomla design bekijkt zul je zien dat er een vaste indeling is. Ik neem even het voorbeeld van het standaard template, madeyourweb:
Het gaat om twee folders: CSS en images. Hierin komen je CSS stylesheets en je afbeeldingen. Daarnaast heb je index.html, index.php, templateDetails.xml en optioneel template_thumbnail.png. Het begint bij het xml bestand: templateDetails.xml.
1) Wat doet templateDetails.xml?
Dit bestand beschrijft welke bestanden je gebruikt in je template. Joomla gebruikt dit om – als je je template installeert – te controleren of alle bestanden aanwezig zijn en hoe de bestanden van je template zich tot elkaar verhouden. Meer hierover in het volgende deel van deze serie.
2) Wat doet template_thumbnail.png?
Deze afbeelding laat zien hoe je template eruit als je het zou installeren (je ziet het als je in Joomla met je muis over een template gaat in de Template Manager).
3) Wat doet index.html?
Dit bestand is niet nodig en kan je eventueel weglaten. Je moet het dan ook wel verwijderen uit je templateDetails.xml.
4) Wat doet index.php?
Dit is het belangrijkste bestand: dit regelt dat alle modules die je wilt gebruiken bijelkaar worden gevoegd. Dit wordt (samen met je stylesheets en afbeeldingen) de kern van je ontwerp.
En hoe nu verder?
In het volgende deel van deze serie zal ik de werking van templateDetails.xml toelichten (dat verschijnt op 7 maart).
Artikelenserie - Een Joomla template maken
- Een eigen Joomla template maken (1) – inleiding
- Een eigen Joomla template maken (2) – templateDetails.xml
- Een eigen Joomla template maken (3) – modules en posities
- Een eigen Joomla template maken (4) – rechten, locaties en volgorde
- Een eigen Joomla template maken (5) – de header van index.php
- Een eigen Joomla template maken (6) – de body van index.php
- Een eigen Joomla template maken (7) – de footer van index.php
- Een eigen Joomla template maken (8) – inleiding in CSS
- Een eigen Joomla template maken (9) – basisstructuur
- Een eigen Joomla template maken (10) – een nieuwe index
- Een eigen Joomla template maken (11) – een nieuwe header
- Een eigen Joomla template maken (12) – een nieuwe body met includes
- Een eigen Joomla template maken (13) – logo, omschrijving en zoekveld
- Een eigen Joomla template maken (14) – de navigatie (dl 1)
- Een eigen Joomla template maken (15) – de navigatie (dl 2)
- Een eigen Joomla template maken (16) – de body aanpassen van de homepage
- Een eigen Joomla template maken (17) – de homepage vullen en vormgeven
- Joomla Template (18) – Artikelen toevoegen aan Joomla (1)
- Joomla Template (19) – Artikelen toevoegen aan Joomla (2)
irma
25.06.07 - 14:34
Wat een goede pagina..
Zeer duidelijk en goed te lezen!
Cees
07.08.07 - 11:59
Top uitleg over Joomla templates! Jammer dat deze pagina's niet als PDF zijn te downloaden.
Theo Bakker
07.08.07 - 12:39
Hoi Cees,
dank je wel. Ik zal kijken of PDF toch mogelijk kan maken.
Groet, Theo
Louis
27.08.07 - 13:34
Waar kan ik Eclipse downloaden??
Theo Bakker
27.08.07 - 13:43
Hoi Louis,
op http://www.eclipse.org/. Koop eventueel de MyEclipse omgeving (die is uitgebreider) via http://www.myeclipseide.com/
gerard dijkstra
08.09.07 - 1:02
mooie goede uitleg
bedankt
Jeroen Dekker
10.09.07 - 9:09
Super uitlag,
bedankt!
Jeroen Dekker
21.09.07 - 12:11
uitleg bedoel ik natuurlijk.
ik ben al een aardig eindje op weg met mijn site, hoewel bij vlagen vrij pittig, kom ik er met veel trial en error wel uit.
Super bedankt!
Jochen
25.09.07 - 19:44
Eclipse:
er zijn ontzettend veel versies van Eclipse…
Ik heb uiteindelijk gekozen voor de (gewone) Classic-versie.
Nu blijkt dat je een extra plug-in moet downloaden om (x)html te kunnen bewerken (anders toont hij html-files zoals een browser).
Nu ik ook een goede editor nodig had voor PHP-code kwam ik uit op "EasyEclipse for PHP". En wat blijkt; deze beschikt standaard over de "html-plug-in" en "html-tidy". Bovendien start die ook wat sneller op (heb ik ondervonden).
Een ECHTE aanrader!
Rob Fontaine
28.11.07 - 18:58
Theo,
Bedankt voor je heldere artikelen over het bouwen van Joomla templates. Ben je ook nog van plan om deze beschrijving aan te passen voor Joomla 1.5?
Ik denk dat je hier vele collega's een groot plezier mee doet.
Theo Bakker
28.11.07 - 20:55
Dag Rob,
goed punt. Op dit moment heb ik daar nog niet de tijd voor gehad. Maar ik zal kijken of ik dit in kan plannen.
Groet, Theo
Frits
29.02.08 - 10:54
Ik ben van mening dat het gebruik van joomla templates niet opweegt tegen het bouwen van een eigen CMS + website layout. Het grote nadeel van joomla is dat je bij 50% begint om vervolgens bij 100% uit te komen. Als je zelf gaat ontwikkelen begin je bij 0 en eindig je bij 100% maar dan heb je ook de zekerheid van alle mogelijkheden en is het volledig van en door jou zelf gebouwd.
Gr Frits
Theo Bakker
29.02.08 - 11:09
Dag Frits,
interessante stelling. Ik heb zelf CMS systemen gebouwd en kan je redenering volgen. Toch ben ik het er niet (meer) mee eens. Een paar redenen:
- niet iedereen kan programmeren en weet hoe een CMS zou moeten werken.
- de kennis die alle programmeurs hebben die met elkaar Joomla maken (of willekeurig welk ander product) kan nooit opwegen tegen de kennis van 1 persoon. Uiteindelijk zal Joomla een zeer interessant pakket worden.
Groet, Theo
MicK Bootsman
28.04.08 - 10:20
Wat een leuke website met goede uitleg. Ik ben Joomla! Newbee en weet een klein beetje van php en html. Ik heb zelf altijd eenvoudige websites gemaakt, maar met joomla gaat er een nieuwe wereld voor mij open. Ik hoop toch voor 100% mijn ontwerp in Joomla! (templates) te kunnen krijgen want ik ben vooral ontwerper en in mindere mate programmeur… een interessante puzzel.
Groeten.
MicK
Dylian
03.08.08 - 1:43
Hey, dit is echt perfect!
Heb je tijd gevonden, dit om te zetten naar PDF?
zodat ik dit offline kan leren.
( ik heb tijdelijk geen i-net i.v.m overstappen naar glasvezel )
shan
16.08.08 - 3:38
okay, misschien een beetje offtopic? maar, je opmerking dat alle joomla sites op elkaar lijken… was me uit het hart gegrepen. Jij bent echt de EERSTE die dat aankaart. Zucht… ik dacht dat ik de enige op de hele wereld was die dat vond. Ben ik het echt helemaal mee eens. Joomla is eenheidsworst… of moet ik zeggen: kloontjes-paradijs? Ik denk dat slechts een promillage van de gebruikers zelf een template maakt. Het is allemaal template-template-template wat de klok slaat. If you've seen one Joomla-site, you've seen them all. Ze zijn er zo uit te pikken. Zelfde geldt ook voor Wordpress trouwens. Ziet er Mooi en strak uit allemaal, maar is weinig origineel.
snap daarom echt niet waarom iedereen zo laaiend enthousiast over Joomla is. Ben geen diezaigner (…), verre van, gewoon een hobbyist die via 1001, misschien wel 10.001 tutorials op internet (x)html en CSS heb geleerd. Ik ben een struggler. Vind 't niet makkelijk, maar vind 't wel leuk om te doen.
Joomla werkt als een invuloefening. Je hoeft totaal geen verstand te hebben van codes om toch snel een site het net op te slingeren. Da's dan ook het grote succes denk ik, want een voordeel voor mensen die codes niet willen leren en niet van puzzelen houden (grijns). Enfin… ik ga me buigen over je template tutorial en kijken of ik daarmee Joomla naar MIJN hand kan zetten, en een pagina kan maken, die niet op een joomla-kloon lijkt. Werken je instructies ook voor de nieuwe versie 1.5? of is 't al 1.6. Las net op Joomla.org dat er snel ingegrepen moest worden omdat er security problemen waren… (tja…)
shan
16.08.08 - 5:55
nog eventjes… komt er – binnenkort – toch nog een uitleg voor 1.5 en komt er ook nog een pdf versie van deze tutorial om zelf een template te maken? Zou echt TOP zijn.
Theo Bakker
16.08.08 - 9:47
@Dylian
Hoi Dylian, helaas nog niet…
@Shan
Dank voor je uitgebreide reactie! Ik ben zelf ook geen designer, maar probeer er toch iets mooi van te maken. Dat blijkt vrij lastig te zijn met joomla 1.0.x, maar met de nieuwe versie wordt dat eenvoudiger.
Inmiddels ben ik bezig met een nieuwe serie over Joomla 1.5 (zie http://www.byte.nl). Ik zal dat deze ook publiceren op deze site.
Vriendelijke groet,
Theo
Joomla Templates 1.5 - Wat heb je nodig? (1)
05.10.08 - 11:25
[...] een uitgebreide serie geschreven te hebben over Joomla Templates 1.0.x is het tijd voor een nieuwe serie overr Joomla Templates 1.5! Veel [...]
Een eigen Joomla template maken (2) - templateDetails.xml
06.10.08 - 19:31
[...] het eerste artikel over het maken van een eigen Joomla template heb ik toegelicht welke bestanden onderdeel uitmaken van een Joomla template. In dit tweede artikel [...]
Een eigen Joomla template maken (3) - modules en posities
06.10.08 - 19:32
[...] serie over het maken van een Joomla template heb ik twee onderwerpen toegelicht: ik heb uitgelegd welke bestanden onderdeel zijn van een Joomla template en wat het bestand templateDetails.xml doet. In dit artikel licht ik toe wat modules en posities [...]
Hoe maak je zelf een Joomla! template? | WeGoPro.com
04.12.08 - 11:08
[...] heb een mooie uitleg gevonden hoe je het beste een Joomla! thema kunt maken. In een flink aantal helder beschreven stappen neemt de auteur je aan het handje om zo [...]
JJ
26.01.09 - 16:08
Joomla vindt ik zo vreselijk ontwikkelen. De eerder genoemde modules zijn een hel. Ook is het zo dat alles op elkaar lijkt en een echt mooie – maar met ingewikkelde code gebouwde – website valt er niet uit te krijgen jammergenoeg. Want voor de rest is het een aardig CMS! WordPress (om er toch maar over te beginnen) vindt ik qua programmeren fijner, maar dan heb je meer een 'weblog' terwijl Joomla ook andere mogelijkheden heeft. Al met al: ik houd het toch maar op zelf steeds mijn pagina's aanpassen, voor een mooie site heb ik wel wat over.
R.de.A
15.06.09 - 6:59
Momenteel heb ik met behulp van Lightroom en Dreamweaver templates zelf een begin gemaakt van een eigen website. Mijn doel is foto albums te presenteren, waarbij men ook op de foto's kan reageren en waarbij je gemakkelijk van de ene foto naar de volgende gaat. De site van http://www.joah.nl biedt precies wat ik in dat opzicht zoek. Met joomla heb ik nog totaal geen ervaring, maar mijn vermoeden is dat je er niet standaard van dit soort albums met een navigatiestructuur per illustratie kunt maken. Ik ben heel benieuwd hoe je hier te werk bent gegaan!
Albert
25.07.09 - 18:44
Hallo,
Ik ben me nog aan het orienteren in de mogelijkheden van Joomla! Waarbij ik mij afvraag of het mogelijk is afbeeldingen als achtergrond te gebruiken, waarbij de tekst erover heen geplaatst kan worden?(transparant)
(Misschien een domme vraag:( ?)
Marc
06.08.09 - 11:49
Hallo! Ik heb een pdf-versie gemaakt van het hele verhaal (excl comments etc). Is hier belangstelling voor en zo ja, hoe/waar voeg ik hem toe?
Dag 4 « Sabine@stage
03.09.09 - 13:56
[...] handige link die ik wil onthouden: http://www.whelp.nl/een-eigen-joomla-template-maken-1/ [...]
stef
28.11.09 - 21:19
Goede website voor de beginnende Joomla'er.
Jacques
26.01.10 - 16:58
Daar ik een hardstikke newbie ben en nog pas met Joomla ben begonnen, een vraag over Deel1. Online Joomla installeren ging bijna als vanzelf, maar nu wil ik me ook gooien op het maken van een template en daarvoor wordt aanbevolen Joomla op je pc te installeren. Daar begint het voor mij onduidelijk te worden. Ik heb Joomla 1.5 (zip) gedownload klaarstaan, maar hoe nu te installeren op je pc? Al al rond-ge-Googled maar daar heb ik nog geen antwoord op gevonden. Een van jullie die dat weet?
Jacques
Muammer
09.03.10 - 21:51
Ey Theo,
Bedankt voor de uitleg. Alleen ik had iets makkelijker verwacht van Joomla zelf.. Je moet nogal veel stappen doen en met veel dingen rekening mee houden.. Ik weet niet of ik ga uitkomen :P