Drupal 7 cursus deel 4: poll, forum en nieuw thema

Inhoudsopgave

  1. Inleiding
  2. De site online zetten
  3. Nieuw thema installeren
  4. Forum toevoegen
  5. Meer met blokken
  6. Een poll toevoegen

Drupal Marinelli theme

De website is zo goed als rond: klaar voor alle content, met alle gewenste functionaliteit. Alleen de vormgeving is nog niet bijzonder. Als je iets anders wilt dan het standaardthema, is dat zo geregeld. Met een nieuw thema krijgt de site over een totaal andere look and feel.

Een populair thema uit het aanbod van Drupal.org is Marinelli. Download Marinelli hier. Via Uiterlijk, Installeer een nieuw thema installeer je dat bestand. Kies na installatie van het thema voor Als standaard instellen. De metamorfose van de site is al meteen compleet.

Je zou met dit thema al kunnen werken, maar in de praktijk is het beter om een kopie te maken: een subthema. Je aanpassingen gaan dan niet verloren als je later het originele thema updatet. Bij Marinelli maak je zo’n kopie als volgt: Kopieer de map sites/all/themes/marinelli/subtheme naar de locatie sites/all/themes/subtheme.

Om het thema een andere naam te geven, verander je de mapnaam subtheme in bijvoorbeeld autoclub. In die map vind je een tekstbestand subtheme.info.txt. Open dat en verander name = subtheme in name = autoclub. Sla het bestand op. Tot slot hernoem je dat bestand van subtheme.info.txt. naar autoclub.info (dus zonder de extensie txt). Nu is het subthema met de naam autoclub klaar voor gebruik. Ga in de beheeromgeving naar Uiterlijk en schakel autoclub in als standaardthema.

De site heeft nu nog steeds de Marinelli-layout: het subthema neemt alle instellingen over van het hoofdthema, behalve als je die instellingen verandert in het subthema.

Drupal 7 Marinelli banner aanpassen

Logo en banner

In het nieuwe thema pas je de header aan zoals je al in de eerste aflevering van deze workshop hebt gezien, via Uiterlijk, Instellingen. Haal het vinkje weg bij Gebruik het standaardlogo en upload opnieuw het autoclublogo. Maar Marinelli biedt iets extra’s: het thema bevat ook een slideshowbanner. Om die te gebruiken, vervang je de standaardfoto’s (zoals de kattenogen) door je eigen foto’s.

Ga via Uiterlijk naar de instellingen van het thema en klik op Banner Management. Verwijder de voorbeeldfoto’s één voor één (Delete image). Zorg ervoor dat je een paar geschikte foto’s hebt op het juiste formaat: 1020x320 pixels. Je kunt Photoshop gebruiken om afbeeldingen bij te snijden, maar denk ook aan gratis online alternatieven als pixlr.com, die voor dit soort bewerkingen prima volstaan.

Als je een afbeelding op het juiste formaat op je computer hebt staan, voeg je die toe via Upload a new banner. Bij Titel en Omschrijving kun je informatie invullen die onder aan de banner zal verschijnen. Wil je dat de banner een link vormt naar een andere pagina op de site? Vul dan bij URL het adres in van de doelpagina. Bij Zichtbaarheid ten slotte bepaal je waar de banner verschijnt: bijvoorbeeld alleen op de homepage (<front>) of overal (vul dan een sterretje in). Herhaal deze stappen tot je voldoende banners hebt voor een slideshow.

Als je wilt, kun je via de lay-utinstellingen (Layout Settings) ook de kolomindeling kiezen. De kolom met de hoofdcontent kan links staan, in het midden of rechts. 

Drupal 7 Megadropdownmenu

Megadropdownmenu

Marinelli bevat naast de slideshow nog een extra: een megamenu. Dat toont in één grote dropdownweergave direct alle sublinks binnen de beschikbare rubrieken. Je kunt een menu maken dat er uitziet als in de afbeelding hierboven.

Hoe maak je zo’n megamenu? Selecteer eerst bij het thema Marinelli onder Primary Menu Settings, Mega Drop Down. In de voorbeeldsite is het effect nog bescheiden, omdat het hoofdmenu nog maar een paar links bevat. Maar als je het menu bevolkt met meer links en sublinks, wordt die hiërarchie ook in het menu getoond. Je kunt dit uitproberen door menulinks toe te voegen via Structuur, Menu’s, Hoofdmenu. Gebruik korte links voor het tweede niveau, dat worden de ‘kopjes’ boven de lijsten met sublinks daaronder. Je kunt per hoofdlink maximaal 4 links op het tweede niveau maken. Op het derde niveau is het aantal menulinks onbeperkt.

Css-stijlen aanpassen

Drupal 7 websiteAls je de vormgeving van een thema wilt aanpassen, moet je wijzigingen aanbrengen de css-bestanden (de bestanden met de vormgevingsstijlen). Daarvoor is het nodig dat je een beetje css-code beheerst, maar dat is niet ingewikkeld en het stelt je in staat om met beperkte ingrepen het hele aanzien van de site te veranderen.

Je vindt de css-bestanden in de map sites/all/themes/marinelli/css. Kopieer die bestanden eerst naar je subthema voordat je ze verandert. Een voorbeeld: stel dat je het bestand layout.css wil aanpassen, maak dan eerst de map sites/all/themes/autoclub/css aan en kopieer lay-out.css naar die nieuwe map. Verander ook iets in het tekstbestand sites/all/themes/autoclub/autoclub.info: verwijder de puntkomma aan het begin van de regel vóór het bestand layout.css. Je vertelt Drupal daarmee dat het niet het originele layout.css-bestand moet raadplegen, maar de door jou veranderde kopie in het subthema autoclub.

Een voorbeeld van wat je met css kunt veranderen: als je layout.css opent in een teksteditor, vind je daar de stijl voor de body van de pagina. Als je die wijzigt in background: orange, verandert de achtergrondkleur van elke pagina. Denk er wel om dat je na dit soort wijzigingen altijd Drupals cachegeheugen leegmaakt (Instellingen, Prestaties, Alle caches legen). Pas dan vindt Drupal alle wijzigingen in de themabestanden.

Verder met Drupal

De voorbeeldsite is af: inhoud, extra functies en vormgeving zijn naar wens. Maar natuurlijk valt er nog veel meer uit Drupal te halen. Het is leerzaam om rond te kijken in de menustructuur en te experimenteren met de beschikbare opties. Kijk ook op de volgende sites:

Over Drupal:
http://drupal.org (internationale site)
http://drupal.nl (Nederlandstalig)

Over CSS:
http://www.homepage-maken.nl/csscursus/overcss.php

Over FTP:
http://www.byte.nl/docs/Alles-Over-FTP.html

Gratis ftp-programma Filezilla:
http://filezilla-project.org

Geschreven door: Redactie PCM op

Category: Workshop, Webdevelopment

Tags: Cms, Cursus, Drupal, web development, drupal 7 cursus