1-image 2-image 3-image
Sie sind hier: Startseite > Besonderheiten > Text-Highlight

Text-Highlight

 
Das ist ein reiner Beispieltext für das Beispiel: Diesen Text hervorheben.

 


Wie geht das? 

Auf dieser Seite fand ich die entsprechenden CSS-Codes. Mir gefiel das oben gezeigte Markierungsverfahren (dort Nr. 13).

Aus dem gezeigten CSS-Code benötigte ich nur diesen Teil:

highlight {
background-image: linear-gradient(to right, #F27121cc, #E94057cc, #8A2387cc);
border-radius: 6px;
padding: 3px 6px;
}

Mit dem TinyMCE ist es standardmäßig nicht möglich, ein <mark>-Tag zu setzen (außer manuell im Quelltext). Deshalb empfehle ich, eine neue CSS-Klasse (z.B. animark) ins Standard-Template ganz hinten hineinzuschreiben. Dann sollte diese im TinyMCE-Editor unter "Format" erscheinen. Diese sind nicht alphabetisch sortiert!

span.highlight {
background-image: linear-gradient(to right, #F27121cc, #E94057cc, #8A2387cc);
border-radius: 6px;
padding: 3px 6px;
}


Wenn du z.B. verschiedenfarbige Markierungen brauchst, dann ginge auch sowas:
span.animarkBlau, span.animarkRot, span.animarkGelb oder ähnlich.
Du musst dann halt nur jeweils eine neue Regel erstellen (neue CSS-Klasse (z.B. span.animarkRot) ins Standard-Template) und die Farbangaben für linear-gradient ändern.

 

Letzte Bearbeitung:
Please activate JavaScript in your browser.

» Sitemap

Aufgrund der neuen Cookies-Verordnung der EU: Einige Bereiche dieser Website benötigen zu ihrer Funktion neben den sogenannten SESSION-Cookies, auch Cookies, die personenbezogenen Daten enthalten, die sich auf Sie, Ihren Webclient und / oder Ihr Gerät (PC oder Mobil-Gerät) beziehen (also: personenbezogenen Daten). Es werden nur seiteninterne Werte gespeichert. Bitte geben Sie Ihre Erlaubnis, evtl. weitere Cookies auf Ihrem Rechner zu platzieren. Erfahren Sie mehr über diese Cookies im Unterpunkt des Impressums bei Cookies.