Custom CSS plugin
Een heel prettige plugin die ik eigenlijk in elke WordPress-website wel een keer gebruik, is de custom-css plugin. De naam schrikt wellicht een beetje af en het is inderdaad zo dat je iets van css af moet weten om er mee te kunnen werken, maar als je eenmaal door hebt wat het doet en wat het kan, kun je niet meer zonder.
Tegenwoordig hebben de thema’s waar je voor moet betalen, deze plugin vaak al standaard ingebouwd, maar ook bij gratis thema’s kun je beschikken over dit zeer handige gereedschap. Het is namelijk een gratis plugin, die heel eenvoudig te downloaden is. De plugin is al ruim 250.000 keer gedownload en heeft op dit moment bijna 60 vijfsterrenvermeldingen, dus John Regan, de mede-ontwikkelaar van deze plugin, móet iets goed gedaan hebben.
Element inspecteren
De plugin doet wat het belooft. Je kunt eenvoudig de vormgeving van zo’n beetje alle elementen van de site wijzigen. Het stijlbestand van een WP-site (style.css) bevat vaak meer dan 3000 definities. Elk element kan in principe onafhankelijk van andere worden vormgegeven. Maar hoe kom je er achter wat waar is gedefinieerd? Daar heeft de browser Google Chrome een handig hulpmiddeltje voor. (Een belangrijke reden om (ook) Chrome te gebruiken als browser.)
In bovenstaand voorbeeld heb ik het woord ‘Muzieknotatie’ geselecteerd en met de rechtermuisknop het commando ‘element inspecteren’ gekozen. Chrome geeft nu van de tekst ‘Muzieknotatie’ aan welk element het betreft en op welke regel het element in het css-bestand is gedefinieerd.
Het gaat hier om het element h2 van de feature content. Een h2 is 24 pixels groot, de benedenmarge is 17 pixels en de regelhoogte is 32 pixels. Allemaal prima, wat mij betreft. Deze h2 wil ik een echter goudachtige kleur meegeven, maar tegelijkertijd wil ik dat ook de h1 en de h3 tot en met de h6 diezelfde goudkleur krijgen. In het standaard css-bestand hebben de titels de kleur zwart (#000000). Door in de plugin custom css de volgende code toe te voegen, krijgen alle titels op de site de door mij gewenste kleur.
h1, h2, h3, h4, h5, h6
{
color: #DFBE84 !important;
}
De toevoeging ‘!important’ is niet alleen commentaar, maar zorgt ervoor dat de definities in het css-bestand worden overschreven.
Meer weten over css? Bel (0573 – 45 01 54), mail of vul het contactformulier in.