Herhalingsoefening
Inhoud toevoegen
Inhoudstype:
Importeren met feeds (of handmatig toevoegen)
Dit keer zal je de module Feeds Tamper nodig hebben om het meervoudige afbeeldingsveld te kunnen importeren
Importeer de nodige inhoud:
Nieuw thema
Installeer het thema Newsplus Lite (niet als standaard)
Frontpage aanpassen
- Voeg inhoud toe van het type Basic Page
- 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.
- Pas de URL-alias aan naar /beeldhouwers
- Stel in bij Switch Page Theme dat de pagina /beeldhouwers wordt weergegeven in het thema Newslite Plus
- Stel in dat de frontpage verwijst naar /beeldhouwers
- Verberg overbodige blokken
Logo
- Pas het logo van de site aan. Gebruik onderstaand logo:
- Met de module Logo image style kan je het logo voorzien van een afbeeldingsstijl (ik koos voor 130 x 130)
- Met CSS zorg je ervoor dat de sitebranding centraal komt te staan.
- Pas de sitenaam aan naar iets relevant voor dit onderwerp
Menu verbergen
- Maak een nieuw blok aan waarin je een link steekt naar de andere oefeningen
- Geef het blok een plaats onder Newslite Plus in het blokgebied Page Intro
- Verberg het hoofdmenu onder Newslite Plus
- Om de slideshow van de auto's te behouden zal je bij de instellingen de paginabeperking moeten aanpassen
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
Menu beeldhouwwerken
- Zorg er eerst voor dat alle 10 de nodes van de beeldhouwwerken een logische URL-alias meekrijgen: content-type/node title
- Met Pathauto is dat geen probleem. Maak eerst een patroon aan en via bulk generate maak je de 10 aliassen aan
- Zorg ervoor dat alle 10 de nodes van de beeldhouwwerken verschijnen in het thema News Lite Plus
- Maak een nieuw blok aan via een View
- Geef de verschillende titels van de beeldhouwwerken weer
- 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
Achtergrond
Zorg dat deze afbeelding als achtergrond voor de body wordt ingesteld op alle pagina's rond het onderwerp beeldhouwwerken
Kleuren en fonts
Gebruik onderstaande richtlijnen om de website te voorzien van beter kleuren en fonts.
- Achtergrondkleur banner: #D5B170
- Kleur sitenaam: #624511
- Grootte sitenaam: 53px
- Alle linken: #A87C07
- Linken hover: #6A510C
- Grootte van de linken: 1.2em
- Tekst op frontpage: #6A510C
- Tekstgrootte frontpage: 1.1em
- 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.
- Maak een overzicht aan
- Voeg EVA toe
- Gebruik dezelfde technieken en codes als die van de werkmaterialen (zie les 9)
- Voeg een contextuele filter toe, anders zie je alle werken
- Pas de CSS code aan. Zo zou ik de schaduw weglaten, de achtergrondkleur aanpassen en de afbeelding van de kunstenaar vergroten
- Maak best een afbeeldingsstijl (260 x 460) aan voor de kunstwerken, gebruik vervolgens dezelfde afmetingen in CSS
-->
- 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;
Juicebox
- Je hebt de module nodig
- Het is een third party
- Libraris API is noodzakelijk
- Het veld extra afbeeldingen wordt weergegeven in een juicebox-galerij met de volgende eigenschappen:
- Gecentreerd
- Achtergrondkleur: #FFF9EA
- 70% hoog
- 50% breed
- Het 'merk' juicebox is niet meer zichtbaar dankzij CSS
- Je kan dit in de node uitwerken of in een view, indien je voor het laatste gaat, stel dan een contextuele filter in.
Alle afbeeldingen
Onderaan elke pagina met betrekking tot het beeldhouwen komt een overzicht te staan van ALLE afbeeldingen.
- Afmetingen: 100 x 100
- Iets van afstand tussen de afbeeldingen
- Ze floaten left
- De afbeelding krijgt een schaduw (rgba(97,75,51,0.93)) en een rand (#816c32)
- Hover je over een afbeelding dan worden deze iets ronder en de randkleur past zich aan (#D5B170
- Als je klikt op eender welke afbeelding kom je meteen in de juiste node terecht