mark tag ändern
mark tag ändern
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
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
Re: mark tag ändern
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;
}
}
Re: mark tag ändern
Das kannte ich noch gar nicht. Interessant!
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
Re: mark tag ändern
Stimmt, Christoph, es war, wie Frase bereits schrieb ".xhMark".
Re: mark tag ändern
Ja, wahrscheinlich hat <mark> auch eine Bedeutung für Screenreader.cmb wrote: ↑Tue Aug 02, 2022 10:36 amNa 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).
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.
Re: mark tag ändern
Und gleich noch eine weitere Frage:
Frank hatte ja die neue class animark genannt. Kann ich bei anderen Markierungen diese dann animark2 usw. nennen?
Frank hatte ja die neue class animark genannt. Kann ich bei anderen Markierungen diese dann animark2 usw. nennen?
Re: mark tag ändern
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.
Re: mark tag ändern
Danke.
Aber wie kann ich beliebigen Text auf der Seite im Tiny markieren und diesem dann die Klasse .animark verpassen?
Aber wie kann ich beliebigen Text auf der Seite im Tiny markieren und diesem dann die Klasse .animark verpassen?
Re: mark tag ändern
Wenn du die Regeln in dein Template schreibst (nicht in core.css), dann sollten diese dann im Editor unter "Format" erscheinen.
Re: mark tag ändern
Trotz Cache-leeren, taucht es in der langen Liste unter "Formate" nicht auf.
Wie wäre denn der Befehl für den Quellcode-Modus?
Wie wäre denn der Befehl für den Quellcode-Modus?