Inhoudstype met Paragraaf

Inhoudstype met Paragraaf

voorbereiding.png Voorbereiding:

  • Maak 3 nieuwe paragraaftypes aan lesfiche-.png

 

instructions.png Instructies:

1. Maak een nieuw inhoudstype aan: Inzendingen

menu_0.png Beheer - Structuur - Inhoudstypen - Inhoudstype toevoegen

Wijzig het label van  het standaardveld Body naar "Commentaar bij de inzending"

2017-05-01 09 56 33-Commentaar bij de inzending-instellingen voor Inzendingen   Drupal

en voeg een nieuw veld toe: Paragraaf en geef het als label: paragraaf

2017-04-29 11 34 12-Veld toevoegen   Drupal2017-04-29 11 35 17-Veld toevoegen   Drupal

zet de toegestane waarden op onbeperkt

2017-04-29 11 36 16-Paragraaf   Drupal

je kan instellen welke paragraaftypes mogen gebruikt worden. Vink je niets aan dan zijn alle types bruikbaar. 

2017-04-29 11 37 15-Paragraaf-instellingen voor test   Drupal

 

2. Inhoud toevoegen aan het inhoudstype Inzendingen

We gaan inhoud toevoegen aan het inhoudstype Inzendingen

menu_0.png Beheer - Inhoud - Inhoud toevoegen - Inzendingen

Vul de titel en het commentaar in (commentaar hoeft niet).

2017-04-29 11 44 10-Inzendingen Johannes Vermeer bewerken   Drupal

Kies daarna het paragraaftype tekst + 1 afbeelding en  plaats wat tekst en een afbeelding.

2017-04-29 11 45 57-Inzendingen Johannes Vermeer bewerken   Drupal2017-04-29 11 46 05-Inzendingen Johannes Vermeer bewerken   Drupal

Gebruik nu het paragraaftype afbeelding + tekst + afbeelding en plaats de tekst en de beide afbeeldingen

2017-04-29 11 48 45-Inzendingen Johannes Vermeer bewerken   Drupal 2017-04-29 11 49 11-Inzendingen Johannes Vermeer bewerken   Drupal

2017-04-29 11 48 54-Inzendingen Johannes Vermeer bewerken   Drupal

Als laatste gebruiken we het paragraaftype enkel afbeeldingen en hier geven we da andere afbeeldingen in.

2017-04-29 11 50 48-Inzendingen Johannes Vermeer bewerken   Drupal

 

Merk ook op dat je nadien de gebruikte paragraaftypes nog van plaats kan verwisselen  d.m.v. het vastnemen van het kruisje en naar plaats te slepen

2017-04-29 11 51 54-Inzendingen Johannes Vermeer bewerken   Drupal

css.png  CSS

De verschillende paragraven plakken tegen elkaar, daarom gaan we een padding van 15 px toepassen op de onderkant (padding-bottom:15px):

  • .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-bottom:15px;
    }

 

result.png Resultaat:

2017-04-29 11 53 41-Johannes Vermeer   Drupal