Kategorien
blog wordpress

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!

Übrigens: Unregelmäßig, ca. 1-4x/Jahr, versende ich einen Newsletter zu diversen Themen, Problemstellungen, Lösungen. Anmelden können Sie sich gleich hier:

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.

44 Antworten auf „12 einfache WordPress CSS Tipps – ohne Programmierkenntnisse“

hallo und guten Abend,
vielen Dank für deine insgesamt sehr sehr guten Beiträge zum thema Theme 2017 und den WordPress-Geschichten insgesamt.

bei meinem Einsatz des Theme 2017 stelle ich fest dass die Grafik nicht mehr via css kontrollierbar ist:

– die beiden featured Images sind jetzt in der Höhe nicht mehr richtig kontrollierbar geworden – vll. dadurch dass ich das
Theme 2017 im Customizer auf „zweispaltig“ gestellt habe.

Also, im ernst ich hab den Eindruck dass ich jetzt über CSS-Kommandos in dem Customizer nicht mehr kontrollierend „rankomme“.
Vielleicht hab ich aber auch insges. auch „gegenläufige“ und sich gewissermaßen „widersprechende“ CSS – Befehle im Customzier drinne.

wie gesagt: die Featured-Images:

[a…mit den beiden Mädels und der Schrift: „do you look for new talents…“
b…mit der Rollbahn – und der Schrift: „Your Career Starts here“]

hier ist in beiden Bildern a. und b. die Proportion irgendwie abhandengekommen – Ich fänd es gut wenn die Bilder etwas kleiner bzw. vor allen Dingen
“ niedriger “ wären.

Interessanterweise ist es so dass wenn man die Seite auf dem Handy ansieht – dann sehend die beiden Bilder a. und b. in den Proportionen – u. vor
allen Dingen in der Höhe (!) besser aus. Sie sind da (also auf dem Handy – z.B. mit Android) nicht mehr parallaxed-like – d.h. sie haben nicht
mehr ein Parallax-Verhalten beim scrollen, was mich nicht sonderlich stört – und sie sind in

a. Höhe ,,,
b. Proportion und
c. Lesbarkeit des Textes bzw. der Schrift

Nebenbei; hier, also im Android-Handy ist die Headergrafik etwas zu groß.
Zusammengefasst wär es schön, wenn ich auf dem Notebook oder Desktop – Schirm eine Darstellung der Bilder erreichen würde, die die Bilder insges. etwas
kleiner darstellt und lesbar..

Mittelfristig will ich dann das aufbauen mit dem Theme 2020 – und ggf. mit Coblocks – so wie das https://ismolik.com macht,.
mit Coblocks etwa: vgl. https://blocks.wp-a2z.org/block/feature-coblocks-feature/

Aber das soll erst im Mitte Juni angepackt werden.
Würd mich freuen wenn du mal auf die Seite guckst. Bin sicher dass du entdeckst wo es liegt mit den Prportionen.

Freue mich von Dir wieder zu hoeren

Viele Grüße aus Heidelberg
Matze

Hi Martin,
auf die Seite job-starter.com komme ich leider nicht drauf, „Forbidden“.
Ich schaue es mir gerne an, bezweifle jedoch, dass ich mit meinen „Grundkenntnissen“ hier weiterhelfen kann. Im Customizer kannst du links unten die Ansicht wechseln, mobil/desktop. Du könntest mit dem CodeInspector versuchen herauszufinden, was bei den Bildern anders ist in der mobile/desktop Ansicht. Ich vermute, das kennst du schon, nur zur Info nochmal mitgeschickt: https://www.huberthell.de/wordpress-css-element-finden-und-bearbeiten/.
Viele Grüße
Hubert

danke für den Link-Update. Ich habe mir das Problem angeschaut und erinnere mich, dass ich bei 2017 auch versuchte, ein Logo einzubauen und es alles gar nicht so funktionierte wie ich wollte. Da es mir nicht so wichtig war, habe ich die weitere Recherche sein lassen. Auch nach erneutem Anschauen komme ich auf keine gute Lösung. Meist bekomme ich alles hin, manchmal aber auch nicht, so wie leider in diesem Fall.
Als Tipp habe ich diese Seite, vielleicht kann Britta dir weiterhelfen:
https://www.internetkurse-koeln.de/twenty-seventeen-header-auf-seiten-und-beitraegen/
Oder doch ein anderes Theme… 😉
Tut mir leid, dass ich nicht helfen konnte,
schönes Wochenende und viele Grüße
Hubert

Hallo und guten Tag, vielen Dank für diesen sehr sehr wertvollen Beitrag zu dem Thema 2017 und CSS. Ich bin über das Internet auf diesen Beitrag gestoßen – er ist sehr hilfreich.
Ich hätte da noch eine kleine Zusatzfrage – vllt. kann ich die außerhalb der Kommentare stellen. Ich würde mich freuen vg Martin

Schreibe einen Kommentar

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