Support » Allgemeine Fragen » Spoiler auf Seite einrücken

Spoiler auf Seite einrücken

  • r3dnose

    (@r3dnose)


    vor 6 Jahren, 2 Monaten

    Guten Tag zusammen,

    zu Beginn: mir ist es leider nicht möglich einen Link der Seite zu posten da es sich um eine Intranetseite handelt für unsere Firma.

    Zum anderen muss ich sagen mein Wissenstands bezüglich HTML/PHP ist sehr gering. Deswegen finde ich WordPress auch ein hilfreiches Tool.

    Meine Frage bezieht sich auf eine mögliche Formatierung eines Spoilers auf einer Seite. Hierbei spielt es keine Rolle ob der Spoiler direkt mit dem Worpress Menü oder über ein WordPress-Addon erstellt wird.

    Hier als Beispiel ein Code:

    <h3><span style="text-decoration: underline;"><strong>Test</strong></span></h3>
[su_spoiler title='Forms' style='fancy']
<p style="padding-left: 30px;"><strong><a href="local ressoruce">Test1</a></strong></p>
<p style="padding-left: 30px;">[su_spoiler title="Forms" style="fancy"]
[su_list icon="icon: long-arrow-right"]</p>

<ul>
 	<li><strong><a href="test2" target="_blank" rel="noopener">Name</a></strong></li>
 	<li><a href="test3" target="_blank" rel="noopener"><strong>test4</strong></a></li>
</ul>
<p style="padding-left: 30px;">[/su_list]
[_/su_spoiler]

    Was ich gerne erreichen würde:
    Ich habe einen Link als Kategorie zu Beginn. Direkt darunter kommt ein Spoiler Bereich der zu diesem Thema noch mehrere Links enthält. Nun möchte ich aber das der Spoiler um genauso viele Pixel eingerückt wird wie der Link der darüber steht. Dies scheint aber nicht möglich zu sein, da nach meiner Auffassung der Spoiler ein „festes“ Objekt ist.

    Falls ich irgendwelche essentiellen Informationen ausgelassen habe gerne Fragen.

    Gruß,
    r3dnose

    • Dieses Thema wurde geändert vor 6 Jahren, 2 Monaten von Bego Mario Garde. Grund: Code-Auszeichnung korrigiert
Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Moderator Bego Mario Garde

    (@pixolin)

    vor 6 Jahren, 2 Monaten

    Der Shortcode scheint zum Plugin Shortcodes Ultimate zu gehören und ist ein wenig durcheinander. Nehmen wir deshalb der Einfachheit halber an, du hast folgenden Shortcode:

    [su_spoiler style="fancy" title="Dein Titel hier"]
<ul>
 	<li>Versteckter Inhalt</li>
 	<li>mehr versteckter Inhalt</li>
</ul>
[/su_spoiler]

    Wenn ich dich richtig verstehe, möchtest du den versteckten Inhalt, der erst bei Klick auf den Spoiler-Teaser eingeblendet wird, etwas einrücken. Dazu könntest du im Customizer in Zusätzliches CSS folgende Regel einfügen:

    .su-spoiler li {
	margin-left: 20px;
}

    Die CSS-Klasse .su-spoiler wird bereits vom Plugin hinzugefügt. Das List Item <li> der eingebundenen Liste kann als zusätzlicher Selektor verwendet werden: .su-spoiler li { … }. Wenn du statt dessen Absätze verwenden möchtest, kannst du das Absatz-Tag <p> als Selektor nutzen: .su-spoiler p { … } und um beides zu kombinieren: .su-spoiler li, .su-spoiler p { … }. Die CSS-Eigenschaft margin-left bestimmt dann den Abstand.

    Hilft dir das weiter?

    Thread-Starter r3dnose

    (@r3dnose)

    vor 6 Jahren, 2 Monaten

    Hallo Bego,

    vielen Dank erstmal für die ausführliche Antwort und das editieren meines Beitrages.
    Du hast recht, dass diese Spoiler über das Plugin erstellt worden sind.

    Dein Ansatz ist interessant und werde ich definitiv benutzen können.

    Doch meinen tue ich etwas anderes: Ich möchte den kompletten Spoiler (also nicht den Inhalt des Spoilers einrücken).
    Wenn man ein Text bei WordPress einrückt passt das super, wenn man aber nun versucht den Spoilern einzurücken das er in der gleichen Ebene wie der Text (Link) angezeigt funktioniert dies bei mir nicht. Der Spoiler bleibt immer „linksbündig“ am Rand „kleben“.

    Moderator Bego Mario Garde

    (@pixolin)

    vor 6 Jahren, 2 Monaten

    Du kannst mit CSS auch den kompletten Spoiler einrücken:
    .su-spoiler { margin-left: 20px; }

    Thread-Starter r3dnose

    (@r3dnose)

    vor 6 Jahren, 2 Monaten

    Okay dadurch das ich wirklich ein Neuling in dem Ganzen bin werde ich es mir anschauen und sehen ob ich es umsetzten kann. Aber es sieht schon genau nach dem aus was ich gesucht habe. Vielen Dank.

    Thread-Starter r3dnose

    (@r3dnose)

    vor 6 Jahren, 2 Monaten

    Ich habe das nun mal versucht umzusetzen und denke komme mit meinem aktuellen Wissen da nicht sehr weit.

    Vielleicht ein paar VErständnisfragen:
    1. Der Customizer den du erwähnst ist der von Plugin?
    2. Wird der Code den du erwähnst direkt im HTML Bereich eingefügt oder muss dort vorher etwas definiert werden damit es über CSS aufgerufen werden kann?

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Das Thema „Spoiler auf Seite einrücken“ ist für neue Antworten geschlossen.

Ansichten