Hintergrund-Farben im Homepage Design ändern

Das Navigationsmenü hat im Standard-Design eine schwarze Hintergrundfarbe. Das finde ich nicht schön … aber wie kann man es ändern ?

  1. Zunächst muss ich den Hexadezimal-Code der Farbe finden, die ich verwenden möchte. Wenn ich ein Foto habe, auf dem genau meine gewünschte Farbe ist, kann ich dies auf die Website imagecolorpicker hochladen, und per click auf die richtige Stelle den Hex-Code (HTML-Code) ermittlen. Bei mir ist es die Farbe des Jahres, Ultraviolett #5F4B8B.
  2. Dann muss ich die richtige Stelle in meiner Homepage finden, um die Farbe zu ändern. Dazu muss man in den Programmiercode gehen. Man muss aber nicht programmieren können:
  3. im WordPress Dashbord Menü auf „Design > Editor“ gehen. Es wird der Code des Stylesheet (Datei: style.css) angezeigt.
  4. Ganz oben ist ein Inhaltsverzeichnis (Table of Content). Hier den Bereich suchen, den man ändern möchte (z.B. 4.0 Header), und an diese Stelle nach unten scrollen. In meiner Datei steht in Zeile 867: .site-header {
    background-color: #000;
    AHA, da habe ich ihn, denn #000 ist SCHWARZ und das möchte ich nicht.
  5. Also ändere ich diesen Eintrag in:
    background-color: #2F4B8B;
    und sage „Datei aktualisieren“. 
  6. Das wars. Jetzt nur noch die Seite aufrufen, ggf. mit F5 aktualisieren und das Ergebnis bewundern. Tadaaaa !
  7. Jetzt noch die Sidebar ändern:
    7.0 Sidebars: #secondary {background-color: transparent in #2F4B8B;

Wenn man weitere Farben ändern möchte, sucht man sich den richtigen Bereich im Inhaltsverzeichnis des style.css und ändert diese ebenfalls.

Kleiner Tipp: AUFSCHREIBEN was man geändert hat, sonst findet man es später nicht wieder.

Meine Änderungen:

4.0 Header: .site-header {background-color: #000 in #5F4B8B;
7.0 Sidebars: #secondary {background-color: transparent in #5F4B8B;