mark tag ändern

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
mhz
Posts: 676
Joined: Tue Jun 25, 2013 8:46 pm
Location: Heusenstamm, Hessen
Contact:

mark tag ändern

Post by mhz » Tue Aug 02, 2022 7:31 am

Hallo zusammen,
ich habe auf einer Website diese schöne Möglichkeit zur Nutzung des <mark>-tags gefunden:
https://codepen.io/alvarotrigo/pen/popvzVw

Das <mark>-tag ist bereits vorhanden, denn wenn ich Worte damit "markiere", werden sie mit gelb hinterlegt; eigentlich eine Verschwendung, denn ich kann das Ganze ja mit <span style="background-color: #ffff00;">Lore ipsum</span> ebenfalls erreichen.

Diese Definitionen zum <mark>-tag habe ich im Ordner assets/css in zwei Dateien gefunden: xhstyles.css und core.css. Muss ich in beiden Dateien diese Angaben ändern? Oder gibt es auch eine andere Möglichkeit der Anpassung?

Vielen Dank für eure Hinweise!
Gruß Michael
Michael Zajusch (mhz)-- Mein Tutorial für CMSimple_XH. Früher

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: mark tag ändern

Post by frase » Tue Aug 02, 2022 9:26 am

mhz wrote:
Tue Aug 02, 2022 7:31 am
Diese Definitionen zum <mark>-tag habe ich im Ordner assets/css in zwei Dateien gefunden: xhstyles.css und core.css. Muss ich in beiden Dateien diese Angaben ändern? Oder gibt es auch eine andere Möglichkeit der Anpassung?
Die Datei xhstyles.css musst du nicht ändern. Sie wird bei Änderungen automatisch von XH erzeugt.
Diese Datei fasst die core.css und alle Plugin-CSS-Dateien zusammen - um die nötigen Zugriffe zu optimieren.

Eine <mark>-Tag-Definition konnt ich allerdings bei mir in der core.css nicht finden. Lediglich eine Regel für .xhMark ist vorhanden.

Wenn ich das richtig sehe, ist es mit dem TinyMCE standardmäßig gar nicht möglich, ein <mark>-Tag zu setzen (außer manuell im Quelltext). Deshalb empfehle ich, eine neue CSS-Klasse ins Template zu schreiben.
Beispiel:

Code: Select all

.animark {
	-webkit-animation: 1.5s highlight 1.5s 1 normal forwards;
	animation: 1.5s highlight 1.5s 1 normal forwards;
	background-color: none;
	background: linear-gradient(90deg, #7efff5 50%, rgba(255, 255, 255, 0) 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
}
 @-webkit-keyframes highlight {
 to {
 background-position: 0 0;
}
}
 @keyframes highlight {
 to {
 background-position: 0 0;
}
}
Damit kannst du beliebigen Text auf der Seite im Tiny markieren und diesem dann die Klasse .animark verpassen.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: mark tag ändern

Post by cmb » Tue Aug 02, 2022 10:36 am

mhz wrote:
Tue Aug 02, 2022 7:31 am
ich habe auf einer Website diese schöne Möglichkeit zur Nutzung des <mark>-tags gefunden:
Das kannte ich noch gar nicht. Interessant!
mhz wrote:
Tue Aug 02, 2022 7:31 am
Das <mark>-tag ist bereits vorhanden, denn wenn ich Worte damit "markiere", werden sie mit gelb hinterlegt; eigentlich eine Verschwendung, denn ich kann das Ganze ja mit <span style="background-color: #ffff00;">Lore ipsum</span> ebenfalls erreichen.
Na ja, <mark> hat halt eine besondere Bedeutung; ein irgendwie gestaltetes <span> aber nicht. Die gelbe Hervorhebung dürfte eine Browservoreinstellung sein.

Da <mark> mittlerweile gute Browserunterstützung hat, sollten wir vielleicht die Suchergebnisse damit auszeichnen (statt mit span.xh_find).
Christoph M. Becker – Plugins for CMSimple_XH

mhz
Posts: 676
Joined: Tue Jun 25, 2013 8:46 pm
Location: Heusenstamm, Hessen
Contact:

Re: mark tag ändern

Post by mhz » Tue Aug 02, 2022 11:22 am

Stimmt, Christoph, es war, wie Frase bereits schrieb ".xhMark".
Michael Zajusch (mhz)-- Mein Tutorial für CMSimple_XH. Früher

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: mark tag ändern

Post by frase » Tue Aug 02, 2022 11:24 am

cmb wrote:
Tue Aug 02, 2022 10:36 am
Na ja, <mark> hat halt eine besondere Bedeutung; ein irgendwie gestaltetes <span> aber nicht. Die gelbe Hervorhebung dürfte eine Browservoreinstellung sein.

Da <mark> mittlerweile gute Browserunterstützung hat, sollten wir vielleicht die Suchergebnisse damit auszeichnen (statt mit span.xh_find).
Ja, wahrscheinlich hat <mark> auch eine Bedeutung für Screenreader.
Deshalb finde ich den Vorschlag, die Suchergebnisse damit auszuzeichnen, gar nicht so verkehrt.
(ganz sicher wäre <mark class="xh_find"> - was aber wahrscheinlich übertrieben wäre)

Mein Beitrag oben bezog sich auf die Markierung im Tiny. Ich habe weder im Tiny4 noch im Tiny5 die Möglichkeit gefunden <mark> zu setzen.

mhz
Posts: 676
Joined: Tue Jun 25, 2013 8:46 pm
Location: Heusenstamm, Hessen
Contact:

Re: mark tag ändern

Post by mhz » Tue Aug 02, 2022 11:28 am

Und gleich noch eine weitere Frage:
Frank hatte ja die neue class animark genannt. Kann ich bei anderen Markierungen diese dann animark2 usw. nennen?
Michael Zajusch (mhz)-- Mein Tutorial für CMSimple_XH. Früher

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: mark tag ändern

Post by frase » Tue Aug 02, 2022 11:31 am

mhz wrote:
Tue Aug 02, 2022 11:28 am
Und gleich noch eine weitere Frage:
Frank hatte ja die neue class animark genannt. Kann ich bei anderen Markierungen diese dann animark2 usw. nennen?
Naturlich geht das.
Wenn du z.B. verschiedenfarbige Markierungen brauchst, dann ginge auch sowas:
animarkBlau, animarkRot, animarkGelb oder ähnlich.
Du musst dann halt nur jeweils eine neue Regel erstellen und die Farbangaben für linear-gradient ändern.

mhz
Posts: 676
Joined: Tue Jun 25, 2013 8:46 pm
Location: Heusenstamm, Hessen
Contact:

Re: mark tag ändern

Post by mhz » Tue Aug 02, 2022 11:36 am

Danke.
Aber wie kann ich beliebigen Text auf der Seite im Tiny markieren und diesem dann die Klasse .animark verpassen?
Michael Zajusch (mhz)-- Mein Tutorial für CMSimple_XH. Früher

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: mark tag ändern

Post by frase » Tue Aug 02, 2022 11:41 am

mhz wrote:
Tue Aug 02, 2022 11:36 am
Aber wie kann ich beliebigen Text auf der Seite im Tiny markieren und diesem dann die Klasse .animark verpassen?
Wenn du die Regeln in dein Template schreibst (nicht in core.css), dann sollten diese dann im Editor unter "Format" erscheinen.

mhz
Posts: 676
Joined: Tue Jun 25, 2013 8:46 pm
Location: Heusenstamm, Hessen
Contact:

Re: mark tag ändern

Post by mhz » Tue Aug 02, 2022 11:59 am

Trotz Cache-leeren, taucht es in der langen Liste unter "Formate" nicht auf.
Wie wäre denn der Befehl für den Quellcode-Modus?
Michael Zajusch (mhz)-- Mein Tutorial für CMSimple_XH. Früher

Post Reply