Kategorien
blog wordpress

WordPress CSS Element finden und bearbeiten

Wie können Sie für Ihre Website oder Blog das richtige WordPress CSS Element finden und bearbeiten?

Zu meinen beiden Beiträgen mit Tipps zu einfachen CSS-Anpassungen (Teil 1 und Teil 2) hinterließen zahlreiche Leser Kommentare, zusätzlich erreichten mich viele E-Mails mit weiteren Fragen.

Während kaum noch Fragen zu „wie kann ich dies und jenes mit CSS in WordPress erreichen“ eintreffen (die beiden Beiträge scheinen das Wichtigste abzudecken), ist seit einigen Monaten eher das Problem:

Ich glaube mein CSS Code ist korrekt, aber das Element ändert sich nicht. Was kann ich tun?

Aufbau und Struktur von CSS

Als ersten Informations- und Antwort-Artikel hierzu schrieb ich ein paar Zeilen zu Aufbau und Struktur von CSS in WordPress. Dieser Beitrag deckt die Struktur und Methodik ab, mit der CSS aufzubauen ist.

Wenn Sie der dort beschriebenen Logik folgen, unter anderem zum Beispiel auf das Semikolon achten, dann sollte rein methodisch nichts schiefgehen.

Sponsored Links:

Wie kann ich das richtige WordPress CSS Element finden und bearbeiten?

Sie wissen bereits, welchen „Teil“ Ihrer Website Sie ändern möchten. Sie haben CSS-Code eingefügt aber nichts passiert. Was ist da los?

Häufig liegt es bei einem nicht funktionierenden CSS-Code daran, dass der Selektor nicht korrekt definiert ist. Übersetzt soll das heißen: Mit dem CSS wird nicht das Element getroffen, das geändert werden soll. Denn: Je nachdem, welches Theme Sie verwenden, werden einzelne Elemente ggf. unterschiedlich bezeichnet.

Wie können Sie das passende WordPress CSS Element finden?

Mit Ihrem Browser!

Anhang der folgenden Schritte zeige ich Ihnen, wie Sie die korrekte Bezeichnung für den CSS Selektor finden. Für die Screenshots benutzte ich Firefox, es funktioniert jedoch ebenso problemlos mit Chrome.

Sponsored Links:

Starten Sie den Code Inspector in Ihrem Browser

Bitte führen Sie folgende Schritte durch:

  • öffnen Sie Firefox oder Chrome
  • gehen Sie auf Ihre Website
  • navigieren Sie zu dem Element, das Sie ändern möchten
  • mit dem Mauszeiger über dem Element klicken Sie nun auf die rechte Maustaste und Sie sollten sehen:

Firefox

WordPress CSS Element untersuchen Firefox

Chrome

WordPress CSS Element untersuchen Chrome
  • nun entsprechend „Element untersuchen“ bzw. „Untersuchen“ anklicken, und es öffnet sich die Welt der HTML- und CSS-Details…

Wichtig: Es kann durchaus sein, dass Sie bei Ihrem Theme den Code Inspector nicht öffnen können. Falls dies der Fall sein sollte, so ersetzen Sie bitte die ersten beiden Punkte durch diese Schritte:

  • im WordPress-Backend in den Customizer (Design / Customizer) gehen
  • dort wird die eigene Website zur Überarbeitung angezeigt; weiter mit dem obigen dritten Punkt (navigieren zum zu ändernden Element).

Bezeichnung des Selektors herausfinden

Bewegen Sie Ihre Maus nunmehr im HTML-Bereich des Inspectors, so sehen Sie oben auf Ihrer Website, welche Bereiche der Website durch den HTML-Code (an dem Sie sich gerade befinden) definiert sind.

Gelegentlich ist es etwas Kleinarbeit, zahlreiche HTML-Verschachtelungen aufzuklappen und sich langsam an den gewünschten Bereich heranzutasten.

Im nachstehenden Screenshot erkennen Sie, dass ich die Überschrift des Widgets zu „Neueste Artikel & News“ ausgewählt habe.

Die Maus befindet sich an der Stelle des blauen Balkens im HTML-Bereich. Gleichzeitig wird oben auf der Website markiert und bereits angezeigt, dass es sich um h2.widget-title handelt. Zusätzlich sehen Sie im rechten Teil des Bildes (CSS-Bereich) ebenfalls den Namen des Selektors angezeigt.

Sie haben nun die genaue Bezeichnung des Elements (Selektors), das Sie ändern möchten.

WordPress CSS Element auswählen

Test: Änderung eines Eigenschaftswertes

Bevor Sie munter mit Ihren CSS-Anpassungen loslegen testen Sie kurz, ob eine Änderung in den Eigenschaftswerten sich in der Website entsprechend sehen lässt.

Für diesen Test nehme ich meist die Farbe des Textes. Im CSS-Bereich kommen Sie mit einem Doppelklick neben der Eigenschaft (color) in den Editiermodus. Im Beispiel habe ich schlicht „red“ als Farbe eingetippt, Enter drücken, fertig.

Die Überschrift des Widgets ist nun rot. Test erfolgreich.

WordPress CSS Element Test geänderter Eigenschaftswert

CSS Code im Customizer eingeben

Sie sind fast am Ziel. Ihre gewünschten Änderungen erfassen Sie in WordPress im Customizer unter „Zusätzliches CSS“. In der Customizer-Vorschau sollten Sie bereits die Änderungen sehen können.

Und das war es auch schon.

WordPress CSS Element Eingabe in Design Customizer Zusätzliches CSS

Weitere Informationen zu CSS und WordPress

Für diejenigen, die ein paar sehr einfache CSS-Anpassungen an ihrer WordPress-Seite selbst vornehmen möchten, hier sind die beiden Beiträge mit den CSS-Tipps:

12 einfache WordPress CSS Tipps – ohne Programmierkenntnisse

Noch mehr einfache CSS-Anpassungen für WordPress

Ergänzend finden Sie hier alle Artikel zum Thema CSS, und hier alle WordPress-Themen.

Viel Erfolg mit Ihrer Website, WordPress und CSS!

Fragen, Anregungen – oder schiere Verzweiflung?

Fragen, Lob, Kritik, Wünsche dürfen Sie gerne als Kommentar hinterlassen.

Sollten Sie mit Änderungswünschen für Ihre Website nicht klarkommen, generell etwas Unterstützung bei WordPress benötigen oder Ihr Projekt (jeglicher Art, nicht nur WordPress) vorantreiben wollen -> bitte einfach Kontakt aufnehmen.

Und nichts mehr verpassen werden Sie mit unserem Newsletter. Er erscheint unregelmäßig, eher selten – und lohnt sich dennoch (aus meiner Sicht). Melden Sie sich am besten gleich an:

3 Antworten auf „WordPress CSS Element finden und bearbeiten“

Hallo Hubert,
ich schon wieder! Danke für den Artikel, nun sollte alles klar sein. Ein Problem habe ich jedoch: Ich kann den Code Inspector auf meiner Website nicht öffnen. Bei anderen Webseiten wird er angezeigt. Kannst du mir hier erneut helfen?
Liebe Grüße
Ina

Hi Ina, ok, „das“ Problem hatte ich im Artikel nicht erwähnt – ich werde den Artikel in den kommenden Tagen ergänzen.
Bitte gehe in deinem WP-Backend in den Customizer (Design / Customizer), dort wird dir deine Website zur Überarbeitung angezeigt. Du kannst nun wie beschrieben den Code Inspector an der gewählten Stelle öffnen und dein Element suchen.
Viel Erfolg und schöne Grüße!

Schreibe einen Kommentar

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