CSS-Klasse über die Browser-Konsole herausfinden

Manchmal möchte man eine Kleinigkeit per CSS bearbeiten – die Überschrift soll ein bisschen kleiner werden, irgendwo stört eine Farbe oder man möchte ein Element verbergen. Das sind alles Dinge, die man einfach und schnell über CSS im Customizer umsetzen kann.

Dazu musst du zunächst herausfinden, welche CSS-Klasse dem Element zugeordnet ist. Du brauchst die Klasse um das Element ansprechen zu können.

Hier kommt die Browserkonsole ins Spiel. Das ist ein Fenster am Fuß des Browserfensters, in dem der HTML-Code der Website angezeigt wird. Alle Standard-Browser haben diese Funktion an Bord.

Die Browser-Konsole aktivieren

Du klickst mit der Maus auf das Element, das du anschauen möchtest und hältst dabei die rechte Maustaste gedrückt. Es erscheint ein kleines Kontextmenü. Am Mac erscheint das Kontextmenü auch, wenn man gleichzeitig zum Mausklick die CTRL-Taste gedrückt hält.

Je nach Browser heißt die Option, die wir brauchen, „Element untersuchen“ (Firefox), „Untersuchen“ (Chrome) oder „Element-Informationen“ (Safari). Im Internet-Explorer erreicht man die Option „Konsole“ über die Taste F12.

Wenn du die Option anklickst, geht unten im Browser ein Fenster auf, in dem der HTML-Code angezeigt wird. Dieses Fenster wird auch Konsole genannt.

Beispiel: Den Code für den Seitentitel anschauen

Ich habe mit der Maus den Seitentitel „Kontakt“ angeklickt, weil ich herausfinden möchte, welche CSS-Klasse dem Seitentitel zugeordnet ist.

[Bild zum Vergrößern anklicken]

Zusätzliches CSS im Customizer eintragen

Jetzt weißt du, welche CSS-Klasse der Seitentitel hat: wpPage-entryTitle. Jetzt kannst du über den Customizer den Seitentitel per CSS verändern. Dazu öffnest du den Customizer und klickst auf das Panel „Zusätzliches CSS“.

Du kannst zum Beispiel die Farbe oder die Größe verändern:

.wpPage-entryTitle{
font-size:40px;
color:red;
} 

Oder du kannst den Seitentitel ausblenden:

.wpPage-entryTitle{
display:none;
} 

Fazit

Über die Browser-Konsole kannst du die CSS-Klasse von jedem Element auf der Website herausfinden. Im Customizer kannst sofort sehen, ob die CSS-Anweisung greift.

Passiert keine Änderung, musst du die Anweisung „spezifischer“ machen, also beispielweise die Klasse des nächsthöheren Containers dazuschreiben. Oder die Anweisung mit !important verstärken.

.wpPage-entryHeader .wpPage-entryTitle{
color:red;
} 
.wpPage-entryTitle{
color:red !important;
} 

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

Schreibe einen Kommentar

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

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.