D1 les 13

CSS introductie

Omdat we in deze Drupal 2 cursus al vlug met CSS te maken hebben, geef ik eerst deze introductie. Later komt er nog een uitgebreider gedeelte. Ook HTML komt hier aan bod omdat beiden met elkaar verbonden zijn. De afbeeldingen én de CSS code zijn hier te verkrijgen!

CSS staat voor Cascading Style Sheets. Werken met stijlen (style sheets) ken ja al van bvb Microsoft Word.

Het komt er op neer dat je een stijl definieert (vb kop1) en daar een opmaak aan koppelt. Hier zie je de Word instellingen van kop1.

Cascading moet je zien als een soort waterval. De instellingen worden overgeërfd. Als je algemene tekstkleur zwart is, zal kop1 ook zwart zijn (omdat het ook tekst is), tenzij anders ingesteld.Hierboven wordt ze naar blauw omgezet.

Wat is nu het voordeel van het werken met stijlen, in vergelijking met directe opmaak? Wel, als je op je site inhoud toevoegt en een bepaalde stijl toekent, dan zal het thema dit omzetten naar zijn eigen kleuren, lettertypes, eigenschappen...Meer nog, als je een stijl zelf maakt kan je met de CSS te wijzigen overal op je site dezelfde wijzigingen doorvoeren. Daarvoor wordt de CSS centraal beheerd per thema. Het opsplitsen van de inhoud (html) en de opmaak (CSS) is één van de grote verbeteringen en dateert van de HTML 4.0 versie.

Soms wordt CSS tussen de HTML aangebracht. Niet de ideale manier omdat er niet centraal wordt opgeslagen. Wijzigingen moeten dan blad per blad worden aangebracht. Laat ons een zo'n inline opmaak bekijken. We werken met inhoud van het type 'Article' waar we drie voetballers hun afbeeldingen aanbrengen. De figuren zijn niet exact even groot maar toch in dezelfde grootte-orde. Tevens hebben we ook een algemene voetbalfoto in het veld image. Dit om didactische redenen.

We gaan nu met de CKEditor de grootte, rand, uitlijning en marge instellen.

Met als resultaat:

in de broncode zie je dit:

Een afbeelding start met de html syntax (=schrijfwijze) img, gevolgd door een alt (=alternatieve naam voor het geval de foto niet zichtbaar wordt en voor zoekmachines) en een src(=bron waar de afbeelding zich bevindt). Wat daarna komt is inline CSS. Deze manier is niet alleen zeer beperkt, ze is ook niet centraal. Stel dat je op je site alle voetbalfoto's wil een bredere rand geven? Dan moet je voor elke pagina dit opnieuw gaan instellen.

We gaan nu voor de goede manier van werken..Kopieer de afbeeldingen en zet ze onder de andere zonder enige opmaak.

Eerst gaan we de syntax van CSS bekijken:

eerst heb je de Selector. Dit is waarop de CSS moet toegepast worden; hier op kop 1 (H1). Daarna heb je een eigenschap die je een bepaalde waarde geeft. Telkens afgesloten door een punt-komma (niet vergeten!!) en dit alles tussen accolades.

Om CSS zelf aan te brengen kieze we voor de module CSS injector. Zo blijven we uit het vaarwater van de CSS van het thema. Installeer deze module en activeer.

Maak een nieuwe regel (rule) aan. Alles wat tussen /* en */ staat wordt als tekst aanzien.

Pas deze rule toe op je pagina. Je kunt zo inhoudstypes, pagina's selecteren. Als je de rule voor alle pagina's laat staan dan moet je opletten dat je niet te veel rules krijgt, want dan vertraagt het...

Als je nu naar je broncode kijkt dan zie je het bestand dat werd ingeladen: (als je er op klikt dan zie je de code zelfs)

Nu gaan we onze afbeeldingen via CSS een nieuwe grootte geven. De selector zetten we img (afbeeldingen) en voegen onderstaande code toe.

Kijk naar het resultaat...elke foto werd tot dit formaat omgezet. Dit is niet de bedoeling, maar wel logisch. img staat inderdaad voor elke afbeelding. -- Doe de code weer weg of zet ze als commentaar.-- Hoe kunnen we nu onderscheid maken? We gaan een klasse (=class) maken.

Een klasse begint met een puntje!!! Voor de rest kan je op http://www.w3schools.com perfect volgen wat de rest van de code betekent. Float heeft te maken met de uitlijning, anders staan ze onder elkaar. Margin zorgt voor een afstand tussen de afbeeldingen. Doe de moeite om op de site eens te gaan kijken naar de betekenis en de mogelijkheden. Je kunt er zelfs alles uittesten. Als je dit hebt ingebracht en je kijkt naar je pagina zal je nog niets zien. Je hebt wel een klasse aangemaakt maar de afbeeldingen weten nog niet dat ze bij die klasse behoren!. voeg voor elke figuur de class toe:

Het resultaat (zonder de verschillende randkleuren):

Je ziet dat de randen een verschillende kleur hebben, horend bij het land van de speler. Daarvoor heb ik per land een ID aangemaakt: Klassen zijn de algemene instellingen, de ID zijn de specifieke CSS instellingen ervan.

Met als CSS code: (de kleuren kan je met color picker gaan pikken..)

We hebben nu spelenderwijs 3 soorten selectors gezien (html, klassen en id's). Soms kan je die combineren. Typ daarom de namen van de voetbalspelers en geef ze een div mee (en division is een soort container met een eigen opmaak)

Ik maak eerst een division, die ik nog eens drie maal opdeel. Er is zelfs een knop voor in de CKEditor. De eerste div zorgt er voor dat er niet meer gefloat wordt: clear;both. Daarna ken ik een klasse en een id toe. Als je nu naar het resultaat kijkt zal je verbaasd zijn. De hoogte staat bijvoorbeeld nog op 300px.

Alles wordt evergerfd maar als het om een div en niet om een img bvb, dan zijn bovenstaande codes van toepassing. Padding zorgt voor de ruimte van de tekst met de rand.

Tenslotte heb ik me niet kunnen inhouden.. Als je nog eens een foto bijplaatst dan ken je de tekst zelfs laten over de foto komen. Ik ga hier om didactische redenen eens de inline CSS gebruiken:

Ik voeg een foto in en zorg weer voor de naam. Normaal gezien komt de naam nu rechts van de foto te staan. Vandaar dat ik nu de relatieve positie ga wijzigen. Ik schuif ze links op door negatieve px te gebruiken en ook naar onder met top. Tevens zet ik de zichtbaarheid op 50%. Je moet het een beetje berekenen en uitrpoberen.. Test ook altijd alles eens uit met verschillende browsers. Sommige CSS is nog niet veralgemeend..

Tenslotte hadden we nog een foto in het veld image. Hoe ga je daar de opmaak van wijzigen?

Hier kan je standaard geen CSS klassen en ID op toepassen, maar je hebt natuurlijk de afbeeldingstijl van de weergave, waar je het formaat kunt instellen. Deze afbeeldingstijl wordt door php gemaakt, waarbij van elke afbeelding er een bepaalde versie wordt aangemaakt. Geen CSS dus!

Als je de modules Field Formatter Settings en Field Formatter class installeert en activeert, dan kan je ook op velden van het inhoudstype CSS toepassen. In Drupal 3 wordt daar dieper op in gegaan, maar je kunt al eens proberen. Moeilijk is het niet.

Zo stel je de klasse in bij de weergave van het inhoudstype:

In je CSS bestand moet je natuurlijk deze klasse hebben aangemaakt.