Style.css – Wie du dein WordPress optisch veränderst

Damit ein WordPress zu deinemWP wird, sind neben den Einstellungen des Customizer zwei Dateien deines (Child-)Themes von essenzieller Bedeutung: die functions.php und die style.css. Was sich hinter Letzterer, der Stylesheet-Datei verbirgt und wie du diese zu deinen Gunsten nutzt, zeigen dir folgenden Zeilen. 

Was macht die Datei?

Die Cascading Style Sheets (CSS) sind eine deklarative Sprache zur Gestaltung von Websites. Die Anweisungen innerhalb der Datei orientiert sich dabei am HTML-Aufbau deiner Website und gibt ihr ein Gesicht. Also beispielsweise welche Farbe zu sehen sind, an welcher Stelle sich dein Logo befindet, wie groß die Abstände zum Menü sind und welche Schriftart verwendet wird. In der Syntax spricht man von Selektoren, welche wiederum gezielt HTML-Elemente ansprechen. Mit den Deklarationen des Selektors kannst du nun die vorhandenen HTML-Elemente optisch verändern und so deine Seite beliebig gestalten. Den Aufbau und Beispiele zu CSS, zeigen wir weiter unten.

Der Customizer

Nun, da du weißt, wofür CSS zuständig ist, wollen wir es nicht verpassen, dir auch die bestehenden Mittel deines WordPress näher zu bringen, ohne zwingend eigenes CSS schreiben zu müssen. Du kannst sowohl mit Einstellungen im Customizer als auch eigenem CSS (ebenfalls im Customizer möglich), nahezu alle optischen Punkte nach deinem Gusto anpassen und individualisieren. Hierzu gibt es mehrere Möglichkeiten.

Über die Einstellungen des WordPress Customizer – Design -> Customizer – kannst du grundlegende Dinge innerhalb deines gewählten Themes einstellen.

Technisch streng genommen hat der Customzier nichts mit der style.css gemein, da die Anweisungen nicht in dieser Datei gespeichert werden. Die Darstellung wirkt sich allerdings genauso auf deine Seite aus, wie eine eigene style.css oder andere Stylesheets, von z.B. Plugins. Damit du die Zusammenhänge verstehst, ist dieses Wissen wichtig. Je nach gewählten Theme kannst du über den Customizer bereits viele Dinge nach deinem Geschmack einstellen: Layout, Typografie und Farben sind sicherlich die Bereiche, an denen die meiste Magie geschieht. Besonders innerhalb der Typografie lässt sich die Anmutung der Seite, wie die Größe von Überschriften und die Verwendung der generellen Schriftart anpassen. Auch responsive Optionen (für verschiedene Geräte wie Smartphone, Tablet oder Desktop) sind sicher sehr hilfreich, wenn es um grundlegende Einstellungen deiner Seite geht. Mittels jeder kleinen Veränderung von Farben wirst du das Standard-Theme langsam in Richtung deines ganz eigenen Themes umbauen oder gar entwickeln.

Der WordPress Customizer: Der Aufbau und Inhalt kann je nach Theme und Plugins unterschiedlich sein.

Wenn du an den Punkt kommt, wo die passende Einstellung für deine gewünschte optische Anpassung nicht gegeben ist, kommst du um das Verständnis für CSS nicht mehr herum und musst sicher ein paar eigene Zeilen schreiben. Doch keine Angst, das ist garnicht schwer. Die erste Möglichkeit dein eigenes CSS zu hinterlegen besteht direkt im Customizer unter dem Punkt Zusätzliches CSS. Hier kannst du in einem kleinen Code-Editor schnelle Änderungen vornehmen. Sollte es umfangreicher werden, solltest du dir das Konzept der eigenen style.css im Child-Theme näher anschauen.

Custom CSS

Viele Plugins bieten dir ebenfalls die Möglichkeit, eigene CSS-Anweisungen anzugeben. Meist gibt es dafür eigene Eingabefelder innerhalb der Backend-Oberfläche des Plugins. Diese ähneln sich oft und zeigen dir bestenfalls auch die Syntax-Formatierung in Farben an, damit du mögliche Fehler schnell entdeckst und beheben kannst.

Screenshot Custom CSS bei dem Plugin wpdatatables
Tabellen des Plugins wpDataTables lassen sich über eigene CSS-Anweisungen anpassen.

Deine eigene style.css

Die Formatierungen, welche du mit dem Customizer oder zuätzlichen Plugins vorgenommen hast, kannst du auch in der Datei mit dem Namen style.css vornehmen. Diese Datei liegt auf deinem Server und bestenfalls in deinem Child-Theme – z.B. unter /wp-content/themes/dein-childtheme/style.css.

Der Hauptvorteil dabei liegt in der einfachen Pflege und Findbarkeit. Du hast einen zentralen Ort, eine Datei, in der deine individuellen Anpassungen getätigt werden. Du musst nicht im Customizer oder Plugins-Feldern suchen, sondern hast eine zentrale Anlaufstelle für alle zuätzlichen, optischen Anpassungen deiner Seite.

Den grundlegenden Aufbau der style.css haben wir bereits beim Child-Theme besprochen. Schauen wir uns nun näher an, wie du die gewünschten Anpassungen mit CSS sinnvoll angehen kannst. Wenn es darum geht, das CSS deiner Website anzupassen, kommen wir um ein paar technisch und möglicherweise kompliziert anmutende Dinge nicht herum. Lass dich davon nicht beeindrucken und uns kurz eintauchen.

Teste in der Entwickler-Konsole

Mittels Browser und der dazugehörigen Konsole (rechte Maustaste -> Untersuchen – kannst du Veränderungen zunächst temporär testen.

Screenshot: Menü rechte Maustaste im Firefox Browser
Mit einem Rechtsklick auf untersuchen oder F12 öffnest du deine Browser-Console.

Hierzu öffnest du deine Website sowie die Konsole (F12) und veränderst im CSS-Bereich die entsprechenden Stile deiner gewünschten Selektoren. Standardmäßig befinden sich auf der Linken Seite der HTML-Aufbau und die gesuchten CSS-Einstellungen an der rechten Seite. Wenn du direkt bei einem Element auf deiner Seite die rechte Maustatse drückst und auf Untersuchen gehst, führt dich die Konsole zum entsprechenden Quelltext. Im nachfolgenden Screenshot deutlich zu erkennen.

ScreenshotEntwicklerkonsole im Firefox von deinwp.de
Die Button-Farbe wird über den Selektor a.button verändert und hat einen orangenen Hintergrund.

Gefallen dir deine Veränderungen, musst du diese Zeilen in dein Stylesheet übertragen. Dazu kannst du in den meisten Fällen einfach deine Anpassungen markieren und in deiner style.css hinterlegen.

Warum nur in den meisten Fällen fragst du dich nun?

So passt du dein Stylesheet an

Du kannst deine style.css über das WordPress-Backend – Design -> Theme-Datei-Editor – oder per FTP bearbeiten. Als Erstes vergewisserst du dich, dass dein WordPress über ein Child-Theme verfügt. Denn Änderungen am Haupttheme sind mit dem nächsten Update wieder weg. Dein Child-Theme besitzt eine eigene style.css-Datei, die du bedenkenlos füllen und editieren kannst. Die Formatierungen des Child-Themes werden als letztes -beim Laden einer Seite- aufgerufen und überschreiben alle vorherigen Deklarationen.

Screenshot WordPress Theme-Datei-Editor style.css
Über dein WordPress-Backend lässt sich die style.css deines (Child-)Themes bearbeiten.

Das geschieht entweder über dein Backend mittels Theme-Editor (siehe Screenshot) oder per FTP und einem Code-Editor deiner Wahl. Im Gegensatz zu Arbeiten an der functions.php, kann beim Editieren der style.css nicht so viel schief gehen. Lediglich die Optik der Website kann ungewollt aussehen, nicht aber komplett funktionsgestört sein. Solltest du dich also mal wundern, warum deine Anpassungen plötzlich nicht greifen, prüfe ob du auch alle Formatierungen sauber geöffnet und geschlossen hast. Dies erfolgt mittels der geschweiften Klammern.


Beispiele soweie weitere Tipps und Kniffe zu CSS-Anpassungen folgen in Kürze. 

Schreibe einen Kommentar