CSS regel toepassen in tekst

Docdigit
(@josc)

1 week, 5 dagen geleden

Ik maak bij het schrijven in mijn blog geen gebruik van de block editor.
Soms wil ik van een link in die tekst een button maken. De css regel voor die button heb ik al, maar ben op zoek naar een mogelijkheid om die in de editor mode toe te voegen voor dat specifieke stukje tekst.
Kan iemand mij vertellen hoe ik dat voor elkaar kan krijgen? Alvast bedankt voor de hulp.

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)

Moderator Jeroen Rotty
(@jeroenrotty)

Support Moderator

1 week, 4 dagen geleden

Kan je het niet inline toepassen? Als je dus een bv. een <a> tag wilt stylen in je klassieke editor, hang dan je CSS in de inline style attribuut?

Vb. <span style="color:white; background:pink, font-weight:bold;"><a class="button">Je knoptekst</a></span>

En anders gewoon met een klasse werken en die klasse en je CSS bij Weergave > Customizer > Extra CSS.
Thread starter Docdigit
(@josc)

1 week, 4 dagen geleden
In JCE (Joomla) kon ik de eigenschappen van een link voorzien van een .css rule. Die functie maakt deel uit van de editor zelf.

Link -> Eigenschappen -> URL en -> CSS rule

Ben op zoek om deze functie ook onderdeel te maken van de WordPress editor. Anders moet ik op zoek naar een soort JCE editor en die is er helaas niet. Jouw oplossing werkt natuurlijk, en dat doe ik nu ook, maar dat is mij teveel werk met 20 posts per dag ;-/

thanks, Jos
- Deze reactie is gewijzigd 1 week, 4 dagen geleden door Docdigit.
Guido
(@guido07111975)

1 week, 3 dagen geleden
Hoi,

Zoals Jeroen al zegt kun je ook met een klasse werken. Je voegt dan alleen class="button" aan de link toe en de CSS doet de rest. Veel thema’s hebben al styling voor deze klasse. Zo niet, dan zelf toevoegen via pagina Extra CSS vd Customizer. Voorbeeld:
```
a.button {padding:5px; background:#cc0000; color:#fff; text-decoration:none;}
a.button:hover {background:#333;}
```
Guido
bramvanmunster
(@bramvanmunster)

1 week, 3 dagen geleden
Wat de mensen hierboven zeggen klopt, maar verdient een aanvulling. Als je alles schrijft in een <div> kan je ook dus alles meteen maken.
```
<div ID="name" style="cssname"><a href ="link">linktekst</a></div>
```
Dus alles wat je dan van tevoren hebt beschreven is geldig voor de hele DIV en de CSS. Als je ooit op een punt komt dat je dit niet wilt, laat je gewoon de DIV ID of de Style er uit 🙂
- Deze reactie is gewijzigd 1 week, 3 dagen geleden door bramvanmunster.
Thread starter Docdigit
(@josc)

1 week, 3 dagen geleden

Bedankt voor jullie reactie(s). We gaan ermee aan de slag.

Jos

Thread starter Docdigit
(@josc)

6 dagen, 8 uren geleden

Het was eigenlijk nog eenvoudiger dan ik dacht. Als je de standaard editor de Toolbar openzet (shif-alt-z) dan komt er een optie ‘Formats’ in beeld.

@ https://imgur.com/ic5Pw0P

Daarmee is heel simpel een link in een button te maken. Soms liggen oplossingen in plain sight 😉