TinyMCE | p margin-bottom 0 nur für readmore

  • Zur hilfreichsten Antwort springen

    Danke christine2,

    Deinen Code hatte ich auch schon versucht, leider ohne Effekt.

    Stimmt, mit "untersuchen F12" ist das readmore nicht sichtbar.
    Den margin-bottom von p sollte mit margin-bottom 0, ersetzt werden.
    Aber eben nur für das readmore.

    Backend:

    Spoiler anzeigen

    <p>Lorem ipsum ist Text, der gerne als Platzhalter genommen wird, wenn es noch keinen "richtigen" Text gibt. Der Grund dafür ist ein angenehmer Zeilenfall, der einen guten Eindruck von dem finalen Layout <span style="color: #ff0000;">vermittelt</span>.</p>
    <hr id="system-readmore">
    <p><span style="color: #ff0000;">Wenn</span> man beispielsweise eine Broschüre oder Buch entwirft, so kann der Designer auf Lorem ipsum Text zurückgreifen, wenn noch kein Text vorhanden ist. Lorem ipsum Text kommt dem Endprodukt so nahe, das das Buch fertig aussieht. Das Buch oder Broschüre kann so dem Kunden zur Abnahme des Designs vorgelegt werden.<br>Der wichtigste Faktor beim Gebrauch von Lorem ipsum Text ist, das der Text realistisch wirkt, andernfalls wird das Layout des Buches oder der Broschüre nicht gut wirken. Lorem ipsum ist also ein Blindtext ohne Bedeutung, der aber dennoch "echtem" Text täuschend ähnlich sieht.</p>

    Du willst das Readmore mit weniger Abstand zum vorangehenden Text? Es sieht dann nicht harmonisch aus, aber - aber wie du willst.
    Lösung: gib dem Modul eine Klasse (erweiterte Einstellungen), z.b. class="keinreadmoreabstand".
    Dann kannst du schreiben

    .keinreadmoreabstand p {margin-bottom: 0; }

    Falls du das nicht nur für dieses modul gemeint hast sondern generell - dann brauchst du overrides oder eine sehr häßliche Frickellösung wie

    .readmore {margin-top: -1rem !important}

    Alle p-Elementen haben ein margin-bottom, da kannst du keine Unterscheidung zwischen "getrennt wegen readmore" oder nicht. Wenn du noch ein Paragraph weiter unten ergänzt wird auch eine "Lücke" geben. Verstehe nicht genau, wo du das Problem siehts.


    Du kannst das probieren, es wird nur beim ersten p-Element im Beitrag den margin-bottom entfernen:

    Code
    .com-content-article__body p:first-child {
  margin-bottom: 0;
}

    Muss das von Viviana noch lesen. Hatte aber davor folgendes produziert:

    Du hast ja ab "Wenn" wieder mit <p><span style="color: ....etc. begonnen.
    Hab's tempoär weggetan:

    Man könnte (wenn gewollt) Zeilenumbruch machen:

    <p>Lorem ipsum ist Text, der gerne als Platzhalter genommen wird, wenn es noch keinen "richtigen" Text gibt. Der Grund dafür ist ein angenehmer Zeilenfall, der einen guten Eindruck von dem finalen Layout vermittelt. <span style="color: #ff0000;"><br>Wenn</span> man beispielsweise eine Broschüre oder Buch entwirft, so kann der Designer auf Lorem ipsum Text zurückgreifen, wenn noch kein Text vorhanden ist. Lorem ipsum Text kommt dem Endprodukt so nahe, das das Buch fertig aussieht. Das Buch oder Broschüre kann so dem Kunden zur Abnahme des Designs vorgelegt werden.<br>Der wichtigste Faktor beim Gebrauch von Lorem ipsum Text ist, das der Text realistisch wirkt, andernfalls wird das Layout des Buches oder der Broschüre nicht gut wirken. Lorem ipsum ist also ein Blindtext ohne Bedeutung, der aber dennoch "echtem" Text täuschend ähnlich sieht.</p>
    <p> </p>

    Liebe Grüße
    Christine

    drmenzelit
    Grosse CSS Kunst ! Danke für deinen Vorschlag.
    Leider wird dann diese Lösung für alle Artikel übernommen und nicht nur für die Trennlinie.

    firstlady
    Genau, die Trennung vom Introtext und Volltext. Sorry, wenn ich es nicht so verständlich erklärt hatte.
    Es ist also eine Lösung nur für die Trennlinie, die ich suche.

    christine2
    Vielen Dank. Also, wenn ich eine Trennlinie einfüge <hr id="system-readmore"> wird beim Speichern automatisch einen <p>...</p> eingefügt.
    Bei deinem Beispiel ist auch keine Trennlinie mehr vorhanden.