CSS Elemente herausfinden

Namen von CSS Elementen herausfinden

Inhalt

Teile diesen Beitrag!

In den neuen Versionen der WordPress Software ist eine Funktion enthalten, die mein Webdesignerherz höher schlagen lässt: zusätzliches CSS.
Diese Funktion befindet sich ganz unten im Customizer und hilft dir, deine Webseite auch über die Möglichkeiten deines Themes hinaus deinen Wünschen anzupassen.

Wunderbare Sache, WENN du dich mit CSS auskennst. Dann kannst du nämlich schnell mal eine Schriftgröße, eine Farbe oder eine ganze Schrift ändern, auch wenn das in deinem Theme so nicht vorgesehen war.

Nun ist CSS allerdings kein Hexenwerk – hat man einmal den Aufbau eines CSS-Befehls verstanden, kann man damit viel Spaß haben. Als Hilfestellung kannst du z.B. auf der Seite wiki.selfhtml.org nachsehen, welche CSS Befehle es überhaupt gibt und welche Möglichkeiten der Anpassung sie bieten.

Merke: CSS Befehle sind allgemeingültig!

Beispiel: der Befehl
{font-size: 28px;}
(Schriftgröße 28 Pixel) wird auf allen Webseiten gleich ausgeführt.

Die Schwierigkeit liegt eher darin, herauszufinden, wie des jeweilige CSS Element in deinem Theme heißt, das du verändern möchtest.

Zum Verständnis hier der grundlegende Aufbau eines CSS Befehls
Selektor {Property: Wert;}
also ist das font-size von oben die Property und 28px ist der Wert – was ist aber der Selektor?

Und das ist genau das Problem. Es gibt zwar einige Selektoren, die auf allen Webseiten gleich heißen (z.B. p für normalen Text), aber manchmal ist das Element, das du ändern möchtest, eben auch sehr viel individueller benannt. Das liegt einfach an den Themeentwicklern, die das dann so festgelegt haben.

In meinem nachfolgenden Video zeige ich dir, wie du in Chrome und in Firefox einfach herausfindest, wie das CSS Element heißt, das du ändern möchtest. Sicherlich gibt es in den anderen Browsern da auch Möglichkeiten – wie immer: suchen hilft! Und der grundsätzliche Ansatz ist hier vermutlich gleich.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

PGlmcmFtZSB0aXRsZT0iTmFtZW4gdm9uIENTUyBFbGVtZW50ZW4gaGVyYXVzZmluZGVuIiB3aWR0aD0iODAwIiBoZWlnaHQ9IjQ1MCIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9RUVZ5Sl9LdjJMTT9mZWF0dXJlPW9lbWJlZCIgZnJhbWVib3JkZXI9IjAiIGFsbG93PSJhY2NlbGVyb21ldGVyOyBhdXRvcGxheTsgY2xpcGJvYXJkLXdyaXRlOyBlbmNyeXB0ZWQtbWVkaWE7IGd5cm9zY29wZTsgcGljdHVyZS1pbi1waWN0dXJlIiBhbGxvd2Z1bGxzY3JlZW4+PC9pZnJhbWU+

Firebug für Firefox

 

Teile diesen Beitrag!

Schreibe einen Kommentar

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

 

Das Neueste aus dem Blog:

Wordpress Pagebuilder

Einsteiger Ratgeber für WordPress Page Builder

Bist du mit dem Theme deiner WordPress Webseite unzufrieden, möchtest aber nicht gleich wechseln? Möchtest du mehr Entscheidungsmöglichkeiten für dein Webseitendesign? Brauchst du eine andere Seitenaufteilung als von deinem Theme vorgegeben? Und möchtest du dieses alles, ohne vorher Programmieren zu lernen?

Weiterlesen
Ist Wordpress kompliziert

Ist WordPress wirklich so kompliziert?

Immer häufiger stolpere ich im Internet über die Aussage, dass WordPress so kompliziert zu bedienen und unübersichtlich sei, dass man lieber auf Squarespace oder ähnliches ausweichen sollte. Als überzeugter WordPressnutzer wollte ich mal etwas Licht in dieses Dunkel bringen…

Weiterlesen