blog

12 einfache WordPress CSS Tipps – ohne Programmierkenntnisse

Gibt es das überhaupt, einfache WordPress CSS Tipps? Na klar! Seit in WordPress im Customizer CSS ergänzt werden kann, sind so einige Plugins komplett überflüssig. Denn nun kann jeder Nutzer ganz einfach einzelne Aspekte an seinem Theme ändern. Was meine ich damit?

„Irgendwas ist immer“, das trifft auch auf fast alle WordPress Themes zu. Farbe, Schriftart, Größe passen dem Websitebetreiber nicht, sind zu groß, zu klein, zu langweilig. Die immer angezeigten Seitentitel stören und sollen versteckt werden, ebenso wie Name des Autors und das Datum des Posts?

All das können Sie sehr schnell, sehr einfach selbst lösen. Ohne Programmierkenntnisse, ohne Plugins.

Nach meinem kurzen, sehr einfach gehaltenen WordPress Artikel zum Ändern des Font Types erhielt ich einige Kommentare und E-Mails mit Fragen zu verschiedenen CSS-Problemen. Da ich zwar kein Programmierer, aber begeisterter Problemlöser bin, machte ich mich jeweils auf die Suche.

 

Kleine Sammlung für einfache WordPress CSS Tipps

Inzwischen habe ich eine kleine Sammlung an einfachen WordPress CSS Tipps und entsprechenden Code-Schnipseln. Diese möchte ich auf keinen Fall nur für mich behalten. Die meisten dieser Änderungen sind ja nicht auf meinen Anforderungen gewachsen, sondern kamen von Ihnen.

Und das Gute an diesen CSS Tipps: Normalsterbliche WordPress-Nutzer können diese problemlos über das Customizing einfügen und testen. Es ist nicht notwendig, in Child Themes oder sonst irgendwo in WordPress Änderungen vorzunehmen.

 

Kein Plugin – sondern CSS im Customizer

Ganz wichtig zu wissen: Es handelt sich hier nicht um ein Plugin, mit dem Sie das Theme Ihrer Wahl anpassen. Sie geben den CSS Code direkt im Customizer ein, überprüfen das Ergebnis in der Vorschau – und falls für gut befunden: speichern und fertig.

War diese Info bereits zu fortgeschritten für Ihre WordPress-Kenntnisse? Kein Problem – sprechen Sie mich an und ich kümmere mich um Ihr Anliegen.

 

CSS wird bei Theme-Wechsel evtl. gelöscht

Einen wichtigen Tipp zum Customizer CSS habe ich. Gelegentlich möchten Sie vielleicht auf ein anderes Theme umstellen.

Vor der Umstellung auf ein anderes Theme speichern Sie den im Customer CSS erfassten Code z.B. in einem Textfile. Bei der Umstellung kann es vorkommen (d.h. es ist sehr wahrscheinlich), dass der CSS Code verschwindet.

Bei einem Update Ihres Themes hingegen sollte dem CSS nichts passieren. Sollte! Doch wenn Sie Ihren Code separat gespeichert haben, wären Sie auch für diese Fälle gerüstet.

 

Los geht’s – 12 einfache WordPress CSS Tipps

Das soll es nun auch gewesen sein mit der Einleitung. Die nachfolgenden Code-Zeilen habe ich getestet mit dem WordPress Theme Twenty Seventeen. Einige funktionieren bei (fast) allen Themes, andere hingegen eher bei den Standard WordPress Themes wie Twenty Seventeen.

Die Informationen habe ich in zwei Blöcke aufgeteilt:

  • Schriftart, Größe und Farbe ändern
  • Informationen verbergen, verstecken, nicht anzeigen.

 

Wie kann ich bei WordPress die Schriftart, Größe und Farbe des Titels der Website ändern?

Mit diesem CSS Code ändern Sie die Default-Einstellungen für den Titel Ihrer Website. Den Beispiel-Screenshot gibt es zusammen mit dem nächsten Thema, der Änderung der Einstellungen für die Beschreibung der Website.

.site-title, .site-title a {
color: purple !important;
font-family: arial !important;
font-size: 26px !important;}

 

Wie kann ich bei WordPress die Schriftart, Größe und Farbe der Beschreibung der Website ändern?

.site-description, .site-description a {
color: red !important;
font-family: courier !important;
font-size: 20px !important;}

 

WordPress CSS Farbe Font Größe ändern von: Websitetitel und Websitebeschreibung
WordPress CSS Farbe Font Größe ändern von: Websitetitel und Websitebeschreibung

 

Wie kann ich bei WordPress die Schriftart, Größe und Farbe des Hauptmenüs ändern?

Das Hauptmenü, oder Level 1 Menü, ändern Sie mit diesen Zeilen (Screenshot zusammen mit dem Untermenü).

.main-navigation li a {
color: red !important;
font-family: courier !important;
font-size: 14px !important;}

 

Wie kann ich bei WordPress die Schriftart, Größe und Farbe des Untermenüs / Unterpunkte ändern?

Und hier die Details für das Untermenü bzw. die Unterpunkte.

.main-navigation li li a {
color: blue !important;
font-family: courier !important;
font-size: 14px !important;}

 

WordPress CSS Farbe Font Größe ändern von: Hauptmenü und Untermenü
WordPress CSS Farbe Font Größe ändern von: Hauptmenü und Untermenü

 

Wie kann ich bei WordPress die Schriftart, Größe und Farbe der Titel der Seiten (Pages) ändern?

Die Titel der Seiten lassen sich hiermit anpassen.

.page .entry-title {
color: red !important;
font-family: courier !important;
font-size: 40px !important; }

 

Wie kann ich bei WordPress die Schriftart, Größe und Farbe der Titel der Blogartikel (Posts) ändern?

Bei den Blogartikeln bzw. Posts ändern diese Zeilen die Farbe, Schriftart und Größe.

.single-post .entry-title {
color: red !important;
font-family: courier !important;
font-size: 40px !important;}

 

Wie kann ich bei WordPress die Schriftart, Größe und Farbe des Inhalts von Blogartikeln (Text, Content) ändern?

Falls Ihnen die Darstellung Ihrer Blogartikel nicht gefällt – hiermit können Sie etwas dagegen tun.

.entry-content {
color: red !important;
font-family: courier !important;
font-size: 15px !important;}

 

WordPress CSS Farbe Font Größe ändern von: Inhalt Blogartikel
WordPress CSS Farbe Font Größe ändern von: Inhalt Blogartikel

 

Wie kann ich bei WordPress die Schriftart, Größe und Farbe beim Post Autor und Post Datum ändern?

Einige WordPress Themes haben wirklich grausige Einstellungen für den Post Autor und das Post Datum. Ändern können Sie diese mit diesem CSS Code.

.entry-meta * {
color: red !important;
font-family: courier !important;
font-size: 16px !important;}

 

WordPress CSS Farbe Font Größe ändern von: Blogartikel Autor und Datum
WordPress CSS Farbe Font Größe ändern von: Blogartikel Autor und Datum

 

Wie kann ich bei WordPress die Schriftart, Größe und Farbe der Kategorie- bzw. der Archivbezeichnung ändern?

Bei vielen WordPress Themes ist die Archivbezeichnung (darunter fallen Kategorie, Tags / Schlagwörter, etc.) zu klein. Hübscher gestalten können Sie die Anzeige mit diesem CSS Code.

.archive .page-header h1.page-title {
color: red !important;
font-family: courier;
font-size: 20px !important;}

 

WordPress CSS Farbe Font Größe ändern von: Archiv, Kategorie
WordPress CSS Farbe Font Größe ändern von: Archiv, Kategorie

 

Wie kann ich bei WordPress die Titel der Seiten (Pages) auf jeder Seite verbergen?

Wenn Sie bei allen Ihrer Seiten (Pages) den Titel nicht anzeigen möchten, so ist dieser CSS Code ideal.

.page .entry-header {display: none !important;}

Soll der Titel bei einigen Seiten erscheinen, bei anderen nicht, so kann ich das Plugin „Hide Title“ empfehlen. Hiermit können Sie die Titel für Seiten wie auch für einzelne Artikel individuell anzeigen oder verstecken.

 

Wie kann ich bei WordPress den Post Autor und das Post Datum verbergen?

Die Informationen zum Autor und Datum des jeweiligen Artikels können Sie mit diesem CSS Code verstecken.

.entry-meta {display: none !important;}

 

Wie kann ich bei WordPress die Kategorie- bzw. Archivbezeichnung verbergen?

Falls Sie die Kategorie oder eine andere Archivbezeichnung (u.a. Tags) verbergen möchten, so können Sie das mit diesem CSS erledigen.

.archive .page-header h1.page-title {display:none !important;}

 

Das war es bereits

Ich hoffe, diese einfachen WordPress CSS Tipps konnten Ihre Frage beantworten und Ihre Suche beenden. Falls nicht – nutzen Sie bitte die Kommentarfunktion und schildern Sie mir Ihr Problem, ich werde versuchen, eine Lösung für Sie zu finden.

Falls Sie weitere „coole WordPress CSS Tipps“ haben, so freue ich mich sehr über Ihren Kommentar!

 

Das war zu technisch und rein gar nichts für Sie?

Falls diese CSS-Tipps zu technisch für Sie sind, falls Sie sich lieber auf Inhalte statt auf das WordPress-Setup konzentrieren möchten… so wäre der WordPress Starter-Service vielleicht etwas für Sie. Schauen Sie sich die Inhalte gerne an – es könnte sich für Sie lohnen.

 

6 Gedanken zu „12 einfache WordPress CSS Tipps – ohne Programmierkenntnisse

  1. Hallo,
    Ihre 12 einfachen Tipps für Word-Press haben mir sehr weitergeholfen. Sie sind auch für Programmier-Laien gut einsetzbar. Leider bekomme ich bei meinem Theme die Überschriften der Blogartikel und Widgets in der Seitenleiste nicht geändert. Welchen CSS-Code müsste ich da nehmen?
    Danke im voraus!

    1. Hallo,
      den CSS-Code zum Ändern der Überschrift der Blogartikel können Sie oben im Beitrag finden (startet mit .single-post .entry-title).
      Die Größe, Farbe und Font des Widget-Titel bzw. der Widget Überschriften ändern Sie mit diesem CSS:

      .widget .widget-title {
      font-size: 20px !important;
      color: blue !important;
      font-family: arial !important;}

      Viel Erfolg hiermit & schöne Grüße!

    1. danke, und gerne doch!
      Interessante Frage mit den Google Fonts und WordPress… dieser Artikel hier sollte die Frage hoffentlich beantworten und eine Lösung liefern. In den Kommentaren gibt es zudem haufenweise weitere Tipps zu Google Fonts.
      Viel Erfolg und ich freue mich über Rückmeldung, ob es funktioniert hat… 😉

Schreibe einen Kommentar

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