Les 9

Inleiding

In les 9 werken we verder met ons thema Schilders. Uiteraard kan u vanaf nu de oefeningen maken op jullie eigen site.

Met de hulp van verschillende modules verfijnen we onze website met bekende schilders. En we zetten de puntjes op de i met de hulp van CSS.

Opwarmer

Om even terug te komen op ons schilderijen en een zicht te krijgen op wat we nu weer juist allemaal hebben ingesteld de volgende opdracht:

  • Zorg ervoor dat de zes schilderijen en de schilders allemaal aanwezig zijn als nodes. Voor de bestanden kan je even onder les 6 gaan kijken en deze opnieuw downloaden.
  • Voeg nu één nieuwe schilder toe: Salvador Dali. Gebruik het internet om alle info aan te vullen.

Touch Icon

De module Touch Icon geeft jou de mogelijkheid om zelf het icoon te bepalen dat verschijnt op de iPad of iPhone van de gebruiker wanneer deze de site opslaat op het beginscherm. Dit is een zeer eenvoudige module die eens geactiveerd in te stellen is bij het uiterlijk van de site.

Het geheel resulteert dan weer in een professioneel ogende website.

Afwerking vorige lessen

Contextuele filter

Fancybox instellingen

CSS aanpassingen

Inleiding

Wanneer je aanpassingen wil doen aan de site en dit kan niet door ergens een vink aan of af te zetten, dan moeten we een beroep doen op de CSS injector. Hiervoor al een aantal basisregels:

  • Elke komma of punt-komma is van belang voor de werking
  • Zorg dat de CSS enkel van toepassing is op de nodige pagina's
  • Een zelf gemaakte klasse begint steeds met een punt
  • Een bestaande klasse moet niet voorzien worden van een punt
  • Werk je je met een ID dan moet dit worden voorafgegaan door #

Om te weten hoe een bepaald onderdeel van de site wordt benoemd kan je gebruikmaken van de element-inspector dit bij elke browser aanwezig is.

Websitenaam

Wanneer je met de inspector gaat kijken dan zal je zien dat de naam van de site de naam '#logo h1 a' is.

Nu we dit weten kunnen we de css gaan aanpassen.

Kies een andere kleur, letter-spacing,....

Een mogelijke code zou kunnen zijn:

OPMERKING: het is niet 0,5em maar 0.5em (foutje van de firma)

Achtergrondkleur blok

Inspecteer met de inspector het blok waarop de diavoorstelling wordt afgespeeld.

Maak een nieuwe regel aan waar je de kleur van dit blok gaat aanpassen.

Klik hier voor de oplossing

Field Group

Field Group is een interessante module. Op dit moment kunnen we door middel van menu-items tabbladen aanmaken in ons hoofdmenu. Deze brengen ons dan meestal naar een bepaald overzicht of node. Met Field Group is het mogelijk om binnen een node tabbladen (en nog veel meer) te gaan maken. Dit kan handig zijn als je over een bepaald onderwerp heel veel info aanbiedt. Zet je alles onder elkaar zoals nu het geval is, dan kan dit slordig overkomen. Beter is om dan de verschillende content onder te verdelen in tabbladen. We werken dit stap voor stap uit.

In ons bestaand inhoudstype van de schilderijen maken we een extra veld aan: Musea

Vul nu de verschillende musea aan bij de verschillende schilderijen. Gebruik hiervoor de bestanden uit les 6

Om de vele velden met hun inhoud een beetje aangenaam leesbaar te maken voor de gebruiker gaan we deze indelen in verschillende tabbladen.

Installeer de module Field Group

Open het inhoudstype (velden beheren) van de schilderijen.

Merk op dat er nu onderaan iets is bijgekomen:

We moeten de groepering van velden bij de weergave instellen. Dit kan ook bij het beheer van de velden maar dat is dan puur voor de input van de gegevens.

Youtube-veld

Soms is het passend om een filmpje te tonen bij bepaalde inhoud. De eenvoudigste manier is het gebruik maken van een Youtube-field. Deze module moeten we even installeren en activeren.

Voeg bij het inhoudstype van de schilders een veld toe.

Voeg nu bij de nodes van de schilderijen een filmpje toe dat past bij het museum. Doe dit door de link van het filmpje te plakken.

Uiteindelijk kan je ook bij de weergave instellingen van het veld een aantal zaken aanpassen zodat het filmpje getoond wordt zoals je dat wilt.

Zorg er ten slotte voor dat het filmpje onder het tabblad Museum komt te staan, zonder het label 'film'

Google maps veld

Ook een leuke module is Simple Goolgle Maps dit is een 'simpele' manier om een Google kaartje bij de inhoud te zetten. Ideaal om bij de contact gegevens van je site te plaatsen.

In ons thema gaan we het adres van het museum toevoegen.

Installeer en activeer de module

Maak bij het inhoudstype 'Schilderijen' een nieuw veld aan:

Merk op dat dit een gewoon tekstveld is. Het is bij de weergave dat we gaan bepalen dat dit een kaart-veld moet worden:

Wanneer dit in orde is voeg je nu eerst de adressen toe aan de verschillende nodes. (klik hier voor een lijst met de adressen)

Bij de weergave bepalen we het uiterlijk van ons kaartje:

Probleem: het kaartje kan perfect naast het filmpje staan en dat is nu niet het geval. Oplossing: CSS

  • Geef zowel het filmpje als de kaart een klasse. (Bijvoorbeeld: naast en naast2)
  • Maak nu met de CSS injector een nieuwe regel aan die beide klassen bepalen.
  • Het commando dat we hier gaan nodig hebben is --> float:right en float:left

.naast
{
    float:right;
    }
.naast2
{
    float:left;
}