Page 2 of 2
Re: mark tag ändern
Posted: Tue Aug 02, 2022 12:11 pm
by frase
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!
Re: mark tag ändern
Posted: Tue Aug 02, 2022 12:13 pm
by mhz
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.
Re: mark tag ändern
Posted: Fri Aug 05, 2022 8:45 am
by mhz
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;
}
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?
Re: mark tag ändern
Posted: Fri Aug 05, 2022 9:14 am
by frase
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.
Re: mark tag ändern
Posted: Fri Aug 05, 2022 9:33 am
by mhz
Vielen Dank!
Jetzt hat es geklappt!
Re: mark tag ändern
Posted: Fri Aug 05, 2022 9:54 am
by frase
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).