Nun: Dr. Code liebt das Divi-Theme. Aber Divi hat auch Macken. Gehörige sogar. Eine der gröbsten sind die verkorksten Listen, welche Divi produziert. Ob Aufzählungen oder Bullet-Points: das sieht meist nicht gut aus. Es lässt sich aber beheben. Mit einigen Zeilen CSS-Code.
Listen werden erstellt mit dem HTML-Tag <li>Listeninhalt</li>. Da ist es verlockend, den li-Tag per CSS zu formatieren. Doch das geht meist ziemlich in die Hosen. Die Navigationspunkte des Menüs enthalten nämlich auch den li-Tag – wenn Sie den also passend für Textfelder formatieren, mündet das in völlig verunstalteten Menüs.
Es gibt aber eine Lösung, die wir Ihnen hier zeigen.
1. Nummerierte Aufzählungen (Ordered Lists) gestalten
Diese Aufzählungen enthalten den HTML-Tag <ol></ol>. Der untenstehende CSS-Code steuert genau diesen Tag an und legt die Gestaltung fest. Kopieren Sie den Code in das CSS-Stylesheet Ihrer WordPress-Website (unter Design/Customizer/Zusätzliches CSS):
#left-area ol, .entry-content ol, .et-l--header ol, .et-l--body ol, .et-l--footer ol, .comment-content ol, body.et-pb-preview #main-content .container ol {
padding: 0 2em 23px 2em;
line-height: 1.5em;;
list-style-position: outside;
}Dies ergibt Aufzählungslisten in folgendem Stil:
- Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu
- Amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
- Consetetur sadipscing elitr, sed diam
- Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu
Das ist aber freilich nur die halbe Wahrheit. Es gibt ja noch andere Listen:
2. Bulletpoint-Listen oder ungeordnete Aufzählungen (Unordered Lists)
Diese werden über den HTML-Tag <ul></ul> erstellt. Der folgende Code steuert diesen Tag an und legt die Gestaltung fest. Kopieren Sie auch diesen Code in das CSS-Stylesheet Ihrer WordPress-Website. Unter Design/Customizer/Zusätzliches CSS:
#left-area .entry-content ul, .entry-content ul, .et-l--header ul, .et-l--body ul, .et-l--footer ul, .comment-content ul, body.et-pb-preview #main-content .container ul {
padding: 0 2em 23px 2em;
line-height: 1.5em;
list-style-type: square;
}Dies ergibt Bulletpointlisten in folgendem Stil:
- Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu
- Amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
- Consetetur sadipscing elitr, sed diam
- Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu
Beide CSS-Codes können natürlich – ganz nach Gusto angepasst werden; sie ergeben aber doch schon eine ansprechende Darstellung.
Werbung
Werbung
