CSS regel toepassen in tekst

  • Opgelost JosC

    (@josc)


    1 jaar, 11 maanden 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 jaar, 11 maanden 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 JosC

    (@josc)

    1 jaar, 11 maanden 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 jaar, 11 maanden geleden door JosC.
    Guido

    (@guido07111975)

    1 jaar, 11 maanden 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 jaar, 11 maanden 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 jaar, 11 maanden geleden door bramvanmunster.
    Thread starter JosC

    (@josc)

    1 jaar, 11 maanden geleden

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

    Jos

    Thread starter JosC

    (@josc)

    1 jaar, 11 maanden 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 😉

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • Het onderwerp ‘CSS regel toepassen in tekst’ is gesloten voor nieuwe reacties.