Les 6

Werkmaterialen Page

ALLE CSS

Voorbeeldsite: cursist6.drupalfun.nl/werkmaterialen

Les 4: extra tips

In les 4 waren we begonnen aan een landingspagina voor de werkmaterialen. Hieronder heb ik deze oefening nog eens opnieuw gemaakt in AT-themes en een extra blok uitgeschreven. Hieronder krijg je ongeveer dezelfde foto te zien als in les 4, maar dan in AT-themes. Elke regio is opnieuw opgenomen met hier en daar enkele extra tips.

regio

Regio 1

  1. Maak een nieuw blok aan met het logo en de sitenaam. Leg op de afbeelding een link naar de <front>.
  2. Plaats het blok in het gebied Header First, enkel op de pagina van de /werkmaterialen
  3. Verberg het blok Site branding en Main Menu op de pagina van de /werkmaterialen

--> wil je naar de andere onderdelen van de site, klik dan op het logo

Regio 2

  1. Plaats dit blok in Content Prefix
  2. Let op, dit zal een verkeerd beeld geven op een iPhone. Bekijk de CSS hiervoor grondig. (zie ook uitgelegd in Regio 9!)

Regio 3

Deze is perfect te maken met de module Flexslider. Echter kan je hier de vorige les op toepassen. Probeer hier Fotorama werkend te krijgen.

Zelf heb ik het zo opgelost:

  1. Twig Field toevoegen bij het inhoudstype 'Afbeeldingen werkmaterialen' (daarin zit een node met al mijn afbeeldingen van het materiaal)
  2. Fotorama opgeroepen in het twigfield
  3. Blok maken via een overzicht (inhoud van het type afbeelding werkmaterialen)
  4. Twig-veld toegevoegd
  5. Blok een plaats gegeven
  6. Aanpassingen doen aan de instellingen van fotorama in deze context (vb: willekeurige volgorde, geen thumbnails, aanpassingen aan de hoogte indien nodig,...)
  7. Probeer ook om een caption op elke afbeelding te krijgen

Regio 4

  1. Het thema zorgt voor een witte boord rond dit veld. Ik heb dat aangepast via CSS (zie CSS-file)
  2. Ik rond de hoeken af op 15pt

Regio 5

Zorg dat je dit blok in het geheel kan aanspreken zonder algemeen te gaan. Koppel dus een klasse aan dit blik via een <div>. Dit staat uitgebreid uitgeschreven bij Regio 9

g

Als je klikt op de tekst in dit blok, dan kom je bij de troffels terecht.

Regio 6

  1. Plaats dit blok in de Content Suffix
  2. Pas de kleur van de pijltjes aan
  3. Zorg dat de pijltjes niet worden getoond op een iPhone

Regio 7

Dit is een overzicht van taxonomievelden

  1. Voeg een afbeeldingsveld toe aan de woordenlijst 'brand'
  2. Voeg de verschillende merkenlogo's toe
  3. Plaats het blok in de content suffix
  4. Met een afbeeldingsstijl en wat CSS kan je ze naast elkaar zetten
  5. Klik je op een logo dan kom je bij die taxonomieterm uit

Regio 8

Pas de achtergrond van de gehele site aan.

Regio 9: "Scroll blok"

Voorbereiding

  1. We werken met het thema werkmateriaal van in de vorige les. In die oefening heeft iedereen al zeker een pagina gemaakt, speciaal voor de werkmaterialen. We maken daar een 'Scrollblok' aan en gebruiken daarvoor:

DEZE FOTO

of

DEZE FOTO

  1. Bewaar beide foto's ergen op de PC.
  2. Deze foto's moeten nu op de server geraken. Dan kan via IMCE, maar ik heb graag controle en steek ze handmatig in een map via het bestandsbeheer in Cpanel.

/sites/default/files/inline-images

inline images

Blok maken

  1. Ga naar uw site
  2. Maak een nieuw blok aan met de tekst:
  3. Onze werkmaterialen
  4. zijn de beste!!
  5. Meer info
  6. Op de woordengroep 'Meer info' leg je een link naar google.be (in het echt link je naar de contactpagina van de site)
  7. Zorg dat alles centraal staat

go

  1. In de broncode, koppelen we een klasse die in de injector gaan uitschrijven. Deze klasse wordt via een <div> gekoppeld. Als we het blok rechtstreeks moeten aanspreken dan zitten we te ruim en is er bijvoorbeeld een kans dat alle blokken aangepast worden.

broncode

  1. Ik geef de titel niet weer en zet het geheel voorlopig in de Content Suffix
  2. Maak een nieuwe regel aan in de CSS injector en voeg reeds een achtergond toe:

.debeste{
  background-image: url("/sites/default/files/inline-images/optie2.jpg");
}

  1. Je zal merken dat de achtergrond een feit is. We voegen nu volgende code toe:

.debeste{
  background-image: url("/sites/default/files/inline-images/optie2.jpg");
  height:300px; /*hoogte van het blok*/
  background-repeat:no-repeat; /*de achtergrond hoeft zich niet te herhalen*/
  background-attachment: fixed; /*de afbeelding blijft staan, scrolt niet mee*/
  color: #df2d4e;
  font-size: 3em;
  font-weight: bold;
  padding-top: 50pt;
  line-height: 1em;
  font-family: monospace;
  text-shadow: 2px 4px 5px #af0202;
}

  1. Aan u om zelf de tekstopmaak aan te passen.
  2. Om ook de link goed te krijgen: ( +eventueel onderlijnen in de body)

.debeste a{
  color: #df2d4e;
}

  1. Dit werkt nu goed op een computer. Bekijk je dit op een iPhone, dan krijgen we geen afbeelding te zien. Dit is oplosbaar met CSS:

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2){ /*achtergrond scrollblok op iPhone bron:https://css-tricks.com/snippets/css/media-queries-for-standard-devices/…
    .debeste{
      background-attachment:scroll;
      background-position: center;
      background-attachment:cover;
      padding:5pt;
    }
}

Regio 10

Gebruik DEZE afbeelding voor de achtergrond van de gehele pagina. Zet deze achtergrond ook fixed.