Custom CSS zonder codeer ervaring. Een stroke om de berichttitels

css zonder coding

Cascading Style Sheets, CSS.

Waarom CSS?
Soms, nee. altijd is er in een thema wel iets niet in te stellen.Cavalerie icon CSS Iets niet chique genoeg. En iets niet zoals je het wilt hebben. Dat zuigt. Big Time.
CSS to the rescue!

Vooropgesteld, ik ben geen coder. Ik kan verschillende code-talen lezen, maar zelf schrijven lukt me niet (oke, ja, html lukt nog wel van vroegah) Ik zal aan de hand van een aantal voorbeelden vanuit o.a. het bouwen van Fort28 een aantal dingen laten zien die CSS kan doen voor je.

Wat is CSS?

Cascading style sheets geven de opmaak van je pagina aan. Alles wat je ziet qua vormgeving wordt bepaald in een apart bestand waarin elk element benoemd is, en waarin is aangegeven hoe elk element er uit dient te zien. Een achtergrond, het lettertype, je marges, de kleur van elk formaat kop (h1, h2 etc.

Het grote voordeel van CSS is dat elk element van een bepaald type maar een keer opgemaakt hoeft te worden, en je niet voor elke titel die je invoert hoeft aan te geven hoe het er uit moet zien. Handig voor consistentie. CSS is dan ook standaard bij webpagina’s.
Wordpress thema’s maken gebruik van een CSS stylesheet. Een bestand waarin dus staat hoe alle elementen zich moeten ‘gedragen’. Omdat een thema ook erg flexibel wil zijn in de customization hebben veel elementen een eigen naam. een tag.

Voorbeeld van mijn eigen ontevredenheid

De titels van mijn artikelen zijn wit. Dat heb ik zo aangegeven, dat vindt ik mooi.
Het probleem hier mee is, dat ze op de homepage van deze site in een raster worden weergegeven. De titels worden getoond over de ‘featured image’ van het bericht. In de basis mooi. ’t Wordt een probleem als het plaatje dat er onder zit ook wit is… wit op wit is nou ja.. nogal wit… Not Happy
Nou kan je zeggen: pas gewoon die titel kleur aan. Maar dat vindt ik dus niet mooi! als ik dan een artikel ergens anders open wordt de titel daar ook die andere kleur. Want, titel is kleurtje x hier = titel is kleurtje x daar. Als ik het in de customizer van m’n thema aangeef. Niet mooi. Ralf is ontevreden.

Een elegante oplossing is een pixel brede rand om een letter heen te plaatsen waardoor ook een witte letter op een witte achtergrond leesbaar wordt. Een stroke heet dat. (lang leve Photoshop ervaring – opmaak is opmaak).

hoe vind je de juiste css code (en waar plaats je die)

Challenge Accepted Fort28Dit is waar de puzzel begin.
De uitdaging.
Dit is ook een groot deel van de frustratie van het bouwen van een site, maar tegelijkertijd ook het mooiste viagra generika online. Want je zet iets naar je eigen hand. En als t dan lukt is dat een overwinning.
Goed, waar vind je de juiste code: Ik wist in dit voorbeeld dat ik een stroke wilde. Dus ik google op “css stroke text”. Dit geeft als eerste hit een mooi artikel over hoe tekst eigenlijk vector elementen zijn waardoor ze in elk formaat goed weergegeven worden, en dat een vector element opmaak kan hebben. Fijn. Dank voor de informatie. Daarna geeft de schrijver van het artikel een voorbeeld css code om een H1 element (zoals de eerste kop van dit artikel) op te maken met een stroke.

H1{
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: Black;
 }

Ik wil alleen niet al mn H1 koppen een stroke geven, alleen de titels die over een afbeelding heen gezet worden op de home page.
Dit is waar de tag van pas komt.

De juiste tag vinden

dit kan even tricky zijn. Ik gebruik altijd de developer tools van de browser.
Klik met de rechtermuisknop op het element dat je wilt aanpassen en selecteer ‘element inspecteren’ (in firefox. in Chrome heet het iets anders – ik gebruik beide browsers door elkaar)
Element inspecteren Fort28 tag finder

In dit voorbeeld klik ik op de link van een artikel, de inspector wordt geopend en alle informatie die hoort bij dat element wordt getoond. Het is blijkbaar een ‘featured link’ en het heeft een opmaak. Maar dat gaat over de bijbehorende link. Ik wil de titel aanpassen, dus ik kijk verder naar de onderliggende tags. (te herkennen aan een .tagtitel – puntje)
.entry-title – dat lijkt me de juiste.
Ik ga de CSS code die de blog me gaf dus aanpassen naar:

.entry-title{
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: Black;
 }

Dit geeft een mooi zwart randje om mijn titels!
alleen… ik vindt zwart niet mooi. Die dus nog even aangepast naar een mooie licht grijs:

.entry-title{
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: #BdBDBD;
 }

CSS code plaatsen

De CSS code plaats je in de custom CSS van je thema. In mijn geval via weergave – customizer- extra css. Dit zal bij een ander thema misschien net iets anders heten.
Je kunt ook altijd de plugin simple custom css gebruiken.
Wizard Harry

Conclusie

Met CSS kun je bijna alle elementen van je wordpress thema aanpassen, opleuken of veranderen in iets anders. CSS is een standaard taal, wat betekent dat het best prima te vinden is via google hoe je dingen moet aanpassen. De moeilijkheid zit hem in het vinden van het juiste element dat je moet aanpassen. Elke ontwikkelaar heeft voor zijn eigen thema elk element een naam gegeven. Zodra je die achterhaald hebt kun je met de CSS spelen tot je tevreden bent.

Ik hoop dat met dit artikel over hoe ik een subtiele stroke om de artikel-titels op de homepage gezet hebt een stuk duidelijk is geworden over hoe je dit kunt doen. Het is een kwestie van geduld, en soms zelfs wel gewoon geluk in het vinden van de juiste tag in de code. Maar uiteindelijk is zo’n zoektocht het waard omdat je hiermee je standaard thema omtovert tot precies dat wat je wilt!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *