Euro-Bijverdienen

Eén van de leuke details die je kan toevoegen aan een website is de kleur dat wordt weergegeven als iemand tekst selecteert. In plaats van steeds het standaard blauw kleurtje te gebruiken, kan je dit ook instellen om het bijvoorbeeld te doen matchen aan je layout, of gewoon om het in het oog te laten springen.

In WordPress is het eenvoudig om aan te passen: Navigeer naar de locatie waar je theme staat, zoek naar style.css en open het bestand. Vervolgens moet je er volgende code aan toevoegen:

::-moz-selection {
    background-color: #ff6200;
    color: #fff;
}

::selection {
    background-color: #ff6200;
    color: #fff;
}

In het veldje ‘background-color’ zet je dan de kleur dat moet worden weergegeven bij selectie, en het veldje ‘color’ dient om de kleur van de tekst weer te geven.

Deze selector ” ::selection ” wordt herkend door: Chrome, Safari, IE9+ en Opera. Firefox gebruikt daarvoor zijn eigen kleuren, waardoor we ook de ” ::-moz-selection ” moeten gebruiken. Vandaar het tweede lijntje.

En meer dan dat is het niet!

Meerdere kleurselecties?

Dat is ook mogelijk, dan kan je bijvoorbeeld volgende code gebruiken:

p.rood::selection {
  background: #ffb7b7;
}
p.rood::-moz-selection {
  background: #ffb7b7;
}
p.geel::selection {
  background: #fff2a8;
}
p.geel::-moz-selection {
  background: #fff2a8;
}

Als je dit gebruikt, dan moet je er wel op letten tijdens het schrijven van een bericht, dat je dit opneemt in je styling, het zal er dan als volgt moeten uitzien als je een bericht schrijft:

<p class="geel"> Dit zal een gele achtergrond weergeven bij selectie</p>
<p class="rood"> Dit zal een rode achtergrond weergeven bij selectie</p>

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. Je kan op hun website ook gratis Wordpress themes terugvinden en downloaden!