8. WordPress: style.css aanpassen: intro

Tijd om onze opmaak te verzorgen. In dit hoofdstuk trachten we je aan te leren hoe we het style.css bestand aanpassen om onze site uniek te laten uitzien.

In ons css bestand staat nu enkel een stukje code. Dit is om een identiteit toe te voegen aan onze theme.

Introductie tot CSS

Open style.css en richt je browser op je site. Het is handig om ook firefox, Google Chrome en Internet Explorer te gebruiken om het theme te bekijken. Een spijtige zaak aan css is dat niet alle browser alle functies ondersteunen, dus moeten we zeker zijn dat alles er in orde uitziet in de meest gebruikte browsers.

Voeg onderstaande code toe aan het bestand:

body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background: #ffffff;
color: #000000;
}

Uitleg:

Body is een tag, en alles wat je tussen de haakjes { en } plaatst zijn de attributen en waarden. In ons bestandje index.php hebben we de <body> tag gebruikt, en de body tag in het css bestand verwijst daarnaar.
margin: 0; zet alle marges op nul. Je kan dit veranderen naar eender welke waarde. Probeer bijvoorbeeld maar eens 20px uit en bekijk het resultaat. Px staat voor pixels en elke pixel is een stipje op je scherm.
Leer meer over CSS margin.
font-family: Arial, Helvetica, Georgia, Sans-serif; Hier geef je aan welk lettertype je wilt gebruiken op de site. Het is altijd slim om een standaard lettertype te gebruiken, want niet elke computer heeft specialere lettertypes, waardoor ze je site niet te zien krijgen in het juiste lettertype maar een standaard lettertype. Dit kan uiteraard verschillen geven in het uiteindelijke design.
font-size: 12px; Dit is het bepalen van de grootte van het lettertype.
text-align: left; Hiermee zorgen we ervoor dat de tekst aan de linkerkant begint.
vertical-align: top; En dit bepaald dat alles start vanaf de bovenkant van het scherm.
background: #ffffff; Hiermee geven we aan de we een witte achtergrond willen. #ffffff is de hex code voor wit. Je kan ook hetvolgende gebruiken: background: white;
Het voordeel van hex codes is dat je ongelofelijk veel kleuren kunt gebruiken (bijvoorbeeld blauw, lichtblauw, nog lichter blauw, …)
color: #000000; Hiermee stellen we in dat de tekst een zwarte kleur krijgt.

Hex codes en stijl geven aan de links

Eerst wat uitleg over de Hexadecimal Codes (hex-codes):
Deze worden steeds voorafgegaan door een hekje (#) en gevolgd door 6 tekens van letters of cijfers.
Dit gaat van #ffffff (wit) tot #000000 (zwart). Nog meer voorbeelden:
#ffffff, #eeeeee, #dddddd, #cccccc, #bbbbbb, #aaaaaa, #999999, #888888, #777777, #666666, #555555, #444444, #333333. #222222, #111111
De kenmerken: De eerste twee tekens staan voor rood, de twee tekens daarna staan voor groen en de laatste twee tekens staan voor blauw.
#ff0000 is tood. #550000 is donker rood. #220000 is nog donkerder rood. #00ff00 is groen. #0000ff is blauw. #ffff00 is geel. #ff00ff is violet.

De volgende stappen:
Typ volgende code onder de body{ } selector:

a:link, a:visited{
text-decoration: underline;
color: #336699;
}

Uitleg:
A:link duidt aan dat als er hyperlinks zijn, we al deze links een andere stijl geven door wat we tussen de haakjes plaatsen.
A:visited duidt alle links aan die reeds bezocht zijn op de website.
Text-decoration: underline; – Hier bepalen we dat alle links onderlijnd worden.
color: #336699; – Dit kennen we al, we geven de links nu een lichtblauwe kleur mee.

Volgende zaken kun je definiëren met text-decoration:

Text-decoration: none;
Text-decoration: underline;
Text-decoration: overline;
Text-decoration: line-through;
Text-decoration: blink;
Text-decoration: inherit;

Typ vervolgens op het einde van het bestand volgende code:

a:hover{
text-decoration: none;
color: green;
}

Hier bepalen we dat er geen tekst onderlijnd is als we met onze muis over de link gaan (dit is hoveren) en dat de link in het groen kleurt.

Je css bestand zou er nu als volgt moeten uitzien:

wp-serie-23-css-introductie

Het resultaat op je website zou ongeveer hierop moeten lijken:

wp-serie-24-css-resultaat

Width en floating in css

Dit zijn weer twee heel belangrijke begrippen in css.
Width duidt de breedte aan dat een pagina of een deel van de website moet worden. Je kan deze grootte bepalen met pixels (px) em’s of in percentages uitdrukken.
Floating is het Engelse woord voor zweven. Je kan bepaalde delen (zoals bijvoorbeeld de inhoud in een DIV) links of rechts laten zweven. Zo kan je de inhoud links laten zweven en de sidebar rechts laten zweven zodat ze naast elkaar kunnen staan.

Breedte bepalen
De breedte van je website moet je zelf bepalen. Het is afhankelijk van de gebruikte resolutie van je bezoekers, maar zoiets weet je natuurlijk niet. Veel laptops hebben een scherm van 15 inch, maar een vaste computer zal wellicht al een iets groter scherm hebben, en dat kan al snel grote verschillen geven in de gebruikte resoluties.
Vandaag de dag gebruiken de meeste computers een resolutie van 1024 x 768 pixels of hoger. Het lijkt ons dus veilig om te kiezen voor een breedte van 1000 pixels.

We gaan dit ook gebruiken voor onze theme:
Voeg toe: <div id="wrapper"> na <body>
Voeg toe: </div> voor </body>

Typ vervolgens onderstaande code in style.css:

#wrapper{
margin: 0 auto 0 auto;
width: 1000px;
text-align: left;
}

In de css-code duiden we een DIV aan met een hekje: #
De tekst erna is dan de benaming die we in index.php hebben gegeven aan de DIV.

Verdere uitleg:
margin: 0 auto 0 auto; Dit betekend een marge van: 0 bovenaan, een automatische rechter marge, een marge van 0 onderaan en een automatische marge links.
We gebruiken 2x een automatische marge voor de linker en de rechterkant. Dit betekend dat alles ertussen in het midden wordt geplaatst. Als iemand met een zeer grote resolutie de site bekijkt, zal hij alles netjes in het midden zien staan.
width: 1000px; een breedte van 1000 pixels instellen.
text-align: left; De tekst wordt links uitgelijnd binnenin de wrapper DIV.

Om alles in alle browsers er netjes te laten uitzien gaan we volgende code veranderen:
Verander in style.css text-align: left; binnenin body{} naar: text-align: center;
Zo zal alles dat niet binnenin de wrapper valt gecentreerd worden, alsook de wrapper zelf.

Floating:
Ten eerste gaan we de float van de header bepalen in style.css:

#header{
float: left;
width: 1000px;
}

Dan gaan we nu de container float meegeven in style.css:

#container{
float: left;
width: 750px;
}

De volgende stap is uiteraard de sidebar:

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
}

Heb je erop gelet dat we een punt hebben gebruikt in plaats van een hekje? Dit komt doordat we een class hebben toegevoegd in index.php en geen ID. Aangezien er meerdere sidebars kunnen gemaakt worden was het toevoegen van een class hier de betere keuze.

Tot slot gaan we de basisbepalingen toevoegen van de footer:

#footer{
clear: both;
float: left;
width: 1000px;
}

In de footer hebben we iets nieuws toegevoegd: clear: both;
Dit zorgt er voor dat de footer zich niet vasthecht aan de sidebar of de container en dus apart behandeld wordt.

Heb je ook de rekensom gemaakt bij de breedtes?
Container: 750 px + sidebar: 240 px = 990 pixels in totaal

Wat met de overige 10 pixels?
Deze gaan we gebruiken om een marge toe te voegen tussen de container en de sidebar. Verander de sidebar codes naar het volgende:

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}

Dit voegt een 10px marge toe aan de linkerkant van de sidebar.

We gaan de sidebar nog eens aanpassen. Omdat Internet Explorer soms fouten geeft gaan we display: inline; toevoegen zodat je sidebar codes er als volgt gaan uitzien:

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;
}

Sla alles nog eens op en bekijk het resultaat.

Tot zover de intro, we gaan verder met het stylen van de titel, de teksten van de artikels, de navigatie en in een volgende hoofdstuk de sidebar;

css resetten

We gaan eerst de css een beetje resetten. Volg hiervoor deze instructies:
Weghalen van de meeste margins en paddings; typ de volgende codes boven de body{} selector in

style.css:
body, h1, h2, h3, h4, h5, h6, blockquote, p{
margin: 0;
padding: 0;
}

Nota: als alle waarden 0 zijn zoals hierboven dan is het voldoende om één keer nul te plaatsen. Hetzelfde geldt ook voor de padding. Later gaan we de margins en paddings toevoegen waar we ze effectief willen.

Het is slim om een volledige reset door te voeren van alle codes. Dit betekend dan ook dat je zelf alles tot in het kleinste detail kan gaan aanpassen nadien. Meestal wordt er gebruik gemaakt van een standaard bestandje (meestal reset.css genaamd).
Omdat er nogal veel codes zijn geef ik het bestandje met plezier mee: download reset.css.

Plaats het bestandje in je theme folder, open vervolgens style.css en typ bovenaan volgende code in:
@import url('reset.css');
Dit houdt in dat we gaan we verwijzen van het ene css-bestand naar het andere css bestand, zo kunnen we ook alles netjes onderscheiden.

De titel stylen.

We gebruiken volgende code:

h1{
font-family: Georgia, Sans-serif;
font-size: 24px;
padding: 0 0 10px 0;
}

Uitleg:
font-family: de font bepalen, je kan hier zelf een beetje uittesten en kiezen wat je zelf mooi vindt.
font-size: 24px; We geven de title een aparte grootte, wat nodig is om het te onderscheiden van de overige tekst.
padding: 0 0 10px 0; Dit betekend dat er onderaan de titel een padding werd toegevoegd. Dit is de lege plaats onder de titel en de omschrijving van je blog.

De teksten een opmaak geven in css

We gaan er nu voor zorgen dat de teksten er ook wat beter uitzien, volg de instructies:

Typ onderstaande codes onder #container{}:

.post{
padding: 10px 0 10px 0;
}

Toevoegen van een witte ruimte boven en onder alle DIV’s die een class ‘post’ hebben.

.post h2{
font-family: Georgia, Sans-serif;
font-size: 18px;
}

We bepalen hoe de titel van onze artikels, dat we een h2-tag hebben meegegeven er uitziet door er een font aan te linken en de grootte van de tekst in te stellen. Zoals je zal zien zal dit geen invloed hebben op de subtitels die in de sidebar staan.

.entry{
line-height: 18px;
}

Elk lijntje binnenin de DIV met class entry hebben we nu wat meer ruimte gegeven.

Om de organisatie een beetje te behouden gaan we nu onder a:hover{} volgende code typen:

p{
padding: 10px 0 0 0;
}

We willen een beetje ruimte tussen elke paragraaf, dus hebben we daar nu een 10px aan lege ruimte bovenaan elk paragraaf toegevoegd met deze code.

En we gaan verder: typ na .entry{}:

p.postmetadata{
border-top: 1px solid #ccc;
margin: 10px 0 0 0;
}

Herinner je je dat we eerder aan onze postmetadata eerder een class hebben meegegeven? Nu bepalen we dat er een bovenrand (border-top) aan toevoegen met een volle lijn (solid) dat een grijze kleur (#ccc) heeft. We bepalen tevens dat er een marge moet zijn van 10 pixels aan de bovenkant.

Op het gebied van randen kan je een gebied (onze DIV) ook de onderkant of rechterkant een stijl geven:

border-top
border-left
border-bottom
border-right

De navigatie opmaken in css.

Onder p.postmetadata{} gaan we het volgende bepalen:

.navigation{
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}

Kan je al raden wat we hebben gedaan?
We hebben een lege ruimte toegevoegd van 10 pixels boven de navigatie;
We hebben de font grootte bepaald op 14 pixels;
font-weight: bold; dit houdt in dat we de tekst in het vet laten zien.
En we hebben een beetje meer ruimte gelaten tussen de lijntjes tekst, dit hebben we eerder ook al gedaan bij de class entry.

Neem even een goede pauze, wrijf eens door je ogen en bekijk het resultaat. Dat ziet er al een pak beter uit hé?

wp-serie-25-css-snapshot

Ik hoop dat je deze intro in css de moeite vond. In het volgende hoofdstuk gaan we de sidebar stylen en een aantal referenties meegeven zodat je steeds weet waar je de beste css oplossingen kan terugvinden.

Wordpress theme maken of toch kopen?

Een Wordpress theme maken vergt veel werk, al is wat extra kennis altijd welkom. We maken zelf geen sites meer maar gebruiken nu de themes die terug te vinden zijn op: Theme Junkie. theme junkie Je kan op hun website ook gratis Wordpress themes terugvinden en downloaden!

Deze website gebruikt cookies om jou de beste ervaring te kunnen geven. Door deze website te gebruiken ga je hiermee akkoord. Meer info

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close