Einige CSS-Einstellungen

thobie

thobie

Aktives Mitglied
Thread Starter
Dabei seit
23.04.2006
Beiträge
1.100
Reaktionspunkte
187
Ich will auf einer Site komplett den Fließtext ändern.

Kleinere Schrift, geringerer Zeilenabstand, geringerer Abstand zwischen den Absätzen.

Die Einstellungen für die Typografie im Customizer übernimmt das Theme leider nicht.

Das mittlere konnte ich mit diesem Code ändern:

CSS:
p {
  line-height: 1.3em;
}

Für ersteres und letzteres komme ich mit font-size und padding leider nicht weiter.

Hat jemand einen Hinweis?
 
Gibt es meinen CSS-Code für Fließtext auch für Aufzählungen?
 
Ja, aber nicht mit dem Selector "p", sondern mit "ul" oder "ol", je nach Listentyp.
Zu deiner ersten Frage: vielleicht gibt es widersprüchliche Angaben im StyleSheet, weswegen font-size und padding ohne Wirkung bleibt?
 
  • Gefällt mir
Reaktionen: dodo4ever
Gibt es meinen CSS-Code für Fließtext auch für Aufzählungen?
Generell werden CSS Angaben strukturiert aufgebaut, weil Kaskadierung.
So sind auch bei Wordpress Theme-Styles die Bereiche definiert.

Eine „List“ <ul> <li></li></ul> oder Paragraphen <p> können daher auch und durchaus
in unterschiedlichen und mehreren Instanzen und Bereichen definiert sein:

Zum Beispiel:
article .main.content ul li { } … nur Lists innerhalb des main contents bei single Artikel
.blog article .main.content ul li { } … explizit Lists auf der Blogübersicht und singel Artikel
.search .main.content p { } … nur paragraphen auf der Suchergebnis-Seite

zusätzlich kann Content auch über Plugins oder Erweiterungen ausgeliefert werden:
.post-type-archive-portfolio p { }
…usw.

Wenn du dann ein generelles p { line-height: 1.3em; } setzt,
kann eine andere gezielte Ansprache von Klassen oder Content Elementen diese überschreiben oder als Vererbung verwenden.

In einem Developer-Tool eines Browsers werden dir die css-Pfade angezeigt, anhand derer du die jeweilgen Angaben erkennen kannst.
Und auch evtl. Vererbungen von CSS-Angaben die eine vorherige höhere Priorität haben.

Je nach dem, welchen Browser du dafür benutzt – sie haben (Safari, Chrome, Firefox) i.d.R. eine Doku-Seite zu ihrem Developer-Tool.
Schau dir sowas mal an.

edit:
Achso und folgendes noch:
Verwenden Sie em, wenn die Größe eines Elements von der aktuellen Schriftgröße abhängen soll. rem ist wie em, bezieht sich aber auf die Basisschriftgröße des Dokuments (insbesondere des Wurzelelements) und nicht auf die Schriftgröße des aktuellen Elements.
 
  • Gefällt mir
Reaktionen: BEASTIEPENDENT
Ich konnte mir mit folgendem Trick helfen.

Ich habe mich erinnert, dass manchmal CSS-Einstellungen im Child Theme eines Parent Themes und auch (globale) Änderungen im Customizer nicht übernommen werden. Warum auch immer.

Ich habe jetzt für die Website das Parent Theme gewählt.

Und mit den (globalen) Änderungen im Customizer und dem folgenden CSS-Code konnte ich dann Schriftgröße, Zeilenabstand und Abstand zwischen Absätzen in Fließtext und Aufzählungen wie gewünscht ändern.
CSS:
ul, p {
  margin-top: -1em;
}

li {
  margin-top: -0.5em;
}
 
Zuletzt bearbeitet:
Zurück
Oben Unten