Les 3

Bootstrap thema

  1. We installeren het Boostrap thema. Reden: bootstrap css
  2. Installeer Bootstrap als standaard thema
  3. Bekijk het eerste resultaat
  4. --> schakel alle overbodige blokken uit
  5. Ga naar de instellingen van het thema
  6. Verander de container naar een Fluid container. Dat heeft als effect dat de site de volledige breedte van het scherm gaat innemen

fluid

  1. Pas de instellingen van de navbar aan. Inverse zorgt voor een donkere navigatiebalk en Fixed Top plaats de menubalk gefixeerd bovenaan (blijft staan tijdens scrollen)

navbar

Background Image met CSS

De achtergrond van de site kan je het beste met CSS gaan aanpassen. Er bestaan hier ook een aantal modules voor, echter denk ik dat CSS een betere optie is. Hoe meer modules je gaat installeren, hoe groter de kans dat dit de performance van de site gaat beïnvloeden. Maw. gebruik zoveel mogelijk CSS. 

Op de pagina van de vogels plaatsen we een achtergrond, wit is maar wit. Wij werken hier met een afbeelding, uiteraard is het aanpassen van de kleur ook mogelijk.

In dit specifieke thema spreken we de body-tag aan. Dit is HTML-tag, in de code is een puntje dus niet nodig. Als je strak in de injector gaat werken, pas deze code dan enkel toe op onze tuinvogels.

Background Color

Test deze code eerst eens uit:

body
{
  background-color:blue;
}

Background Image no repeat / fixed

Wanneer we met abeeldingen werken is het natuurkijk noodzakelijk om een foto up te loaden op de server. Dit doe je in

/sites/default/files/bakcgroundimages/...

In bovenstaande heb ik de map backgroundimages zelf aangemaakt. Als de map aangemaakt is plaats je via FTP de nodige afbeeldingen in die map. Geef deze afbeeldingen een gemakkelijke en logische naam.

Werk je met één afbeelding, zorg er dan voor dat de afmetingen groot genoeg zijn. Indien deze te klein is krijg je een lelijk resultaat. Op voorhand de afbeelding wat opmaken kan ook geen kwaad.

Download hier een foto als je zoeken niet ziet zitten

Uiteindelijk ziet de code er zo uit:

body
{
  background-image:url("/sites/default/files/background_image/sky.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Background Image repeat / fixed

Je moet maar eens googelen op de term 'background repeat birds'. Je krijgt dan een hele hoop kleine afbeeldingen die je op de site kan toevoegen als achtergrond. In de code laat je deze repeaten, de kleine afbeeldinge zal dus steeds opnieuw naast en onder elkaar worden toegevoegd. Je krijgt op die manier dus één aansluitend geheel. Vaak kiezen mensen voor patronen zoals hout, marmer, bakstenen, reliëf, behangpapier.. Als je op deze manier te werk gaat, zorg er dan voor dat het geheel niet te druk overkomt. Kan je doen door de afbeelding wat doorzichter te maken. Persoonlijk doe ik dat laatste op voorhand, voor ik ga uploaden met FTP.

Download hier een afbeelding om tijd te winnen

De code ziet er zo uit:

body
{
  background-image:url("/sites/default/files/background_image/birdsrepeat.jpg");
  background-repeat: repeat;
  background-attachment: fixed;
}

Responsive block (views + CSS)

Dit is een geheel andere oefening. We maken een blok aan dat als eye-catcher op de homepage zal verschijnen. We gebruiken hier CSS maar ook de Bootstrap-classes. (Ik ben veranderd van thema omdat Adaptive Theme Bootstrap niet ondersteund, jammer.)

De inhoud

  1. Maak een inhoudstype aan: fotospecial
  2. Voeg deze inhoud toe in het nieuwe inhoudstype. In totaal 6 nodes!

nodes

  1. Bij de weergave heb ik het label verborgen en de afbeeldingen de stijl 'Gemiddeld' gegeven. Met de node zelf moeten we in deze oefening niet aan de slag.

Het overzicht

  1. Maak een nieuw overzicht aan.
    1. Naam: fotospecial
    2. Inhoud van het type fotospecial
    3. Blok aanmaken
    4. Onopgemaakte lijst van velden
  2. Voeg volgende velden toe:
    1. Titel (reeds aanwezig)
    2. Afbeeldingen
    3. Aangepaste tekst (zie lager)
  3. Bij de meervoudige veldinstellingen van de afbeelding kies je ervoor om maar 1 van de 6 foto's weer te geven, je kan zelf kiezen welke

afbeeldingen

  1. Herschrijf het veld titel. We maken van dit veld een paragraaf door middel van HTML. Dat omdat we dan later in de css dit veld eenvoudig kunnen aanspreken

herschrijven

  1. Pas nu het veld 'aangepaste tekst aan'. We herschrijven dit veld en voegen onze twee andere velden toe, gebruik de tokens. Daarnaast gaan we het volledige veld ook weergeven als link. Zo klikt de gebruiker waar hij wilt.

tekst

herschrijven

  1. Verberg de twee andere velden afbeeldingen en title

verbergen

  1. Tot slot passen we op deze view Bootstrap CSS toe. De classes die hieronder gebruikt worden kan je enkel gebruiken omdat het thema Bootstrap werd geïnstalleerd. Het geheel steken we in een container. Geen fluid-container omdat het blok anders wordt uitgerokken over de hele breedte van het scherm. Bij de onopgemaakte lijst voegen de de klasse col-sm-4 toe. Dat zal ervoor zorgen dat onze inhoud in drie kolommen wordt geplaatst (12 / 4).

container

col

De afwerking met CSS

De nodige css kan je hieronder kopiëren. Ik neem wel even de tijd om de code te analyseren. Uiteraard zal deze code niet werken als we deze niet koppelen aan onze vieuw.

(in onderstaande code is er zeker één regel geheel overbodig...)

.fotospecial img /*css op de foto*/

{

  box-shadow: 10px 10px 5px #888888;/*geeft een schaduw op de afbeeldingen*/

  opacity: 1;/*de foto wordt met normale helderheid weergegeven*/

  -webkit-transition: .3s ease-in-out;/*0,3 seconden als het over de overgang gaat*/

  transition: .3s ease-in-out;

}

.fotospecial img:hover /*css bij hoveren*/

{

  opacity: .5;/*bij hoveren wordt de foto onscherper met factor 0,5*/

}

 .fotospecial p /*css op de paragraaf, de titel in ons geval*/

{

  position:relative;/* The element is positioned relative to its normal position*/

  bottom:60px;/*ten opzichte van de onderkant komt er 60px bij*/

  left:6px;/*links voegen we 6px bij*/

  color:#fff;/*tekstkleur*/

  padding:0.5em 0.7em;/*afstand tekst ten opzicht van het eigen element*/

  background: rgba(17, 17, 17, .5);/* achtergrondkleur van het element 0,5 staat voor transparantie*/

  display:inline;/* Displays an element as an inline element (like <span>). Any height and width properties will have no effect*/

  font-size:200%;/*we gebruiken een percentage voor de tekstgrootte, zo werken we responsive*/

}

.fotospecial p:hover /*wat als we hoveren over de tekst*/

{

  text-transform:uppercase; /*de tekst wordt in drukletters geplaatst*/

}

.fotospecial a /* wat met de link*/

{

  text-decoration:none; /*geen decoratie, thema’s zetten onder linken vaak standaard een lijn*/

  color:#f0de4b; /*de kleur van de link bepalen we ook zelf, niet het thema*/

}

Finetuning

  1. Voeg wat inhoud toe van het type Basic Page en maak hiervan de hompage
  2. Met CSS zorg je ervoor dat zowel de page-title (Welkom) als de tekst zelf (body) centraal komt te staan
  3. Zowel de Page-title als de tekst mag wat groter worden weergegeven, dat kan ook met CSS
  4. Zorg voor een passende achtergrondkleur op het blok. Enkel op dat blok uiteraard. Je zal hier dan ook best wat spelen met afstand, het blok plakt te veel tegen de bovenkant van de site.

afgewerkt blok

  1. De keuze van kleuren op een website is enorm belangrijk. Zelf vind ik dat behoorlijk moeilijk. Op deze site kan je kleurenpaletten gaan samenstellen en de codes vervolgens implementeren in je CSS-code. Gebruik deze site om de gehele frontpage een aangenaam ogend kleurenpalet te geven:

http://paletton.com/#uid=13f0u0kd0vl00++3YR7mJlBRX8v

  1. Het logo van de site is een screenshot van mijn palet dat ik op paletton heb gekozen
  2. Ik heb de site-naam verborgen
  3. Ik heb met CSS de menulinken een passende kleur gegeven en deze wat vergroot
  4. Bij onze vogels koos ik uiteindelijk voor de sky.jpg als achtergrond en verborg ik de PageTitle
  5. De volledige CSS code kan je HIER downloaden ter inspiratie.

Extra oefening

Maak een overzicht aan dat de verschillende tuinvogels weergeeft. Dit overzicht wordt getoond op de frontpage. Enkele tips:

  1. Verwijder de afbeeldingen in de node van de vogels die afwijkend zijn qua afmetingen (de fazant bijvoorbeeld)
  2. Maak een blok aan en geen page
  3. Gebruik de Bootstrap Classes om de vogels in 6 kolommen weer te geven, je mag de container fluid maken
  4. maak gebruik van het herschrijven van de velden, zo kan je de alt-tekst gemakkelijk implementeren
  5. Voor de afbeeldingen gebruik je de standaard afbeeldingsstijl 'gemiddeld'
  6. Maak van de alt-tekst een h5
  7. Gebruik CSS om alles op zijn plaats te krijgen

birds blok front