J3.x

Aan de slag met templates

From Joomla! Documentation

This page is a translated version of the page J3.x:Getting Started with Templates and the translation is 100% complete.

Other languages:
български • ‎Deutsch • ‎English • ‎español • ‎français • ‎hrvatski • ‎Bahasa Indonesia • ‎Nederlands • ‎português do Brasil • ‎русский • ‎українська

Introductie

Joomla! 
≥ 3.0
serie

Deze introductiehandleiding geeft inzicht in het Joomla! template systeem en wat u ermee kunt doen en ook hoe u deze templates kunt aanpassen aan uw wensen.

Het doel van templates

J3x-template-example-screenshot-nl.png

Een template bepaalt het uiterlijk en de lay-out van een site. Het biedt een kader dat algemene elementen, modules en componenten samen brengt, daarnaast geeft het de cascading style sheet aan de site. Zowel de website als het beheergedeelte van de site hebben templates.

Wanneer Joomla! voor het eerst is geïnstalleerd zitten er automatisch enkele templates in. Op andere websites vind je veel meer templates. Sommige zijn kosteloos beschikbaar onder verschillende licenties en sommige zijn te koop. Daarnaast zijn er veel ontwikkelaars die aangepaste templates kunnen maken. U kunt ook uw eigen template maken.

Templates worden beheerd via Templatebeheer, dat zit in het Extensies-menu in het beheergedeelte (administrator) van de site.

Waarom gebruikt Joomla! templates? [Een echte beginners handleiding!]

De manier waarop Joomla! is ontworpen scheidt de belangrijkste taken bij het maken van een website om de software efficiënt te onderhouden. Een van deze taken is het maken van de esthetiek (de uitstraling en lay-out) van de site. Dit omvat het nemen van beslissingen zoals welke content-elementen (componenten, modules en plugins) u op een bepaalde pagina wilt plaatsen.

Bij het maken van een webpagina blijft de positie van de meeste elementen hetzelfde (menu's, banner posities, sidebars enz.). Daarnaast wilt u de dezelfde uitstraling (lettertypes, kop-stijlen, kleurschema's enz.) op iedere pagina. Voor sommige onderdelen van uw site wilt u misschien de algemene uitstraling wijzigen om het andere doel van deze pagina's aan te geven (zoals een blog). Er is hier enige planning voor nodig, maar als u een besluit heeft genomen over de algemene uitstraling van uw site, dan moet u daarna ieder inhoud-pagina aanmaken.

En hier komt het template om de hoek. U kunt óf de code van iedere pagina apart schrijven, óf een template gebruiken voor ieder belangrijke sectie van de site zodat als een nieuwe pagina gemaakt wordt u eenvoudigweg "de leegtes opvult". Oké, misschien is het niet zo eenvoudig, maar deze handleiding is ontworpen om u een stap voor stap gids te geven voor een effectief template gebruik, beginnend met hoe die te gebruiken en uiteindelijk eindigend hoe er zelf een te maken.

  1. Gebruik een van de templates die met Joomla! worden geleverd.
  2. Download een van de vele gratis aanbiedingen op Internet.
  3. Betaal voor een die aangepast kan worden of van de grond af aan opgebouwd is, als uw behoefte niet op een andere manier kan worden voldaan.

Samenvatting – een template bepaalt de uitstraling van uw site en geeft tegelijkertijd de website beheerder de mogelijkheid zich te richten op de daadwerkelijke inhoud.


Wat u kunt doen

Een template wordt gebruikt om de manier waarop de inhoud aan een webbrowser of schermlezer aangeboden wordt, te beïnvloeden. Hier enkele manieren om het toe te passen op uw Joomla! site.

Lay-out

Het template is de plek waar het ontwerp van de weergave van uw site wordt bepaald. Dus ook waar u verschillende elementen (modules) plaatst. Bijvoorbeeld: U bepaalt de positionering van menu's, en inloggen formulier, advertenties banners, polls, etc.

J3x-template-example-module-changes-screenshot-nl.png

Let op de wijzigingen in inhoud lay-out!

Het (artikel) in de body van de pagina kan van style veranderen(u kunt kiezen uit verschillende weergave stijlen zoals blog lay-out, een nieuws artikel, enz) afhankelijk van de templates lay-out. *Zie de voorbeeld afbeelding. Let op de verschillen in lay-out, maar dat de weergave consistent is. De zijbalk van modules is verplaatst van links naar rechts en de volgorde opnieuw gerangschikt.

Indien het template ontworpen is met keuzes, dan kunt u ook "dynamisch" de plaats van de inhoud op uw site veranderen, misschien door het hoofdmenu rechts of links op het scherm te zetten.

Kleurenschema

Met behulp van CSS binnen het template ontwerp, kan de kleur van de achtergrond, tekst, links of vrijwel alles dat gewijzigd kan worden met gewone HTML-code, veranderd worden. Sommige templates hebben een manier om de kleur in templatebeheer aan te passen, voor andere moet u de template .css bestand(en) aanpassen.

Afbeeldingen en effecten

U kunt ook de manier waarop afbeeldingen worden getoond op de pagina beïnvloeden, en zelfs flash-achtige effecten maken of AJAX applicaties opnemen zoals drop-down menu's.

Lettertypes

Hetzelfde geldt voor lettertypes. De ontwerpen hiervoor staan allemaal CSS bestand(en) van het template om een uniforme uitstraling op de hele site te krijgen, hetgeen het fantastisch gemakkelijk maakt om de hele uitstraling te veranderen door slechts een of twee bestanden aan te passen in plaats van op iedere pagina.

Browserspecifieke oplossingen

Een template kan ontworpen worden om te veranderen hoe het weergegeven wordt door verschillende browsers, waardoor u volledig kunt profiteren van de laatste ontwikkelingen zonder dat uw site ontoegankelijk wordt voor diegenen die niet in staat zijn tot "bij-de-tijd" systeem upgrades (zoals bepaalde bedrijven die beperken welke software hun werknemers mogen gebruiken).


Meegeleverde templates

De volgende templates worden meegeleverd met een standaard installatie van Joomla! 3.x

Site templates

  • Protostar (Standaard template)
  • Beez 3

Beheer templates

  • ISIS (Standaard template)
  • Hathor


Van template wisselen

Volg, om het standaard template van de Site (Front-end) of Administrator (Beheer) te wijzigen, de volgende stappen:

Toegang tot templatebeheer

  • Klik op: Extensies  Templates

Extension-manager-template-manager-3x-nl.png

U ziet nu het Templatebeheer-scherm.

Let op: Als u geen Templates vermeld ziet als optie in het Extensies menu, komt dat waarschijnlijk omdat u niet ingelogd bent als Super User. Alleen Super Users zien dit menu-item.


Beheren van het standaard template

Vanaf hier beheert u uw templates voor de website en het beheergedeelte. De standaard weergave toont uw geïnstalleerde website template stijlen. De standaard stijl voor de website wordt gemarkeerd met een ster; in onderstaande afbeelding is het protostar - Standaard.

Wijzigen van de standaard stijl naar beez3:

  • druk op het keuzevak links van de naam van de stijl om deze te selecteren;
  • druk op "Standaard" in de werkbalk;

het sterretje verandert van protostar naar beez3 en u bent klaar. Als alternatief kunt u op de uitgegrijsde standaard ster van een template drukken, om hem snel als standaard in te stellen.

U kunt de filter drop-down lijst boven gebruiken of het zoekfilter om het aantal vertoonde templates te beperken in de lijst met templates. Andere mogelijkheden zijn:

  • bewerken - Bewerk de opties en menu koppelingen waarop een template getoond wordt (zie hieronder)
  • kopieer - Kopieer de stijl van het template
  • verwijderen - Verwijder een template stijl (mag niet de standaard template stijl zijn)

30-Switching-templates-1-nl.png


Meer dan één template stijl toekennen aan de website

Joomla! biedt de mogelijkheid om tussen twee of meer stijlen te schakelen op de website. Dit wordt gedaan met "Menu koppeling", zo kunt u verschillende stijlen instellen voor ieder menu of alleen voor een menu-item. Dit staat toe dat bepaalde "pagina's" via een menu-link een "bepaalde" stijl krijgen. Stijlen kunnen uit verschillende templates komen.

Via templatebeheer

Klik op: Extensies  Templatebeheer

  • U ziet uw geïnstalleerde template stijlen, kies nu voor een stijl die "'niet"' als standaard ingesteld is. Een gele ster geeft aan dat de stijl de standaard is.
30-Template-manager-select-edit-nl.png
  • Klik op de stijlnaam of het keuzevak links van de stijlnaam en druk op "Bewerken" in de werkbalk.
  • U ziet nu de pagina "Templatebeheer: [ Stijl bewerken] ", ga naar de sectie "Menutoewijzing" en kies de menu-items waar de stijl getoond moet worden.

30-Switching-templates-assign-menus-nl.png

  • Druk op "Opslaan" in de werkbalk en klaar is Kees. Het menu-item zal nu het gekozen template tonen.
  • Ga naar de website en ververs de pagina om de wijzigingen te zien.

Via menubeheer

  • Ga naar het menu-item Menu's  Menunaam
  • Kies een menu-item door het vakje links van de naam aan te vinken en druk dan op de Bewerken knop in de werkbalk. U kunt ook eenvoudig op de naam van het menu-item drukken om het te bewerken.
  • Op het Bewerk menu-item scherm, onder Gegevens bij Templatestijl, kies de gewenste templatestijl en druk op de Opslaan knop.

30-Menu-item-template-management-edit-nl.png

  • Ga naar de website en ververs de pagina om de wijzigingen te zien.


Zie ook


Installeren van templates

Installeren het Administrator paneel (ingepakt template-bestand)

Inloggen op het beheergedeelte van uw site ("www.uw-site.com"/administrator/)

Klik op: Extensies -> Extensiebeheer

30-Installing-template-navigate-nl.png

U ziet de pagina "Extensiebeheer"

Vanaf hier kan men Templates, Plugins, Modules, Componenten en Talen installeren. Er zijn verschillende opties:

  1. Installeren vanaf web - om een extensie vanuit de Joomla! Extensie Directory te installeren
  2. Upload pakketbestand - om een pakket vanaf de PC te uploaden en te installeren
  3. Installeren vanuit map - om het pad waar het pakket zich op uw webserver bevind in te geven
  4. Installeren vanaf URL - om de URL op te geven van het pakket

Optie 4 doet alles voor u, uw omgeving moet goed geconfigureerd zijn om dit mogelijk te maken. Voor optie 2 moet u de extensie downloaden naar uw PC. Voor optie 3 moeten de mappen/bestanden uitgepakt en verplaatst worden naar uw webserver. Alle opties vereisen dat de webserver schrijfrechten heeft op de webruimte.

Hier kiezen we voor de tweede methode: Upload pakketbestand

Drag-and-drop bestand naar de upload area om te uploaden. Als alternatief kunt u ook op de knop "Of blader naar het bestand" drukken en het pakket op uw PC selecteren.

30-Installing-template-upload-package-file-nl.png

Als het pakket geen fouten bevat bent u klaar en krijgt u een bericht zoals hieronder.

30-Installing-template-install-success-nl.png

Controleer de installatie

Ga van 'Installeren' naar 'Beheren', zet het type filter op 'Template'. Het geïnstalleerde template zou in de lijst moeten verschijnen. Als het in de lijst verschijnt, is het template juist geïnstalleerd. Nu kan één van de stijlen aan een menu-item gekoppeld worden of de stijl als standaard worden ingesteld. Voor administrator templates is het belangrijk om twee browservensters open te hebben. Activeer het nieuwe template in het ene venster en reset eventueel in de andere als er iets mis gaat.

Installeren via FTP (uitgepakt template-bestand)

Templates kunnen ook geïnstalleerd worden via FTP zonder ze in te pakken. Selecteer gewoon de juiste template-map op uw PC en upload deze naar uw server met behulp van uw favoriete FTP-software. Zorg ervoor dat u de template-map uploadt naar de map: /"pad_naar_joomla"/templates/ - waar /"pad_naar_joomla"/ de locatie van uw Joomla! installatie op de server is. Deze methode wordt meestal gebruikt wanneer u zelf een template heeft gemaakt en geen pakket wil aanmaken om het te installeren, of als u meer dan één template in één keer wilt uploaden. U moet nu naar Extensiebeheer gaan en op "Ontdekken" klikken in het submenu. Klik op "Ontdekken" in de werkbalk als uw template niet direct verschijnt. Er moet nu een lijst van niet geïnstalleerde onderdelen verschijnen. Klik op het selectievak links van het template en klik op installeren.

"Let op: Gebruik FTP niet om Componenten, Modules en Plugins te installeren als u een beginner of nieuweling bent. Deze items hebben regels in de database nodig, welke handmatig moeten worden ingevoerd als geen gebruik wordt gemaakt van de pakket installatie."