1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

WP 5.2 li ul: Aufzählung Listensymbol ändern

Dieses Thema im Forum "Design" wurde erstellt von meisterleise, 8. März 2020.

  1. meisterleise

    meisterleise Well-Known Member

    Registriert seit:
    18. Januar 2012
    Beiträge:
    111
    Zustimmungen:
    6
    Hallo Leute,
    sieht lang aus, aber die Frage ist recht schlicht – versprochen! ;)
    Das Thema ist natürlich hier und anderswo schon vielfach behandelt worden und ich durchforste auch schon viele Stunden das Netz, denn das Problem steckt im Detail und dafür fand ich bisher keine Antwort.

    Was ich will:
    Ich möchte das Aufzählungszeichen einer ungeordneten Liste individuell gestalten.
    Soweit kein Ding. Dazu habe ich folgende Lösung so oder so ähnlich mehrfach im Web gefunden:

    .aem-list0 li{
    list-style-type: none;
    margin-bottom: 0.7em;}

    .aem-list0 li::before{
    content: "›︎";
    font-size: 1.5em;
    font-weight: 700;
    color: #b71722;}


    Im Original sieht die Liste wie im Bild "Standard" aus. Nach dieser CSS-Zuweisung wie in "Liste 0"

    Das Problem:
    Wie man sieht, ist das Zeichen verrutscht und weitere Zeilen nicht eingerückt.

    Meine Lösung:
    Ich habe nun mit margin und padding mir alles zurechtgerückt, bis es optisch für mein ausgewähltes Zeichen und dessen Größe passt. Fühlt sich aber gefuscht an und ist es sicherlich auch. :D


    Die Frage:
    Gibt es eine elegantere (richtige) Lösung, wie man die Liste sauber formatiert?

    (Und warum ist sie überhaupt bei list0 so verschoben obwohl ich doch nur das Symbol ersetzt habe?)


    standard.png list0.png list1.png
     
  2. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.302
    Zustimmungen:
    408
    Ich würde das in etwa so lösen:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Eine ul hat, wenn man es nicht ändert, ein padding-left und dort sind die List-Icons platziert. Wenn du die deaktivierst und mit li:before "ersetzt", fangen diese bei der eigentlichen Aufzählung an. Also korrigierst du das mit Minus-Margin wieder.
     
    meisterleise gefällt das.
  3. meisterleise

    meisterleise Well-Known Member

    Registriert seit:
    18. Januar 2012
    Beiträge:
    111
    Zustimmungen:
    6
    Ach, ich Dödel hatte vergessen, noch mein CSS zu "list1" zu posten. Ist nun aber auch egal. Habe dein CSS nun genommen, meinen Wünschen angepasst und es sieht nun genauso aus wie mein Screenshot von "List1" (nur nicht so umständlich umgesetzt). Ganz vielen Dank für die Info und das CSS!! :)

    Für alle, die's interessiert hier mein abschließendes CSS:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    SirEctor gefällt das.
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden