Opdrachten

Alle CSS

 

Log-in en log-out link in het menu

Op persoonlijk website zetten we dergelijk links meestal niet om de veiligheid groter te maken. Maar website waar bezoekers kunnen inloggen moet dit uiteraard wel. Maak in het menu een login en logout link aan en zorg ervoor dat login enkel zichtbaar is als je uitgelogd ben. De link logout mag dan enkel zichtbaar zijn als je ingelogd bent.

Log-in url is /user/login
Log-out url is /user/logout

Dit werkt niet bij alle thema's, maar Adaptive Theme voorziet wel deze Classes.

Tip: zoek het in de body tag gecombineerd met de aangemaakte links in het menu.

Nieuws pagina

Maak een nieuwe inhoudstype Nieuws aan.
Laat de body staan
Maak een selectielijst genaamd "achtergrondkleur" aan met als keuze blauw, groen, rood, paars en zwart.
Zorg ervoor dat deze keuzes ZONDER hoofdletter worden ingegeven. We gaan die later al Classes gebruiken.

Maak een 5-tal nieuwsberichten aan. Gebruik eventueel Lorem ipsum teksten en selecteer voor elk bericht een kleur

Maak een view aan met een pagina "Nieuws" die bestaat uit een onopgemaakte lijst van velden.
Geef de view de class nieuws-overzicht
Geef de rijen de class nieuws-item
Voeg naast de titel ook het body veld en het achtergrondkleur veld toe.
Geef wat styling aan de titel en de body en zorg ervoor dat elke rij het toewezen kleur uit het achtergrond veld krijgt zonder een veld te herschrijven.

Als extra krijgt het eerste bericht altijd een grijze kleur en het laatste bericht altijd een oranje kleur onafhankelijk van de gekozen kleur in het achtergrondkleur veld.

Tip: denk aan child div's en overschrijven van css

 

Laatste nieuws blok

Maak een tweede view "Laatste nieuws" met een blok die bestaat uit een onopgemaakte lijst van velden die de laatste 4 nodes van nieuws weer.
Geef de view de class nieuws-blok
Geef de rijen de class nieuws-blok-item
Voeg naast de titel ook de body en een aangepast tekstveld toe met daarin de tekst Lees meer...
De tekst in de body inkorten tot maximaal 250 tekens
Laat de titel, de body en het aangepast tekstveld linken naar de view pagina nieuws.
Plaatst het blok op de voorpagina.
Stijl het blok met flexbox zodat de 4 items responsive naast elkaar komen indien er voldoende plaats is. Zet een lijntje rond elke rij, geef wat padding en zet de uitlijning van de tekst op justify. Een onderdeel mag maximale 250px breed zijn.

Extra uitdaging: Zorg ervoor dat als iemand in het blok bijvoorbeeld op nieuwsbericht 3 klikt dat de pagina nieuws wordt getoond en nieuwsbericht 3 bovenaan de pagina staat.
Tip: html named anchor.

 

jQuery countdown timer

Installeer met composer de module jquery countdown timer.
composer require drupal/jquery_countdown_timer

Deze module maakt een blok aan die je via structuur -> blokindeling kan invoegen.
Plaats het blok ergens in uw website en enkel zichtbaar op de voorpagina.

Zorg ervoor dat in de countdown teller enkel de geschreven versie zichtbaar is.
Stijl de teller zodat hij een rode kleur heeft en een zwarte tekstshaduw die 70% transparant is.

Extra uitdaging: zorg dat de weken, dagen, uren, minuten en seconden in het Nederlands staan dit zowel de enkelvouden als de meervouden. (Kan enkel als configuration translation en interface translation modules aan staan en Nederlands als taal is ingesteld)