Maak zelf een positioner.

Om velden onderling te schikken op een pagina zijn er veel mogelijkheden (Display Suite, Panels, Panopoly, Layout Builder, CSS met kolommen,...)

We gaan echter zelf, stapsgewijs, een gebruiksvriendelijke tool maken om 4 velden ordentelijk te positioneren. Andere velden in het inhoudstype kunnen in combinatie gebruikt worden en zullen de volledige breedte innemen van het scherm (boven en onder deze 4).

Voorwaardelijke CSS in nodes en views

Maak je site aantrekkelijk door saaie inhoud zeer visueel voor te stellen. Ik werk de volgende case uit... In een inhoudstype kan je een dagdeel kiezen (voormiddag, namiddag of avond). Je kunt dit gebruiken voor een lokaalbezetting, cursus, bijeenkomst, boeking,...

We gebruiken een tekstlijst voor de input

Screen001685.png

Met Chosen ziet dit er zo uit.

Screen001683.png

Fullscreen slideshow met Adapativetheme, flexslider en views

Fotografen of ontwerpbureau's pakken graag uit met een full screen slideshow op de voorpagina van hun website.

Hieronder volgt een omschrijving van hoe je zo'n full screen slideshow kunt maken met Drupal 8, Adaptivetheme en flexslider.

Begin met een thema te gebruiken die zich leent om zoiets te maken. Bijvoorbeeld Adaptive Theme.

Installatie van het thema

Installeer het adaptivetheme basis thema
Maak een subthema met AT Tools zoals hier beschreven en stel het in als standaard thema

CSS Editor

Het kleinere broertje van de CSS injector (onderdeel van de Asset injector). Deze CSS wordt toegekend per thema. Je kunt het niet per pagina, inhoudstype,... instellen. Het is altijd voor gans het thema.

Bij de instellingen van een thema kan je de CSS plaatsen en activeren. Normaal gezien is er een autopreview om het resultaat te zien. In drupal 8 werkt dit (nog) niet.

Screen000407.png
 

 

Bootstrap Library

Bootstrap is een opmaak systeem met CSS en javascript. Het komt er op neer dat je kant en klaar CSS classes kunt aanspreken, als je weet hoe ze heten uiteraard. Op het net vind je uitgebreide handleidingen.

Drupal8_001940.png

Link class

Deze simpele module doet wat ze zegt. Je kunt aan een link een CSS klasse toekennen. Handig om verschillende knoppen op één pagina te hebben.

Je krijgt een mogelijkheid bij

Drupal8_001919.png

Waar je van alles kunt instellen. Standaard, een keuzelijstje met mogelijkheden of op het moment zelf een klasse toekennen.

Drupal8_001920.png

 

Field Formatter Class

In Drupal 7 was dit afhankelijk van Field Formatter Settings. Nu niet meer. Het zorgt voor een mogelijke toekenning van een CSS klasse aan een veld. Zeer praktisch.

Bij elk veld kan je nu via de configuratie (een tandwieltje) een CSS klasse declareren.

Drupal8_001844.png

Je plaats nu de nodige CSS

Drupal8_001847.png

@font-your-face

Wil je eens een ander lettertype dan gewoonlijk... een probleem. De lettertypes die je wilt gebruiken op je site moeten ook in de browser aanwezig zijn van de bezoeker van je site.

Dit kan je oplossen door een lettertype te nemen dat meegeleverd wordt met de pagina die men bezoekt. De module @font-your-face zorgt daar voor. Je kunt kiezen uit verschillende leveranciers. Sommigen zijn betalend. Ik neem het gratis Google Fonts. De basismodule moet je ook activeren.