Stay In Touch
Een WordPress website stijlen – 2

7 CSS tips om een eigen stempel op jouw WordPress childtheme te drukken

Deze tutorial is een vervolg op ‘Het stijlen van een WordPress website’. Het kan wellicht handig zijn deze te bekijken, voordat je verder gaat.
Ben je nog helemaal nieuw met WordPress, laat je dan eerst overtuigen dat een WordPress website de beste keuze is.

Je hebt een WordPress childtheme aangemaakt en weet hoe je met Firebug van Firefox de juiste css elementen kunt selecteren om te restylen in jouw childtheme style sheet.
Het lukt je wat kleuren te wijzigen, maar eigenlijk veel meer nog niet. Hieronder geef ik je 7 CSS tips die handig zijn bij het restylen van jouw childtheme.

  1. Hyperlink

    Een hyperlink wordt in HTML en CSS weergegeven door de letter a. Er zijn vier statussen waarin een hyperlink kan verkeren.

    • Gewone status: a
    • Visited status: a:visited
    • Hover status: a:hover
    • Active status: a:active

    Stel dat de hyperlinks in het hoofdthema van jouw keuze een kleur hebben meegekregen, die niet aansluit op jouw huisstijl. Ga naar de style sheet van jouw childtheme en typ:

    Wordpress css screenshot 1

    Wordt de hyperlink onderstreept en wil je dat niet,
    typ dan het volgende:
    -
    a {text-decoration: none}

    Wil je met groen duidelijk maken dat de bezoeker al op de hyperlink geklikt heeft, dan type je:

    a:visited {color: #044c29}

    Voor een ander effect bij het met de muis over de hyperlink gaan, typ je bijvoorbeeld:

    a:hover {text-decoration: underline}

    De status active wordt vooral gebruikt als er sprake is van een menu. Vaak bestaat een menu uit een lijst met aanklikbare menu-opties (dit zijn dus ook hyperlinks).
    Een menu in HTML wordt opgebouwd uit list items (li) met daarbinnen in de hyperlink (a), het kan daarom belangrijk zijn om ook het CSS element ,span class=”cvss”>li te vermelden in jouw style sheet. Dit geldt voor alle hyperlinks in een menu, dus ook de gewone, hover en visited!

    Hiermee wordt een actieve menu-optie met hoofdletters weergegeven:

    a:active {text-transform: uppercase}

    Let op! Hiermee verander je ALLE hyperlinks in jouw childtheme. Wil je alleen bepaalde hyperlinks een ander uiterlijk geven, dan zul je de class erbij moeten zetten.

    Hoe je de class moet vinden en hoe je dit dan weer in jouw style sheet moet zetten, wordt voorgedaan in de videotutorial na CSS tip 4.

  2. !important

    Dit stukje code heeft mij al heel wat hoofdbrekens bespaard. Soms gebeurt het dat je in de style sheet van jouw childtheme een wijziging wilt aanbrengen, maar deze wordt gewoon niet doorgevoerd. Ergens in de code wordt jouw wijziging toch nog overschreven door een andere instelling.
    Door !important achter de code te zetten, zul je in veel gevallen zien dat jouw probleem wordt opgelost. Zo doe je dat:

    a{color: #99231c !important}

  3. /* */

    Alle tekst wat je in jouw style sheet tussen /**/ zet wordt niet op de website weergegeven. Dit is heel handig om:

    • commentaar in jouw style sheet te zetten, zodat je later weet waarom je voor een bepaalde code hebt gekozen.
    • een indeling te maken op jouw style sheet, zodat het overzichtelijk blijft welke code bij welk stukje van de website hoort.
    • tijdelijk code onzichtbaar te maken, maar niet helemaal te verwijderen.

    In de videotutorial na CSS tip 4 laat ik je zien hoe het werkt.

  4. Display:none vs Visibility:hidden

    Het kan zijn dat je van een bepaalde widget of plugin de bijbehorende titel of stukje tekst niet zichtbaar wilt hebben op jouw website. Je kunt dan kiezen voor display:none of visibilty: hidden.
    Wanneer kies je nu voor de ene en wanneer voor de andere?
    Bij display:none wordt de ruimte die de titel inneemt (deze heeft een vastgestelde hoogte en breedte) niet meer in gebruik genomen. Het element wat daaronder zit, zal dus omhoog schuiven.
    Bij visibility:hidden blijft het element zijn ruimte innemen, maar wordt onzichtbaar gemaakt. Soms kan het handiger zijn de laatste te gebruiken, als allerlei elementen door de code display:none (lelijk) gaan verschuiven.

    In de volgende videotutorial laat ik je het effect zien van deze eerste 4 CSS tips.


  5. Border

    Een border – oftewel rand – wordt in vier zijden opgesplitst: boven, rechts, onder en links. Je kunt alle zijden allemaal dezelfde stijl meegeven, maar ook afzonderlijk stijlen.
    Naast de splitsing in vier zijdes kun je ook nog (per zijde!) drie waardes meegeven: breedte (border-with), stijl (border-style) en kleur (border-color).

    Stel ik heb een menu item dat ik graag een rand wil geven, waarbij alle zijdes 2px breed, gestreept en rood zijn. De code ziet er dan als volgt uit:

    WordPress website css tips

    Als ik de borders allemaal anders er uit wil laten zien, dan zou de code er zo uitzien:

    WordPress website css tips
    Uit webdesign oogpunt niet echt fraai, maar het is mogelijk!

    Wil je helemaal geen border, dan zet je dit in de code:

    #menu li a{border: none}

    Naast de hierboven genoemde stijlen, kun je ook nog kiezen voor: groove, outset en ridge. Gewoon een kwestie van uitproberen!

  6. Background-image

    Je kunt kiezen voor 1 grote foto als achtergrond, maar let op, dat kan ten koste gaan van de snelheid van het inladen van jouw website, waardoor bezoekers misschien afhaken!
    Ikzelf gebruik graag voor de bodyachtergronden kleuren met een verloop (dat noem je in Photoshop gradient) of een filtereffect , waardoor je een bepaald patroontje krijgt.
    Je hebt hiervoor slechts een afbeelding van 1 of 2 pixels breed nodig en een hoogte van rond de 1200 pixels. Door deze dan de herhalen (repeat) krijg je toch een mooie achtergrond over de hele breedte van je scherm, maar zonder de grote hoeveelheid kb’s die jouw website vertragen.
    Door een verloop of een filtereffect te gebruiken, krijgt je achtergrond net even dat extra ‘oempf’ t.o.v. een effen kleur.
    Zo ziet de code er dan uit:

    WordPress website css tips
    Het afbeeldingsbestand ‘achtergrond_body.png’ staat in dit geval in de map ‘afbeeldingen’ in jouw childtheme map op de server.

  7. @font-face

    Niet alle lettertypes worden door alle browsers weergegeven. Lettertypes die het altijd in alle browsers doen zijn bijvoorbeeld Helvetica, Arial, Sans-serif, Tahoma en Verdana, maar ook Georgia, Times New Roman en Trebuchet Ms.
    Maar soms heb je gewoon de wens om een bijzondere lettertype op jouw website te gebruiken. Dat kan zijn om de aandacht ergens op te vestigen, voor de titels of voor een slogan, noem maar op. Voorheen was dat niet mogelijk, maar dankzij het nieuwe css element @font-face.

    Bekijk de volgende videotutorial om te zien hoe dit werkt


Mis je bepaalde tips? Dat kan heel goed! Dit is nog maar het topje van de ijsberg!! Geef aan me door wat je nog meer zou willen weten over CSS, en ik verwerk het in het eerstvolgende blogartikel daarover! Hier vind je zeker alles wat je over CSS wilt weten.

————————————————————————————————–

Yvonne Alefs - webdesigner

Yvonne Alefs is webdesigner bij van Wens naar Website – voor betaalbare doch professionele WordPress websites. Het hebben van een (huis)stijlvolle Facebook- en/of Twitterpagina achtergrond, vindt zij net zo belangrijk als een goed uitziende visitekaartje. Zij ontwerpt dan ook Facebook en Twitterpagina achtergronden bij Pimp mijn Pagina .

Tags:

Comments
Send a Comment

No Comments

De volgende HTML-tags en -attributen zijn toegestaan: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Vind mij op social media!
Link to my Facebook Page
Link to my Linkedin Page
Link to my Twitter Page