mark tag ändern

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
frase
Posts: 4880
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: mark tag ändern

Post by frase » Tue Aug 02, 2022 12:11 pm

mhz wrote:
Tue Aug 02, 2022 11:59 am
Trotz Cache-leeren, taucht es in der langen Liste unter "Formate" nicht auf.
Drücke mal [Strg-F5] wenn der Editor sichtbar ist.
Oder logge dich aus, schließe das Browserfenster und versuche es erneut.

STOP!
Ich hatte ganz vergessen, dass die Editoren die Klassen nur kontextbezogen anzeigen.
Also müssen deine Klassen im Template-CSS so heißen:
span.animark, span.animarkBlau, span.animarkRot, span.animarkGelb usw.
Sorry!

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

Re: mark tag ändern

Post by mhz » Tue Aug 02, 2022 12:13 pm

Danke, mit span.animark klappt es jetzt auch über Formate.
Vorher hatte ich den Aufruf im Quellcode so: <span class="animark"> Text </span> bearbeitet. Funktionierte aber leider nicht mit der Markierung.
Michael Zajusch (mhz)-- Mein Tutorial für CMSimple_XH. Früher

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

Re: mark tag ändern

Post by mhz » Fri Aug 05, 2022 8:45 am

Ich habe nun etwas weiter experimentiert und habe mir diesen Code (von oben erwähnter Seite) vorgenommen:

Code: Select all

span.arrow {
  position: relative;
  margin:0  0.5em;
  padding: 0 0.2em;
}
span.arrow::before{
  content: "";
  z-index: -1;
  left: -0.5em;
  top: 0.1em;
  bottom: 0.1em;
  border-width: 0.6em;
  border-style: solid;
  border-color: #ff8800;
  position: absolute;
  width: calc(100% - 0.65em);
  border-left-color: transparent;
}
span.arrow::after{
  content: "";
  z-index: -1;
  right: 0;
  top: 0.1em;
  bottom: 0.1em;
  border-width: 0.6em;
  border-style: solid;
  border-color: #ff8800;
  position: absolute;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  transform: rotate(180deg);
  transform-origin: center right;
}
https://tutor-test.cmsimplexh.de/?Highlight-Text
Das Ergebnis kann ich im Bearbeitungsmodus sehen. Klicke ich jedoch in den Vorschau-Modus (oder logge mich aus), sind die gewünschten Effekte weg.
(Selbst Cache-leeren bringt nichts.) - Was mache ich falsch?
Michael Zajusch (mhz)-- Mein Tutorial für CMSimple_XH. Früher

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

Re: mark tag ändern

Post by frase » Fri Aug 05, 2022 9:14 am

Code: Select all

span.arrow {
	position: relative;
	margin: 0 0.5em;
	padding: 0 .2em 0 .5em;
	z-index: 1;
}
Der z-index bringt den Text nach vorne (nach oben).
Das Padding links habe ich aus optischen Gründen etwas erweitert.

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

Re: mark tag ändern

Post by mhz » Fri Aug 05, 2022 9:33 am

Vielen Dank!
Jetzt hat es geklappt!
Michael Zajusch (mhz)-- Mein Tutorial für CMSimple_XH. Früher

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

Re: mark tag ändern

Post by frase » Fri Aug 05, 2022 9:54 am

mhz wrote:
Fri Aug 05, 2022 9:33 am
Jetzt hat es geklappt!
Schön, freut mich.

Mal noch ein Tipp:
In diesem Template gibt es eine Klasse "bigger" - was einen größeren Text meint (1.5em).
Statt jedem Absatz einen Inline-Style zu verpassen
<span style="font-size: 18pt;">,
könntest du allen Absätzen diese Klasse zuweisen.
Oder - was noch besser wäre - du machst einen DIV mit dieser Klasse um alles drumrum:
<div class="bigger">
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
Auch die Einheit "pt" für die Schriftgröße könnte Probleme bereiten.
Du hast dann nämlich einen Mischmasch aus Einheiten (px + pt + em).

Post Reply