Les 12

SuperFish

Deze module biedt je de mogelijkheid om de verschillende menu's in te stellen met verschillende mogelijkheden op vlak van het uitzicht. Wij passen met deze module het navigatie menu aan dat wij het overzicht van de bands plaatsten.

  1. Download en installeer de module
  2. Plaats de plugin op de juiste plaats, het is namelijk een third party module.
  3. Ga naar de Blok-layout en zet het huidige Navigatie menu verborgen (auto hidden)
  4. Zoek nu het blokgebied Right Sidebar en klik Blok plaatsen

  1. In de verschenen lijst ga je opnieuw op zoek naar het Navigatie menu, let er wel op dat je de Superfish versie neemt!

  1. Eens het blok geplaatst is krijg je een aantal instellingen, eventueel even op Instellen klikken

  1. Deze instellingen overlopen we klassikaal. Je zal merken dat het hier vooral gaat over het uiterlijk van het menu. Uiteindelijk zou dit het resultaat moeten zijn:

Image Field Zoom

Image Field Zoom is een leuke module. Deze laat je toe in te zoomen op een foto wanneer de gebruiker er met de muis over gaat. Bij de voorbereiding heb je gemerkt dat deze niet werkt zonder plugin, het is dus een third-party module.

  1. Download de plugin voor Image Field Zoom en plaats deze in de map libraries
  2. Download en installeer de module Image Field Zoom
  3. Open de weergave van het inhoudstype Bandleden
  4. Verander het formaat van het veld afbeelding naar ImageZoom

  1. Klik vervolgens op het tandwiel voor de instellingen van Image Field Zoom. We bespreken deze klassikaal.

Oefening

  1. Maak een nieuw inhoudstype aan. Gebruik onderstaande afbeeldingen om dat tot een goed einde te brengen:

  1. In onderstaande afbeelding zie je het veld Band. Dit is een referentie naar inhoud, meer bepaald 'Band'.

  1. Bij de Formulierweergave pas je het veld Band aan:

  1. Voeg nu vier keer inhoud toe van het type Greatest Hits

 

  1. Om de Greatest hits mooi weer te geven maken we een overzicht aan:

  1. Voeg het veld filmpje toe:

  1. Voeg ook het veld band toe, pas hier de HTML van het veld aan naar H1

  1. Klik bij de velden op titel om ook hier de HTML van veld aan te passen, H2

  1. Om het geheel mooier te maken plaatsen we wat CSS op het overzicht. Aangezien we bezig zijn met het overzicht zetten we klasse, die we straks maken, al op de juiste plaats:

  1. Maak nu een nieuwe CSS-regel aan

.filmpjes{
    float:left;
    border:2px solid rgb(251, 90, 2);
    border-radius:15px;
    padding:5px;
    margin:10px;
    box-shadow: 5px 5px 10px #888888;
    height:420px;
    width:420px;
    text-align:center;
}

  1. Resultaat: