Dag 14: Templates installeren

Een template bepaalt het uiterlijk van een website, zoals de kleuren en de lettertypen, maar ook de layout zoals de posities van content en modules. Tot nu toe hebben we telkens met het standaard Joomla template gewerkt. Vandaag gaan we een ander template installeren om onze website een meer unieke uitstraling te geven.

Een template installeren

In tegenstelling tot andere extensies worden templates niet aangeboden op Joomla.org. Misschien omdat het er zoveel zijn. Er zijn namelijk duizenden templates te vinden, verspreid over behoorlijk wat websites waar je zowel gratis als betaalde templates kunt downloaden.

De kwaliteit is wisselend, zelf ben ik daarom afgegaan op dit forumbericht op Joomla.org en zo uitgekomen op het OrdoSoft Blank template, een neutraal en responsive template, geschikt voor Joomla 3. Wanneer er geadverteerd wordt met een responsive template wil dit zeggen dat het template geschikt en geoptimaliseerd is voor weergave op tablets en mobiele telefoons.

Mijn keuze is zo goed als de jouwe als het op templates uitkiezen aankomt, bij Van Eldijk ontwikkelen we onze eigen custom templates en hebben we geen tot weinig ervaring met wat er zoal beschikbaar is op het gebied van pre-build templates.

Mocht je een ander template tegenkomen dat je bevalt, ga je gang en installeer het (en wees zo aardig om andere bezoekers van jouw vondst te laten meegenieten). Weet wel dat niet alle templates extra opties hebben voor het instellen van bijvoorbeeld de kleuren en het logo. Dat stukje in de tutorial van vandaag zul je dus wellicht moeten overslaan, mocht je voor een ander template gaan.

Goed, aan de slag! Een template installeren gebeurt op dezelfde manier als elke andere extensie.

6-template-downloaden

Ga eerst naar de download pagina van het Ordosoft Blank template. Op het moment van schrijven ziet deze er zoals hierboven uit. Klik hier op download knop.

extensiebeheer

Zoals je inmiddels weet, kun je het zojuist gedownloade *.zip bestand installeren via de Extensies > Extensiebeheer pagina.

Het template is nu geïnstalleerd, maar nog niet actief.

Het template als standaard instellen

Je kunt een template toewijzen aan een enkele of meerdere pagina's van de website, maar ook instellen als standaard template voor de gehele website. 

temp-beheer

Ga hiervoor naar Extensies > Templatebeheer.

7-temp-default

Op dit moment is het Beez thema het standaard template. Dit is aangegeven met het gele sterretje. Klik nu op het gele sterretje achter het OrdaSoftTemplate-BaseTemplate thema.

De wijziging wordt gelijk doorgevoerd op de website, bezoek deze maar eens.

1 voorzijde

Dat is een verandering, nietwaar? Er ontbreken alleen nog een paar dingen. De menu's en de banner zijn bijvoorbeeld ineens verdwenen.

Dit komt omdat ze nog ingesteld staan op modulepositites van het Protostar template.

Er zit niks anders op dan nieuwe posities op te geven voor onze modules, deze handeling zal je altijd moeten uitvoeren wanneer je een nieuw template installeert.

Nieuwe module positites opgeven

Ga naar Extensies > Modulebeheer en klik eerst op de Main Menu module.

2 module-positie-main

De posities voor het nieuwe thema vind je onder het Ordasofttemplate-basetemplate kopje. Sla de wijziging op.

3 topmenu-pos

Verander daarna op dezelfde manier de positie van het Gebruikersmenu naar topMenu.

kruimel-pos

Voor de Breadcrums wordt de nieuwe positie Kruimelpaden [Breadcrumbs].

advertentie-pos

De positie van de Advertenties module, tot slot, zet ik op SidebarRight.

Een logo toevoegen

Het template dat we hebben gekozen bevat nog enkele extra opties om vanuit de backend kleurtjes en lettertypen aan te passen.

Daarnaast kun je een logo opgeven, die linksbovenaan de website wordt geladen op de plek waar je nu een 'afbeelding niet gevonden' icoontje ziet.

tem-opties

Het opgeven van lettertypen, logo's etc, gebeurt weer via de Extensies > Templatebeheer pagina. Hier klik je op de naam van het template.

 4-logo

Ga vervolgens naar het Opties tabblad en klik op de blauwe balk met Logo.

Selecteer op jouw PC een geschikt logo en vul bij Logo width (breedte) en Logo height (hoogte) precies de afmetingen van deze afbeelding in, om geen vervorming te krijgen.

De link mag index.php blijven, dit is de link naar de voorpagina.

Pas eventueel nog andere zaken aan zoals het lettertype en de kleuren.

Vergeet niet de wijzigingen op te slaan en bekijk vervolgens de website.

voorzijde-einde

Dat begint al ergens op te lijken, toch? Hoewel nog wel een beetje kaal. In een komende tutorial zullen we een slideshow toevoegen om de website nog wat op te fleuren.

Slot

De keuze voor een template is erg belangrijk, en je kunt die keuze het beste al in het beging van het proces maken om te voorkomen dat je te veel modulepositites moet aanpassen.

Een andere manier om dit te voorkomen is om zelf het huidige thema aan te passen. De CSS bestanden, de bestanden die de opmaak regelen, vind je in de "/templates/de-naam-van-jouw-template/css" folder.

Je kunt dan niet alleen lettertypen en een paar kleuren aanpassen, maar in principe alles wat je ziet. Dit vereist wel enige kennis van HTML en CSS, zeker als je je ook nog eens je eigen modulepositites wilt toevoegen.

Het zal even doorzetten zijn maar ook voor een beginner is dit te doen.

Laatst gewijzigd op: