WordPress Woordenboek

WordPress CSS

WordPress CSSCSS staat voor Cascading Style Sheet en is de opmaaktaal waarmee alles wat getoond wordt een eigen tintje gegeven kan worden. Ieder WordPress Thema beschikt over een style.css bestand waarin alle opmaakcodes opgenomen zijn.

Hierin is o.a. opgenomen welk standaard lettertype gebruikt wordt, hoe groot en eventueel vet kopteksten getoond dienen te worden; de witruimte rondom afbeeldingen, etc. Afhankelijk van het gebruikte thema kan zo’n style.css bestand beknopt tot zeer uitgebreid zijn.

De meeste codes zijn begrijpbaar, waardoor aanpassingen aan het thema en dus de uitstraling van uw website eenvoudig te realiseren zijn. Het juist gebruik van CSS-codes brengt wel een aantal regels met zich mee, maar het mooie van CSS is dat bij het maken van een type of structuur -fout, uw website nog wel functioneert; maar de opmaak niet uitgevoerd wordt. Dat in tegenstelling tot het aanpassen van de basisbestanden (php) van het thema die aan strikte programmeer-regels gebonden zijn.

Oorsprong van CSS

Voorheen werden alle website-pagina’s volledige opgebouwd uit HTML-codes waarin ook alle opmaak geregeld werd. Hierdoor werd het HTML-bestand erg groot (in aantal regels), erg ingewikkeld en praktisch onleesbaar. Veel opmaakcodes moesten dan ook herhaald worden en bij een aanpassing van bijvoorbeeld een koptekst die op vele pagina’s gebruikt werd dan ook op iedere pagina aangepast worden.

Dat was niet alleen erg arbeidsintensief, maar ook foutgevoelig. Door de invoering van CSS, is de opmaak in één apart bestand geregeld en bij een aanpassing in het CSS-bestand wordt de opmaak consequent op iedere pagina doorgevoerd.

CSS Aanpassen

Het aanpassen van css-codes en daarmee de opmaak van de diverse element op uw website te veranderen kan op diverse manieren. Het style.css bestand vindt u direct terug in de map /wp-content/themes/ van uw WordPress installatie en kunt u downloaden via bijvoorbeeld FileZilla, dan met iedere met iedere basis tekstbewerker (onder Windows bijv. Notepad) te bewerken en dan weer te uploaden om de wijzigingen te bekijken.

Om het downloaden en uploaden te besparen, kunt u ook direct in het beheerderspaneel bij “Weergave → Editor” het bestand openen en aanpassen:

WordPress CSS Aanpassen

WordPress Thema Editor

Het active thema en de thema-bestanden (rechts) worden dan automatisch geselecteerd en het style.css bestand met alle opmaak-codes getoond. U kunt dan hierin aanpassingen verrichten, die opslaan en het effect in uw internetbrowser bekijken.

Het direct aanpassen van thema-bestanden is niet aan te raden, daar bij een update van het thema de aanpassingen verloren zullen gaan. Het aangepaste bestand wordt namelijk overschreven door de update.

Heeft u bij de themabestanden in dit scherm een css-bestand geselecteerd krijgt u ook de melding (boven de editor) dat u gebruik kunt maken van de “ingebouwde CSS editor“. Klikt u op die link dan komt u uit op de “Customizer” van WordPress, en kunt u wijzigingen of toevoegingen aan het css-bestand doen zonder dat u de oorspronkelijke codes ziet:

WordPress Customizer Extra CSS

Extra CSS

Het voordeel van het werken via dit scherm is dat aangebrachte wijzigingen direct zichtbaar zijn. In dit voorbeeld hebben we de kleurcode voor het vet maken van tekst naar rood veranderd. Links staat dan de code en rechts zien we hoe het er op de pagina uit komt te zien. Bevalt het, dan dient alleen nog op Publiceren geklikt te worden om de wijziging door te voeren.

Links onderin hebben we nog de optie om te kiezen voor een PC-monitor, een tablet of mobiel -weergave, zodat ook de aanpassingen te bekijken zijn voor de diverse schermafmetingen (responsive).

Wijzigingen of toevoegingen aangebracht via de Customizer, Extra CSS, worden niet overschreven bij een thema-update.

Dit scherm is ook direct te bereiken via “Weergave → Customizer” en dan voor de optie “Extra CSS” te kiezen.

Child Thema

Het gebruik van CSS-aanpassingen via de WordPress Customizer is een prima optie. Echter bij veel aanpassingen is het altijd beter om de wijzigingen direct aan het style.css bestand toe te voegen. Alle aanpassingen via de WordPress Customizer worden opgeslagen in de database en alles wat in de database door WordPress opgezocht moet worden is een vertragende factor.

Hiervoor gaven we al aan dat aanpassingen aan het originele themabestand niet aan te raden is, omdat die wijzigingen dan verloren gaan bij een thema-update. Die aanpassingen kunnen dan het beste gedaan worden aan een zgn. Child-Theme. Door gebruikt te maken van een Child-Theme blijven alle aanpassingen aan het thema bewaard bij een update.

Wat een Child-Theme precies is en hoe die te gebruiken hebben we beschreven in het onderwerp: WordPress Child Theme.

CSS Codes

Zoals gezegd is ieder element op een website qua styling aan te passen met behulp van CSS. Een element is een paragraaf, een koptekst, een afbeelding; maar ook een HTLM-code. De CSS-codes zijn ondertussen zeer uitgebreid geworden en bevatten honderden codes met op vele codes weer variaties.

Om bijvoorbeeld tekst rood te maken gebruiken we de code “color” met dan een waarde om de kleur aan te geven. Dat kan dan op verschillende manieren:

  • color: #ff0000;
  • color: rgb(255,0,0);
  • color: red;

De grootte van het lettertype wordt aangegeven met de code “font-size” en dan een getal plus de eenheid (pixels, cm) om de grootte van het lettertype te bepalen. Met de code “font-weight” kunnen we aangeven of de tekst vet getoond moet worden en met een waarde daar aan te geven “hoe vet” die dan getoond dient te worden.

En dit zijn dan een paar voorbeelden van codes om alleen de tekst te stylen. Zo is iedere millimeter welke getoond wordt op de website te stylen met CSS-codes.

Vragen & Info

Heeft u vragen naar aanleiding van deze uitleg, stuur ons dan een mail op: info@qwain.nl of geef een reactie via onderstaand reactie-formulier.

Ondersteuning staat bij ons op nummer 1, wij zijn u graag van dienst !

Op de hoogte blijven van alle WordPress Nieuwtjes, Tips & Tricks… volg ons dan op Facebook .

 

 

Bijbehorende onderwerpen