blog

Noch mehr einfache CSS-Anpassungen für WordPress

Wie Sie mit einfachen CSS-Anpassungen Ihre Website aufpeppen!

Das optimale WordPress-Theme ist nach langer Suche endlich gefunden und die Website fertig – super! Dennoch findet man fast immer Kleinigkeiten im Design oder in der Darstellung, die nicht ganz den eigenen Vorstellungen entsprechen und die sich auch mit Hilfe des Customizers nicht beheben lassen.

Vor einer Weile habe ich bereits einen Artikel mit einfachen CSS-Tipps veröffentlicht und erklärt, wie Sie damit Ihre WordPress-Seite individuell anpassen können. Das funktioniert ganz einfach – ohne Programmierkenntnisse und ohne Plugins!

Der Artikel ist auf große Resonanz gestoßen. Und mich haben viele weitere Fragen zu individuellem CSS erreicht, die in dem Artikel noch nicht beantwortet wurden.

Aus diesem Grund ist dieser weitere Beitrag mit CSS-Anpassungen für WordPress entstanden. Denn die Fragen sind sicherlich nicht nur für Einzelne interessant.

Falls Sie bisher noch gar nichts von CSS gehört haben und sich fragen, wo und wie Sie individuelle CSS-Anpassungen vornehmen können, empfehle ich Ihnen ebenfalls einen Blick in den vorangegangenen Artikel. Dort beschreibe ich das ausführlich.

Ohne weitere Umschweife kommen nun weitere CSS-Befehle für WordPress:

Gesamte Website zentriert oder im Blocksatz darstellen

Sie möchten Ihre gesamte Website zentriert darstellen? Das funktioniert mit diesem CSS-Code:

body {
text-align: center;
}

Für die Darstellung der gesamten Website im Blocksatz funktioniert dies hier:

body {
text-align: justify;
}

Falls das Zentrieren nur für einzelne Selektoren (Elemente) gelten soll, z. B. die Website-Kurzbeschreibung oder den Untertitel, dann nutzen Sie diesen CSS-Befehl:

.site-description {
text-align: center !important;
}

Die Menü-Hintergrundfarbe ändern

Mit folgendem CSS-Befehl können Sie die Hintergrundfarbe Ihres Menüs ändern. Die Schriftfarbe passen Sie mit „color“ an, die Hintergrundfarbe mit „background-color“.

.main-navigation li a {
color: white !important;
background-color: black !important;
}

WordPress CSS-Anpassungen Menue Hintergrundgrundfarbe

Den aktiven Menülink farblich anders gestalten

Damit Ihr Website-Besucher weiß, auf welcher Unterseite er sich gerade befindet, ist es z. B. möglich, den aktiven Menülink in einer anderen Farbe zu gestalten. Das geht mit diesem Code.

.current_page_item a {
color: blue !important;
background: red !important;
}

WordPress CSS-Anpassungen aktiver Menülink

Die WordPress-Suchzeile individuell anpassen

Wenn Ihnen die Suchzeile auf Ihrer Website nicht gefällt, können Sie mit diesem Code individuelle Anpassungen vornehmen..

.search-field {
background-color: green !important;
fonz-size: 24px !important;
font-weight: bold !important;
color: red !important;
}

WordPress CSS-Anpassungen Suchzeile

Die Breite von Widgets (Sidebar, Footer) verändern

Die Widgets passen Sie mit diesem CSS-Befehl an. Je nach Theme kann es sein, dass der Selektor anders heißt (das zählt für alle Beispiele hier). Hierfür müssten Sie den exakten Namen herausfinden.

.widget {
width: 450px !important;
}

Die Breite wird in diesem Fall mit „450px“ festgelegt. Hier können Sie verschiedene Werte einsetzen und ausprobieren, was am besten passt.

WordPress CSS-Anpassungen Widget Breite

Die Überschrift in der Sidebar ändern

Ebenso können Sie die Größe der Überschrift in der Sidebar verändern:

.widget-title {
font-size: 20px !important;
}

WordPress CSS-Anpassungen Überschrift Widgets

Aufzählungen und Bulletpoints individuell gestalten

Mit Aufzählungen können Sie Ihre Texte sinnvoll strukturieren und den Fließtext auflockern. Um diesen Effekt noch zu verstärken, kann es sinnvoll sein, die Aufzählungen zusätzlich optisch vom übrigen Text abzuheben. In diesem Beispiel ändern wir die Art des Aufzählungszeichens, seine Größe und seine Farbe:

.entry-content ul li {
list-style-type: none;
}

.entry-content ul li {
padding-left: 1em;
text-indent: -1.1em;
}

.entry-content ul li:before {
content:“• „;
padding-right: 5px;
color: red;
font-size: 25px;
}

Der „dicke Punkt“ ist hier der Bulletpoint, also das Aufzählungszeichen. Hier kann jedes beliebig andere Zeichen eingesetzt werden. Außerdem kann der Abstand zwischen Aufzählungszeichen und Text sowie die Farbe des Zeichens festgelegt werden.

WordPress CSS-Anpassungen Aufzählungszeichen Bulletpoints

Die Farbe von Links verändern

Wenn Ihnen die Default-Farbe für Links (ausgehend oder Seiten-intern verweisend) nicht gefällt, so können Sie die Farbe der Links mit diesem CSS Code ändern. Der Farbcode kann auch in #-Werten angegeben werden. Hier habe ich sowohl die Farbe als auch die Hintergrundfarbe nur für die Links geändert.

a {
color: white;
background-color: blue;
}

WordPress CSS-Anpassungen Links

Noch mehr Tipps und Unterstützung für Ihre WordPress-Seite

Sie haben gesehen, wie schnell und einfach Sie mit Hilfe von CSS Ihre WordPress-Website anpassen und gestalten können. Falls Sie noch weitere WordPress-CSS-Befehle suchen, empfehle ich Ihnen diesen Artikel:
12 einfache WordPress CSS Tipps – ohne Programmierkenntnisse

Falls Sie absoluter WordPress-Neuling sind und mit diesem Artikel (noch) gar nichts anfangen können oder falls Sie Ihre Zeit lieber anderweitig investieren möchten, habe ich folgende Angebote für Sie:
Starthilfe für WordPress-Einsteiger
– Unterstützung und Problemlösung für WordPress (wird gerade überarbeitet)

Lassen Sie mich bitte gerne in den Kommentaren wissen, ob Ihnen die Tipps geholfen haben. Falls Ihr Problem noch nicht gelöst wurde, schreiben Sie es auch gern in die Kommentare und ich versuche, eine Lösung zu finden.

Möchten Sie, dass ich Sie persönlich bei Ihrer WordPress-Installation berate und unterstütze? Dann können Sie hier Kontakt mit mir aufnehmen.

2 Gedanken zu „Noch mehr einfache CSS-Anpassungen für WordPress

  1. Hallo,
    die Tipps haben super geholfen, meine Seite anzupassen und vor allem habe ich mich endlich doch an CSS gewagt. Das war ein Buch mit 7 Siegeln, jetzt sind es nur noch 5. Das einzige was mich noch zur Verzweiflung treibt, ist das der Back to Top Button im Customizer zu sehen ist und im Frontend einfach weg ist. Ich habe mehrere Themes durchprobiert und bei allen verschwindet der Button im Frontend. Egal wie oft ich Caches, URL-Caches, Browserverlauf oder ähnliches lösche. Aber das ist wohl kein CSS-Thema.

    1. Hallo Sylvia,
      gut zu hören, dass der ein oder andere Tipp zu CSS geholfen hat.
      Wg. des Back to Top Buttons: das ginge mit etwas umfangreicheren CSS-Änderungen, aber das greift schon recht weit in den Code ein. Ich habe zwar keine Empfehlung, aber hast du es mit einem einfachen Plugin versucht? Ich bin zwar kein Fan von zu vielen Plugins, aber vielleicht hilft es in diesem Fall.
      Bei dem Theme, das ich gerade verwende (Sydney von aThemes) ist der Button rechts unten in rot vorhanden. Kannst du es mal mit Sydney versuchen, nur testweise? Falls es bei dir nicht funktioniert, dann liegt es an einer anderen Einstellung.
      Viel Erfolg und schöne Grüße!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.