Dag 5: Een thema installeren

Een thema bepaalt het uiterlijk van jouw Drupal website, zoals de kleuren, het lettertype, de breedte van kolommen, etc. Ook de locatie van content wordt door grotendeels door de "thema laag" bepaald. Je kunt een thema uitkiezen voor zowel de voorkant van de website, zoals niet ingelogde bezoekers de site te zien krijgen, evenals voor de beheer interface. Ook is het mogelijk om thema's toe te wijzen aan specifieke pagina's.

Een nieuwe Drupal 7 installatie heeft standaard “Bartik” als thema met “Seven” als beheerthema. Het beheerthema laten we voor wat het is, maar voor Bartik gaan we een vervanger installeren. We willen namelijk voor een iets zakelijker uiterlijk gaan dat past bij ons project. In het ideale geval zouden we ons eigen thema maken, maar omdat we maar 24 dagen hebben, met nog zoveel te doen, kiezen we schaamteloos voor een kant en klaar thema.

Een thema uitkiezen

Drupal 7 thema's zijn te downloaden via http://drupal.org/project/themes. Wij kiezen in dit geval voor het thema Corporate Clean. Je kan gerust een ander thema kiezen, maar hou er wel rekening mee dat we in het verloop van deze tutorial uitgaan van Corporate Clean.

Download het laatste *.zip of *.tar.gz bestand op de projectpagina: http://drupal.org/project/corporateclean

Het installeren van een thema gebeurt op vrijwel dezelfde wijze als het installeren van een module. Ook nu kunnen we weer kiezen om de installatie via de beheer interface (optie 1) uit te voeren of handmatig via een FTP programma (optie 2).

Optie 1: Installeren via de beheer interface

Open jouw Drupal website en log in als beheerder. Kies bovenaan in het menu voor uiterlijk. Je krijgt een overzicht te zien van alle geïnstalleerde thema's. Bovenaan dit overzicht klik je op een nieuw thema installeren (gelijk boven “ingeschakelde thema's”). 

Onder de zin Upload een module- of thema-archief om te installeren klik je op de knop bestand kiezen en selecteer je vervolgens het zojuist gedownloade (en nog ingepakte) thema bestand. Klik daarna op installeer.

Mocht je bij de installatie een foutcode krijgen download het thema dan opnieuw maar kies ditmaal voor een ander bestandstype. Lukt het nog steeds niet? Installeer het thema dan via FTP, zie hieronder.

Na installatie kies je voor Enable newly added themes om weer terug te gaan naar het overzicht van geïnstalleerde thema's. Op dit moment is het nieuwe thema nog uitgeschakeld. Scroll naar beneden tot het kopje Uitgeschakelde thema's verschijnt en klik daar bij het nieuwe thema op instellen als standaard.

Vanaf nu worden alle pagina's van de website standaard weergegeven met het Corporate Clean thema.

Optie 2: Thema installeren via FTP

Ook hier geldt: of je nu een thema installeert of een module via FTP, het gebeurt bijna op dezelfde manier. Het enige verschil is de folder waar de uitgepakte folder naartoe gekopieerd moet worden. Ditmaal is dat niet '/sites/all/modules' maar '/sites/all/themes'. Blader op de webserver naar /sites/all/themes en upload de folder met het nieuwe thema hiernaartoe. Log nu in op de beheerpagina van jouw Drupal website. Kies bovenaan in het menu voor uiterlijk. Je krijgt een overzicht te zien van alle geïnstalleerde thema's.

Op dit moment is het nieuwe thema nog uitgeschakeld. Scroll naar beneden tot het kopje Uitgeschakelde thema's verschijnt en klik daar bij het nieuwe thema op instellen als standaard. Vanaf nu worden alle pagina's van de website standaard weergegeven met het het Corporate Clean thema.

Regionen en blokken

Een thema bestaat uit meerdere regionen, deze gebieden zijn gereserveerd voor extra stukjes content, zogenaamde blokken (blocks). Een blok kan van alles bevatten, van een login menu tot een lijst met gerelateerde content. Wanneer je een blok activeert kun je bepalen in welk gebied deze weergegeven moet worden. Als we uitgaan van een simpel thema dan zijn de volgende gebieden meestal wel aanwezig:

  • Een kop gebied met de titel en een menu
  • Een gebied waar de hoofd content wordt weergegeven (pagina's en artikelen)
  • Een zijbalk voor extra blocks
  • Een voet gebied voor extra blocks

De meeste thema's hebben echter nog meer gebieden waar blokken geplaatst kunnen worden, bijvoorbeeld vlak boven de hoofd content, rechts naast de titel, etc. Op dag 15 gaan we zelf met blokken aan de gang om de positie van het zoekveld en een aantal andere zaken te veranderen. Nu gaan we alleen het logo aanpassen en de slideshow verwijderen. Dit gebeurt via de thema instellingen.

Het thema aanpassen: een eigen logo

Veel thema's bieden de mogelijkheid om de standaard kleuren of kolom indeling te veranderen via de beheer interface, hier heb je dus geen CSS of HTML kennis voor nodig. Om te weten wat je kunt veranderen ga je naar de thema pagina en klik je bij het thema dat je wilt aanpassen op instellingen.

Je ziet dat je de kleuren hier kunt veranderen naar je eigen voorkeur. Meer naar onderen heb je de mogelijkheid om een aantal onderdelen uit - en in te schakelen. Hier kun ook een eigen logo toevoegen.

Klik onder Instellingen logo op het vinkje voor "standaardlogo gebruiken". Vervolgens heb je de optie om een eigen afbeelding te uploaden.

Dit thema komt met een slideshow, maar deze gaan we uitschakelen. Als je hier mee aan de slag wilt verwijs ik je door naar de documentatie van het thema. We raden je deze slideshow echter af aangezien de code zich bevindt binnen het thema zelf (ook wel "hardcoded" genoemd). Dit houdt in dat je deze slideshow handmatig moet vullen met HTML tekst en afbeeldingen in plaats van dat je content binnen de website er automatisch in kunt laten terugkomen.

Haal het vinkje weg voor "show slideshow"

Wil je perse een slideshow dan kun je daar beter een module voor installeren zoals Views Slideshow.

Slot

Aan het instellen van Drupal zelf zul je je handen de komende dagen al vol genoeg hebben, vandaar dat we iets minder aandacht besteden aan de ambacht van het themen. Maar als webdesigners gaat het eigenlijk een beetje tegen onze natuur in om je een custom thema als Corporate Clean te laten installeren.

We moedigen je dan ook vooral aan om te leren hoe je een thema zelf kunt aanpassen. Wanneer je goed met CSS en HTML overweg kunt, kun je een thema helemaal naar jouw wens veranderen of er eentje van de grond af opbouwen. Hoewel je het huidige thema kunt aanpassen kun je ook voor een speciaal startersthema kiezen die nog helemaal blanco zijn. Goede startersthema's zijn Omega, Adaptive Theme, Zen en Mothership (meer informatie over startersthema's is hier te vinden). Bekijk zeker ook deze presentatie over het werken met de verschillende startersthema's.

Voor alle ins- en outs rondom theming verwijzen we je door naar de theming tutorial op Drupal.org of deze screencast serie. Mocht je vragen hebben over het maken van jouw eigen thema stel ze dan gerust hieronder.

Laatst gewijzigd op: