Farbe für das Theme

Unser gewähltes Theme kommt original in den Farben schwarz-weiss daher. Die Aufgabe lautet also, herauszufinden, wie wir die Farben im Theme ändern können.

Bei der Suche in den unendlichen Weiten des Internets finde ich schnell heraus, dass man ein Child Theme für das benutzte Master Theme erstellen muss. Jetzt wäre es nicht schlecht, wenn man mehr von der CSS Syntax und den typischen Befehlen darin Ahnung hätte. Aber auch da hilft das Internet fürs erste weiter. Nach dem Lesen bzw. Anschauen verschiedener Anleitungen (How CSS works, HTML.net CSS Tutorial, Benutzung von Child Themes, Change Background Colour Youtube Video ab Minute 2:00) weiss ich, wie ich die Hintergrundfarbe selber setzen kann.

Das Child Theme für individuelle Farbgestaltung

Bei der Farbgestaltung von Elementen, die nicht über das Theme direkt konfigurierbar sind, geht es um ein «Style-Element». Daher muss ich ein Child Theme von meinem RichMaster XS Theme ableiten. Denn im Child Theme kann ich die Farben ändern, ohne dass sie ein Theme Update wieder überschreibt. Dies ist unter «Benutzung von Child Themes» bei WordPress gut beschrieben.

Danach kann ich in WordPress über die linke Navigationsleiste unter Design » Theme-Editor die style.css Datei meines Child Themes direkt editieren. Aus WordPress heraus speichere ich dann die Änderungen. Die Ergebnisse sind dann an der von WordPress publizierten Seite sofort sichtbar.

ACHTUNG: Mit WordPress 5.6, vielleicht auch schon seit einer früheren Version, gibt es hier scheinbar eine Änderung. Es wird – so erlebe ich es jedenfalls – nicht mehr jeder Style Befehl tatsächlich umgesetzt, den ich im Theme-Editor eingebe. Als neuen Weg habe ich folgendes entdeckt. Wenn ihr Style / CSS code für das ganze Theme eingeben wollt, dann folgt:

WordPress Menu Item «Design -> Customizer»

In dem dann erscheinenden Menü auf der linken Seite wählt ihr «Zusätzliches CSS». Wenn ihr den CSS code im dann eröffneten Textfenster eingebt, wirkt er tatsächlich auf das ganze Theme.

Um die Hintergrundfarbe zu setzen habe ich folgenden Code dort eingefügt:
body {
background: #F1F1F3;
}

So kann ich nun sukzessive mit CSS Code-Schnipseln Farben z.B. für Hintergrund und Text im Theme, für einzelne Elemente in den Seiten oder auch Beiträgen ändern. Unter anderem habe ich darüber den Überschriften der Beiträge und auch dem Hintergrund der Sidebar eine Farbe aus unserem Farbkonzept zugewiesen, da diese über die Theme-Konfiguration nicht per Menü zugänglich waren.

Nun stellt sich die Frage, wie finde ich heraus, wie das Element heisst, dessen Farbgestaltung ich anpassen will? Nur, wenn ich eine eindeutige Identifizierung des Elements habe, das ich verändern möchte, z.B.

  • einen Bereichsnamen wie «body», der einen ganzen Bereich der Seite oder des Beitrags betrifft,
  • einen Klassennamen, der ein bestimmtes, aber auf allen Beiträgen oder Seiten wiederkehrendes Element bezeichnet, wie «sidebar-widget»,
  • oder eine ID, die ein ganz bestimmtes nur einmalig auftretendes Element bezeichnet, wie ein einzelnes Textwidget,

kann ich es in der style.css Datei ansprechen und seine Farbgestaltung ändern. Um die Kennzeichnung zu finden, muss man sich die Website im Browser ansehen.

Den Namen des zu färbenden Objekts finden

Dies kann man ganz einfach tun: Fahrt mit der Maus über den Bereich, den ihr wissen wollt, klickt erst auf die linke Maustaste, dann auf die rechte Maustaste und schon öffnet sich ein Popup Menu. Darin das «Element untersuchen» wählen.

Danach öffnet sich im unteren Bereich des Browsers eine in mehrere Unterfenster unterteilte Ansicht des Codes der Website mit Fokus auf das vorher ausgewählte Element.

Im linken Teilfenster markiert der «Inspektor» die Zeile mit dem gewählten Element. Im gezeigten Beispiel hat es einen Klassennamen «class= «widget-title»». Will man nun für dieses Element im style.css die Farbe setzen, wird dies alle «widget-title» im sidebar damit darstellen. Der Code hierfür würde lauten (Farbe = #000000 das entspricht schwarz):
.widget-title {
color: #000000;
}

Ein Klassenname ist in CSS also durch einen vorangestellten Punkt «.» erkennbar.

Im hier markierten Element sieht man, dass dieses eine ID hat «id=»magictoolbox_wordpress_magicscroll_widget-2″». Diese bezeichnet genau diese eine Instanz einer magicscroll-box, die hier durch das Plugin Magic Scroll mit einem bestimmten Inhalt für genau dieses Sidebar erzeugt wurde.

Wenn ich für diese eine scrollbox zum Beispiel die Hintergrundfarbe verändern will, sagen wir zu weiss, also #FFFFFF, dann sieht das im CSS Code so aus:
#magictoolbox_wordpress_magicscroll_widget-2 {
background-color: #FFFFFF;
}

Das Hashtag-Zeichen stellt ihr der ID voran, damit CSS weiss, dass es sich um eine ID und nicht um eine Klasse handelt.

Ein geigneter Code-Editor

Wenn man öfters Farben oder andere Style Elemente im Theme ändern, oder auch PHP Skript-Files erweitern will, ist ein guter Code Editor hilfreich. Dieser sollte «automatisch» die Darstellung des Code-Texts durch Einrückungen und auch Farbgebung für verschiedenartige Elemente, wie z.B. Funktionscode oder Variablennamen lesbar macht. Dafür habe ich den freien Notepad++ – Editor gefunden, mit dem man beim Editieren von PHP-Scripts, CSS style sheet Dateien und HTML code – und wahrscheinlich auch anderen Skriptsprachen – wie beschrieben durch Einrückungen und Färben verschiedener Code-Elemente unterstützt wird.

Dir hat der Beitrag gefallen? Dann würden wir uns freuen, wenn Du ihn teilst.

Wir freuen uns über Kommentare, Anregungen und Diskussionen zu unseren Beiträgen

Wenn euch die Seite gefällt oder ihr Ergänzungen, Aktualisierungen oder sonstige Hinweise habt, helft uns, die Seite aktuell zu halten.