CSS Änderungen einfach selber machen

Aller Anfang ist schwer

Selbst ist der Mann…und die Frau

Seit einigen Jahren verwende ich WordPress als Content Management System, um fotobeam zu betreiben. Neben der guten Bedienbarkeit spielt auch die Flexibilität von WordPress eine wesentliche Rolle für mich. So lässt sich ein Großteil der Funktionalität durch Plugins erweitern und an die eigenen Wünsche anpassen. Doch nicht immer kommt man mit einem Plugin zum Ziel. Gerade, wenn es darum geht, Änderungen am WordPress Theme vorzunehmen oder bestimmte Gestaltungselemente den eigenen Wünschen anzupassen, sind HTML und CSS Kenntnisse hilfreich.

Damit wären wir auch schon bei der Herausforderung. Nicht jeder WordPress Anwender ist auch gleichzeitig ein Programmierer. Da geht es mir auch nicht viel anders. Dennoch habe ich mir grundlegende Kenntnisse angeeignet und bin dadurch in der Lage, eine Vielzahl alltäglicher Problemstellungen zu lösen. Und darum soll es in diesem Beitrag gehen. Anhand drei einfacher Beispiele erkläre ich euch, wir ihr selbst grundlegende Änderungen am CSS Code eurer Webseite vornehmen könnt. Los geht’s…

Chrome Developer Tools

Auch Browser, wie Firefox und Microsoft Edge, haben einen Developer Modus, den ihr mit F12 erreicht.

Zunächst stellt sich die Frage, wie bekommt ihr den Quellcode eurer laufenden WordPress Webseite überhaupt zu Gesicht? Dafür bieten sich die Chrome Developer Tools an, welche Bestandteil von Googles Webbrowser sind. Um die Tools zu starten, drückt ihr einfach F12 auf der Tastatur und schon öffnet sich die Console mit den Developer Tools, Bild 1. Bevor wir anfangen, macht es Sinn kurz in die Settings zu schauen, welche ihr mit F1 erreicht. In den General Settings empfiehlt es sich bei „Disable Cache“ einen Haken zu setzen, Bild 2. Zusätzlich sollte ihr noch etwaige andere Cache Plugins in WordPress deaktivieren. So könnt ihr sicher sein, dass Änderungen am Quellcode nicht durch das Zwischenspeichern von Inhalten verfälscht werden.

  • mit Chrome Quellcode analysieren

    Bild 1

  • Cache in Chrome Developer Tools deaktivieren

    Bild 2

  • Seitenelemente analysieren

    Bild 3

Ich habe eine Testseite angelegt, um euch im Folgenden einfache Änderungen am Code zu zeigen. Im nächsten Schritt brauchen wir ein Werkzeug, um den aktiven Code zu untersuchen: das Inspect Element Tool. Es findet sich links oben in der Developer Console und kann mit einem Mausklick aktiviert werden, Bild 3. Sobald ihr jetzt über einen Bereich eurer Webseite im linken Fenster geht, wird der korrespondierende Code im rechten Fenster angezeigt. Alternativ könnt ihr auch einen rechten Mausklick auf ein Element eurer Wahl machen, z.B. eine Schaltfläche, und dann „Untersuchen“ auswählen.

Beispiel 1: Checkbox neu ausrichten

Im ersten Beispiel möchte ich eine Checkbox neu positionieren. Wie ihr im Bild seht, ist die Box und der Text „Benachrichtige mich über nachfolgende Kommentare per E-Mail.“ versetzt dargestellt. Also verwende ich das Inspect Element Tool und klicke auf die Checkbox. Jetzt kann ich den dazugehörigen Code sehen, siehe Bild 4. Die Checkbox hat 2 Styles zugeordnet – margin für den Abstand nach außen sowie einen Farbwert. Ich passe zunächst den Abstand an. Ist margin, wie im Beispiel mit vier Werten angegeben, steht jeder dieser Werte für einen Abstand, und zwar in der Reihenfolge oben, rechts, unten, links. Hier scheint also etwas mit dem Abstand nach oben nicht zu passen, der Wert von 14 Pixel ist zu groß. Ihr könnt jetzt in der rechten Spalte in der Developer Console einfach auf die Zahlen klicken und dann aus 14px beispielsweise 4px machen, Bild 5. Nach Bestätigung der Eingabe seht ihr sofort die Änderung: die vertikale Ausrichtung passt jetzt!

  • richtigen CSS Style finden

    Bild 4

  • CSS Style in Chrome verändern

    Bild 5

  • Float Style anpassen

    Bild 6

Doch in der zweiten Zeile ist der Text noch immer versetzt. Aber auch das lässt sich leicht korrigieren. Dabei hilft uns die CSS Eigenschaft float. Damit kann ein Element an die rechte oder linke Innenkante verschoben werden, so dass Text quasi herumfließt. Die Ausrichtung wiederum wird mit left oder right angepasst. Wir geben daher jetzt float: left; ein. Sehr praktisch ist, dass die Developer Console passende Vorschläge für Codeschnipsel macht. Und wie ihr in Bild 6 seht, ist die Ausrichtung jetzt korrekt! Übrigens könnt ihr in der Developer Console auch eine eingegebene CSS Eigenschaft leicht in der Live-Vorschau deaktivieren, wenn ihr den Haken in der Checkbox davor entfernt.

Doch noch sind eure Änderungen nicht von Dauer, da sie nur in der Developer Console angezeigt werden und nicht in den Live Betrieb eurer Webseite übernommen wurden.

Integration der Änderungen in eure Webseite

Dazu benötigt ihr die style.css Datei eures aktiven WordPress Themes. Üblicherweise findet ihr diese Datei im WordPress Themes-Verzeichnis unter /wp-content/themes/Theme-Name. Vorzugsweise arbeitet ihr bereits mit einem Child-Theme. Dies hat den Vorteil, dass die folgenden Änderungen an der style.css Datei bei einem Theme Update nicht verloren gehen. Nachdem ihr die Datei via FTP heruntergeladen habt, öffnet ihr diese beispielsweise in einem Texteditor.

Kopiert nun den Code-Abschnitt aus der Developer Console in die Datei. Dazu markiert ihr mit der Maus einfach den Abschnitt, drückt die rechte Maustaste und wählt „Kopieren“.

Ihr müsst nur den Code übernehmen, den ihr geändert habt. So könnt ihr background als vorhandene, unveränderte Eigenschaft weglassen. Speichert jetzt de style.css und kopiert sie via FTP wieder an ihren Ursprungsort. Wenn die Seite jetzt neu geladen wird, sind eure Änderungen für jeden sichtbar. War doch gar nicht so schwierig!

Beispiel 2: Breadcrumbs formatieren

Kommen wir zu einem weiteren Beispiel: Standardmäßig ist die Breadcrumb Navigation in meinem Theme rechts angeordnet. Ich möchte Sie jedoch linksbündig haben. Dazu wähle ich wieder den Inspector aus und klicke auf das Element, siehe Bild 7. Jetzt suche ich in der ganz rechten Spalte den passenden Code-Schnipsel. Da sich dort ein Element mit der Bezeichnung g1-nav-breadcrumbs befindet, gehe ich davon aus, dass es das Richtige ist.

  • CSS Style für Breadcrumbs finden

    Bild 7

  • CSS Style einfach verändern

    Bild 8

Ich verwende wieder die float Eigenschaft um die Ausrichtung auf links zu ändern. Und wo ich gerade dabei bin, passe ich testweise die Schriftfarbe auf blau und die Hintergrundfarbe auf hellblau an, Bild 8. Wie ihr seht, ist bei blue der Parameter „!important“ von mir hinzugefügt worden. Es kann nämlich sein, dass eine Änderung mal nicht übernommen wird, da sie übergeordnet vorgegeben wurde. Mit „!important“ könnt ihr eure Modifikation dennoch erzwingen. Das sollte jedoch nicht zu häufig geschehen.

Der finale Code für eure style.css sieht dann so aus:

Die unveränderte margin-Eigenschaft habe ich wieder weggelassen.

Beispiel 3: Rahmen von Bildern verkleinern

Die von meinem Theme vorgegebene Größe für Bilderrahmen war mir zu breit. Was lag also näher, als den CSS Style anzupassen? Dazu wieder mit dem Inspect Element Tool auf den Rahmen des Bildes klicken, Bild 9. Jetzt müssen wir noch die passende Stelle im Code finden. In der rechten Spalte scrolle ich daher weiter nach unten bis ich ein Element finde, das passen könnte: g1-frame–solid klingt irgendwie nach Rahmen und wenn ich testweise die padding Eigenschaft mit einem Mausklick auf die Box davor deaktiviere, ändert sich sofort die Vorschau. Bingo! Es ist das richtige Element, Bild 10. Normalerweise würde man jetzt erwarten, dass die Rahmenstärke mit border-width geändert wird. Diese ist jedoch schon auf einen schmalen Wert von 1px gesetzt. Daher muss es am Innenabstand liegen, welcher für die Rahmenbreite verantwortlich ist.

  • Seitenelement analyiseren

    Bild 9

  • CSS Style in Chrome anpassen

    Bild 10

  • CSS Eigenschaft modifizieren

    Bild 11

Und siehe da: Sobald ich den Wert von padding auf 3px ändere, erhalte ich einen schmalen Rahmen, Bild 11. Der finale Code wird wieder in meine style.css übernommen:

Und auch hier gilt: Die unveränderte CSS Eigenschaft für border-width müsst ihr nicht mit übernehmen. Wenn ihr mit euren Änderungen fertig seid, könnt ihr die Chrome Developer Tools mit F12 wieder schließen.

Die finale style.css

In der style.css werden also alle Änderungen am Standarddesign eurer Webseite abgespeichert. Damit ihr am Ende noch wisst, welcher Eintrag für welche Änderung verantwortlich ist, empfiehlt es sich die einzelnen Einträge mit Kommentaren zu versehen. Im Folgenden seht ihr die fertige Datei inklusive Anmerkungen:

Fazit

Wissen macht den Unterschied

Mit wenigen Handgriffen, einfachen Werkzeugen und etwas grundlegendem HTML/CSS Wissen lassen sich die wichtigsten Änderungen am Design einer WordPress Webseite selber umsetzen. Dazu solltet ihr die gängigsten Eigenschaften kennen und verstehen, wie sie funktionieren. Dazu gehören beispielsweise background-color (Hintergrundfarbe), color (Textfarbe), float (Ausrichtung), margin (Außenabstand), padding (Innenabstand) und width (Breite). Eine sehr gute Übersicht zu den verfügbaren CSS Eigenschaften und den dazugehörigen Parametern findet ihr auf der Webseite von selfhtml.

Und jetzt viel Spaß beim Ausprobieren!

  • Abonniere den fotobeam Newsletter und erhalte neue Artikel sofort in deine Mailbox!

Wie hat dir der Artikel gefallen?
[Bewertungen: 0 Durchschnitt: 0]
Posted in:

Schreibe einen Kommentar

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