Das Aussehen, Design, der Seiten wird mit CSS Anweisungen erzeugt. So liegt auch den WordPress Themes eine Datei mit CSS Anweisungen zugrunde.

Eine sehr anschauliche Übersicht über CSS Anweisungen findet sich auf cssreference.io.

Will man einzelne Anweisungen überschreiben, etwa Hintergrundfarben, Schriftfarben oder Seitenbereiche verändern, muss man wissen, wie solche Anweisungen festgelegt werden und da ist Detektivarbeit angesagt.

Man kann auf alle grundlegenden HTML-Tags zugreifen:

<code>a{/*Links*/}, p{/*Absätze*/}, ul{/*ungeordnete Liste*/}</code> usw. 

indem man beispielsweise allen Links eine bestimmte Farbe zuweist:

<code>a{

    color:silver;  
}</code>

Damit überschreibt man aber global alle Einstellungen.

Für ein differenzierteres Vorgehen gibt es classes und IDs. Eine class definiert einen Bereich
wie beispielsweise
class=“sidebar”

Im CSS Editor kann man die class sidebar mit eigenen Eigenschaften füllen. Wichtig ist der vorangestellte Punkt.

.sidebar {

    color:yellow;

}</code>

IDs sind in der Handhabung ganz ähnlich, die Definition

<code>#tagline{color: orange;}</code>

kann im CSS Editor direkt überschrieben werden:

    <code>#tagline{color: red;}</code>

Wie findet man genau das Element, das man ändern möchte?

Angenommen, der Seitenbereich soll rechts einen Rand erhalten, dafür sollten diese CSS Anweisungen genügen:

border-right: solid 1px black

Nur wie fügt man sie ein?

Unabhängig davon, ob es sich um eine class (erkennbar am vorangestellten Punkt) oder eine ID (erkennbar am Hashtag) handelt, fehlt uns der Name, den der Entwickler gewählt hat. Üblicherweise kommen für unseren Zweck Namen wie sidebar, sidecolumn oder menu in Frage. Jetzt beginnt die Suche.

Suche im Quelltext

Wo ist die Nadel im Heuhaufen?

Suchfunktion: Strg+F

Die Eingabe der ersten Zeichen genügen, um eine Auswahl zu erhalten.

Treffer

Der gesuchte Name lautet, wie vermutet sidebar.

Entwicklertools

Die Entwicklertools erreicht man beim Internet Explorer mit der Funktionstaste F12, bei Chrome und Firefox (unter Windows) mit der Tastenfolge Strg+Umschalt+I, oder wie hier im Bild über das Menü von Chrome.

Hier ist man ersteinmal ratlos

Im unteren linken Fenster verstecken sich Dateinamen. Ein Klick auf styles.css öffnet …

Die CSS Datei des Themes

Hier finden sich alle Classes, IDs und Pseudo Classes.

Strg+F

Die Suche führt schnell zum Ziel.