12 einfache WordPress CSS Tipps – ohne Programmierkenntnisse

Gibt es das überhaupt, einfache WordPress CSS Tipps? Na klar! Seit im WordPress Customizer CSS-Anpassungen vorgenommen werden können, 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 und Wünschen zu verschiedenen CSS-Anpassungen. 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-Anpassungen und entsprechenden CSS 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.

Noch kurz vorweg: Falls Sie WordPress-Neueinsteiger sind und Ihnen etwas Starthilfe mit WordPress gut täte – dann ist dieser Artikel bestimmt etwas für Sie.

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-Befehl ändern Sie die Default-Einstellungen für den Titel Ihrer Website.

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

WordPress CSS ändern Farbe Font Größe Titel Website

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 ändern Farbe Font Größe Website Beschreibung

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 CSS-Anpassungen, um das Untermenü bzw. die Unterpunkte zu verändern.

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

WordPress CSS ändern Farbe Font Größe Hauptmenü 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. Einen passenden Screenshot hierzu finden Sie beim nächsten Absatz, dem Ändern der Details für den Titel eines Blogartikels (sieht bei der Seite aus wie beim Titel für den Blogartikel).

.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 ändert dieser CSS-Befehl die Farbe, Schriftart und Größe.

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

WordPress CSS ändern Farbe Font Größe Titel Blogartikel

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 ändern Farbe Font Größe Inhalt von Blogartikeln

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 ändern Farbe Font Größe 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 dieser CSS-Anpassung.

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

WordPress CSS ändern Farbe Font Größe Kategorie Archivbezeichnung

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-Befehl 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: Aufgrund zahlreicher Rückfragen habe ich einen weiteren Artikel mit „noch mehr einfachen CSS-Anpassungen für WordPress“ veröffentlicht. Lesen Sie ihn sich gerne in Ruhe durch.

Für Fragen, Wünsche, Lob und Feedback nutzen Sie bitte die Kommentarfunktion. 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 ist die Starthilfe für WordPress Neueinsteiger vielleicht etwas für Sie. Schauen Sie sich die Inhalte gerne an – es könnte sich für Sie lohnen.

Und nichts mehr verpassen werden Sie mit dem Newsletter. 2-4x/Jahr informiere ich Sie über neue Artikel.

31 Gedanken zu “12 einfache WordPress CSS Tipps – ohne Programmierkenntnisse”

  1. Hallo und Danke für die Tipps.
    Ich plane, von All in One SEO Pack auf twenty nineteen umzustellen. Im Customizer habe ich schon experimentiert, natürlich erstmal ohne zu veröffentlichen. Was mich stört ist, dass sich im Überschriftbereich ein dicker strich befindet. Kann der per css entfernt werden? Und da es sich um eine Firmenseite handelt, würde ich gerne das komplette Kommentarfeld ausblenden.
    Gruß aus Aachen

    1. Hallo Roberto,
      mit Twenty Nineteen habe ich das gerade getestet, du meinst den Strich überhalb des Seitentitels? Da ich eh kein Fan der automatisch angezeigten Seitentitel bin, verschwindet sowohl der Titel als auch der Strich hiermit:
      .page .entry-header {display: none !important;}
      Kommentare kannst du generell ausschalten über Einstellungen/Diskussion bzw. gezielt für einzelne Seiten/Beiträge beim Bearbeiten dieser Seiten/Beiträge.
      Viel Erfolg damit!

  2. Hallo Hubert!
    Tolle Seite! Gratulation und großes Dankeschön dafür!
    Ich wollte dich gerne fragen ob du auch ein Code hättest um die Sidebar Breite zu verrringern auf alle Seiten. Also Blogsidebar usw.
    Vielen Dank und beste Grüße!

    1. Probiere es bitte mit diesem CSS Code hier:
      .widget {
      width: 450px !important;
      }
      Bei dem .widget müsstest du schauen, ob es das richtige Element ist und für dich passt oder ob es bei dir anders heißt. Die Breite musst du dann ausprobieren.
      Schöne Grüße & Happy Blogging
      Hubert

  3. Hallo,
    danke für die vielen guten Tipps! Etwas habe ich bis jetzt leider noch nicht gefunden. Ich möchte im Hauptmenü die Hintergrundfarbe des Balkens (und nicht die Schriftfarbe) ändern. Wie kann ich das machen?

    1. Hallo,
      im CSS habe ich dafür keine schnelle Lösung parat, am Besten versuchst du das via den Theme-Editor bzw. mit einem Child Theme.
      Falls du doch CSS verwenden möchtest, so müsstest du allen Elemente, die vorkommen, die Farbe zuweisen: z.B. body, h1, h2, usw.
      Viel Erfolg dabei!

  4. Guten Morgen,
    zuerst dachte ich „ach, wieder nicht was ich suche!“ …..denkste, hab ich mich doch glücklicherweise geirrt 😀 😀 😀
    Kurz und ausreichend erklärt, übersichtlich und interessant gestaltet. Vielen Dank, einer der wenigen Artikel die meine Suchintention sofort erfüllt haben!
    Aber auch ich habe eine Frage:
    Ich benutze ein wp theme und dort ist wie bei vielen Themes, leider die h1 von Anfang an doppelt vergeben: 1x ist es der „Titel der Website“ , 1x ist es der „Page titlte“. Ich möchte beide von h1 zu h2 umstellen, sodass ich die h1 beim Text schreiben einfach selbst als h1 kennzeichnen kann, ohne das es dann irgendwo mehr als 1x h1 pro Unterseite/seite/beitrag gibt.
    Gibts dafür auch evt. nen passenden code?
    Danke im Voraus,
    Rod. k.

  5. Hallo Hubert,
    vielen Dank für diesen kurzen Abriss mit einer enormen Unterstützung für die kleinen Dinge. In meinem Theme gibt es unter dem Titel immer noch einen fettgedruckten Untertitel, bevor der eigentliche Text beginnen kann. Wie kann ich diesen Untertitel deaktivieren?

    1. Nach einigem Suchen – ich hab’s gefunden. Neben der normalen typography.css gibts noch eine typography.min.css. Dort habe ich nach langem scrollen, weil alles in einer Zeile hintereinander geschrieben ist, den gleichen Wert Font-Weight auf 400 statt vorher 600 eingesetzt.
      .hentry .tempo-hentry > *:first-child:not(p) + p {
      font-weight: 400;
      color: #1d1d1d;
      }
      Danke für deine wunderbare Unterstützung und den Hinweis zu dem Entwicklertool. Das habe ich nun so richtig zum ersten Mal genutzt, dank dir. Und sicherlich finde ich damit auch noch die anderen kleinen Schwachstellen im Theme.

      1. Hallo Anka,
        super, dass du das hinbekommen hast (ich hatte ja fast schon aufgegeben…). Ja, das Identifizieren der Werte mit dem Tool macht es deutlich leichter. Die Hauptarbeit hast jedoch du geleistet mit deiner Detailsuche.
        Wie auch immer, Problem gelöst und das ist herrlich.
        Weiterhin viel Erfolg und schöne Grüße!

  6. Hallo,
    super Tipps, vielen Dank, sie haben mir bereits bei der neuen Gestaltung meines Website-Titels geholfen.
    Nun habe ich die Frage: Ist es möglich, bei einer Bulletliste (Aufzählungszeichen) die Aufzählungszeichen in einer anderen Farbe darzustellen als den Text?
    Habe bisher nichts gefunden dazu.
    Tausend Dank!

    1. Hallo Thea,
      ja, das ist möglich, versuche es bitte mit diesem Code hier.
      Der „dicke Punkt“ ist das Aufzählungszeichen, hier kannst Du alles mögliche einsetzen. Abstand nach rechts zum Text, Farbe des Aufzählungszeichens, fertig.
      Viel Erfolg!

      .entry-content ul li { list-style-type: none } .entry-content ul li:before { content:“•“; padding-right: 5px; color: red; }

  7. Hi,
    finde ich mega super ohne Child Theme die Schriften inkl. Farben so anpassen zu können. Das hätte ich so nie gefunden.
    Ist es auch möglich die Farbe des aktiven Menülinks von hellgrau zu blau zu ändern?
    Danke

    1. Hallo Nadia,
      schön, dass alles bisher so gut geklappt hat. Den aktiven Menülink zu ändern sollte hiermit funktionieren:

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

      Viel Erfolg & schöne Grüße!

  8. Hallo nochmal,
    wie kann ich auf meinem Blog alles zentriert einstellen. Also die Beitragsbilder, Überschriften, Weiterlesen, Bilder und den Text?
    Danke!

    1. Ebenfalls Hello again,

      falls die ganze Website zentriert dargestellt werden soll, so geht das hiermit:
      body {text-align: center;}

      Falls das Zentrieren nur für einzelne Elemente gelten soll, z.B. die Website-Kurzbeschreibung/Untertitel, dann wäre das:
      .site-description, .site-description
      {text-align: center !important;}

      Viel Erfolg dabei!!

  9. vielen Dank für Ihren super erklärenden Artikel! Das habe sogar ich, ohne Programmierkenntnisse verstanden und konnte die Farbe meiner Schriften somit super ändern.
    Nun würde ich den Titel meiner Website gerne in Schreibschrift gestalten. Wie gehe ich dann vor?

    1. freut mich, dass Ihnen der Artikel weitergeholfen hat. Ihren Website Seitentitel können Sie mit diesem Code ändern (BrushScript als Schreibschrift):

      .site-title, .site-title a {
      color: red !important;
      font-family: brush script mt !important;
      font-size: 26px !important;}

      Viel Erfolg & gutes Gelingen mit WordPress und Ihrer Seite!

  10. Hallo, danke für die Tipps bei einer Sache komme ich aber nicht klar, ich habe eine Sidebar und möchte hier die Überschriften von den Widgets von h2 auf h1 stellen. Dies deshalb, weil meine Single Post Überschriften ebenso wie mein Title Schriftzug mit h2 gespeichert sind (war schon so). Wie muss ich da vorgehen? Dieser Code hat nicht gepasst: .widget-title{/*eileens good vibes via e-mail abonnieren*//*h1*/}
    Mache es das erste mal 🙁
    Vielen Dank!!!

    1. Hallo,
      versuche es bitte hiermit, wobei du bei der Anzahl der px schauen müsstest, was denn bei deinem Theme h1 bedeutet (ansonsten einfach testen, was gut aussieht und passt):

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

      Viel Erfolg und schöne Grüße!

  11. 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.