Les 10

Herhalingsoefening

Inhoud toevoegen

Inhoudstype:

type

Importeren met feeds (of handmatig toevoegen)

Dit keer zal je de module Feeds Tamper nodig hebben om het meervoudige afbeeldingsveld te kunnen importeren

tamper

Importeer de nodige inhoud:

CSV-bestand

Afbeeldingen

Nieuw thema

Installeer het thema Newsplus Lite (niet als standaard)

Frontpage aanpassen

  1. Voeg inhoud toe van het type Basic Page

front

  1. Je kan de inhoud hieronder kopiëren, de tekst heb ik uitgevuld.
Gedurende vele eeuwen, hebben grote kunstenaars de mensheid voorzien met ongelooflijke dingen. Een van die ongelooflijke dingen is de kunst van het beeldhouwen. Online Galerij heeft voor u de 10 beroemdste sculpturen ter wereld samengesteld. Lees verder om meer te leren over deze absoluut verbazingwekkende kunstwerken.
  1. Pas de URL-alias aan naar /beeldhouwers
  2. Stel in bij Switch Page Theme dat de pagina /beeldhouwers wordt weergegeven in het thema Newslite Plus
  3. Stel in dat de frontpage verwijst naar /beeldhouwers
  4. Verberg overbodige blokken

Logo

  1. Pas het logo van de site aan. Gebruik onderstaand logo:

logo

  1. Met de module Logo image style kan je het logo voorzien van een afbeeldingsstijl (ik koos voor 130 x 130)

stijl logo

  1. Met CSS zorg je ervoor dat de sitebranding centraal komt te staan.
  2. Pas de sitenaam aan naar iets relevant voor dit onderwerp

Menu verbergen

  1. Maak een nieuw blok aan waarin je een link steekt naar de andere oefeningen
  2. Geef het blok een plaats onder Newslite Plus in het blokgebied Page Intro
  3. Verberg het hoofdmenu onder Newslite Plus
  4. Om de slideshow van de auto's te behouden zal je bij de instellingen de paginabeperking moeten aanpassen

andere

Slideshow

Voorzie een slideshow die de foto's van de beeldhouwwerken in willekeurige volgorde toont op de frontpage. Met Focal Point kan je ervoor zorgen dat er correct wordt bijgesneden in je afbeeldingsstijl

slideshow

Menu beeldhouwwerken

  1. Zorg er eerst voor dat alle 10 de nodes van de beeldhouwwerken een logische URL-alias meekrijgen: content-type/node title
  2. Met Pathauto is dat geen probleem. Maak eerst een patroon aan en via bulk generate maak je de 10 aliassen aan

patroon

patroon

  1. Zorg ervoor dat alle 10 de nodes van de beeldhouwwerken verschijnen in het thema News Lite Plus

h

  1. Maak een nieuw blok aan via een View
  2. Geef de verschillende titels van de beeldhouwwerken weer
  3. Zorg ervoor dat wanneer je straks naar een node kijkt van een beeldhouwwerk, dat die titel niet zichtbaar is in het menu. Dat doe je met een contextuele filter

pieta

Achtergrond

Zorg dat deze afbeelding als achtergrond voor de body wordt ingesteld op alle pagina's rond het onderwerp beeldhouwwerken

wave

Kleuren en fonts

Gebruik onderstaande richtlijnen om de website te voorzien van beter kleuren en fonts.

  1. Achtergrondkleur banner: #D5B170
  2. Kleur sitenaam: #624511
  3. Grootte sitenaam: 53px
  4. Alle linken: #A87C07
  5. Linken hover: #6A510C
  6. Grootte van de linken: 1.2em
  7. Tekst op frontpage: #6A510C
  8. Tekstgrootte frontpage: 1.1em
  9. Tekst frontpage: vet

Flip

Wanneer je kijkt naar de node van het kunstwerk dan zie je de afbeelding van het kunstwerk. Ga je daarover hoveren, dan draait de afbeelding en zie je de naam van de kunstenaar, de afbeelding, het land en het jaar.

  1. Maak een overzicht aan
  2. Voeg EVA toe
  3. Gebruik dezelfde technieken en codes als die van de werkmaterialen (zie les 9)
  4. Voeg een contextuele filter toe, anders zie je alle werken
  5. Pas de CSS code aan. Zo zou ik de schaduw weglaten, de achtergrondkleur aanpassen en de afbeelding van de kunstenaar vergroten
  6. Maak best een afbeeldingsstijl (260 x 460) aan voor de kunstwerken, gebruik vervolgens dezelfde afmetingen in CSS

p   -->   m

  1. De tekst die naast het flipeffect  te zien is geef je volgende CSS mee. In combo met de bestaande Flip-css zal het geheel mooi in elkaar zitten:
  margin-right:10px;
  background-color:#6D5412A6;
  color:#FFF9EA;
  text-align:center;
  padding-top:20px;
  padding-left:15px;
  font-size:1.2em;
  border-radius:0 20px 20px 0;

gvg

Juicebox

  1. Je hebt de module nodig
  2. Het is een third party
  3. Libraris API is noodzakelijk
  4. Het veld extra afbeeldingen wordt weergegeven in een juicebox-galerij met de volgende eigenschappen:
  5. Gecentreerd
  6. Achtergrondkleur: #FFF9EA
  7. 70% hoog
  8. 50% breed
  9. Het 'merk' juicebox is niet meer zichtbaar dankzij CSS
  10. Je kan dit in de node uitwerken of in een view, indien je voor het laatste gaat, stel dan een contextuele filter in.

f

Alle afbeeldingen

Onderaan elke pagina met betrekking tot het beeldhouwen komt een overzicht te staan van ALLE afbeeldingen.

  1. Afmetingen: 100 x 100
  2. Iets van afstand tussen de afbeeldingen
  3. Ze floaten left
  4. De afbeelding krijgt een schaduw (rgba(97,75,51,0.93)) en een rand (#816c32)
  5. Hover je over een afbeelding dan worden deze iets ronder en de randkleur past zich aan (#D5B170
  6. Als je klikt op eender welke afbeelding kom je meteen in de juiste node terecht

dink