Farben im Stylesheet beim WordPress Child Theme anpassen

In dem Artikel „Ein WordPress Child Theme anlegen“ habe ich gezeigt, wie man ein Child Theme in WordPress anlegen kann. Nun möchte ich zeigen, wie bei dem Child Theme eine Anpassung der Farben erfolgen kann. Dafür muss die Datei style.css des Childs angepasst werden. Dies kann z.B. so aussehen:

/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/
Description: Twenty Fourteen Child Theme
Author: Ihr Name
Author URI: http://blog.boisen.biz/
Template: twentyfourteen
Version: 1.0.0
*/

@import url("../twentyfourteen/style.css");

/* Theme Anpassungen ab hier einfügen*/
a {color: red;} /* Linkfarbe */
a:hover {color: grey;} /* Linkfarbe beim Überfahren mit der Maus */

/* Farben für Kopfzeile, linke Seitenleiste und Fußleiste */
.site-header, .site:before {background-color: #9ebe25;} /* Kopfzeile */ 
secondary {background-color: #9ebe25; color: red;} /* linke Seitenleiste */
.site-footer {background-color: grey;} /* Fußleiste */

/* Links */
a {color: red;} /* Farbe der Links */
a:hover {color: grey;} /* Linkfarbe beim Überfahren mit der Maus */

/* Farben für die Widgets*/
.content-sidebar .widget .widget-title {color: grey;} /* Überschriften */
.content-sidebar .widget a {color: red;} /* Farbe der Links in der Seitenleiste */
.widget a:hover {color: white;} /* Linkfarbe in der Seitenleiste beim Überfahren mit der Maus */

/* Suchmaske*/
.search-toggle {background-color: red;} /* Hintergrund für Lupe */
.search-toggle:hover:before, .search-toggle.active:before {color: white;} /* Farb des Lupensymbols */
.search-toggle:hover, .search-toggle.active {background-color: grey;} /* Hintergrund beim Überfahren mit der Maus */
.search-box {background: grey;} /* Hintergrund für Suchmaske */

/* Navigation oben*/
.primary-navigation li > a, .primary-navigation ul ul a {background-color: #9ebe25; color: white;} /* Farbe der Navigation */
.primary-navigation li:hover > a, .primary-navigation li.focus > a, .primary-navigation ul ul a:hover, .primary-navigation ul ul li.focus > a {background-color: grey; color: white;} /* Farbe beim Überfahren mit der Maus */
.primary-navigation .current-menu-item > a {background-color: #9ebe25; color: grey;} /* Aktive Seite */

/* Navigation links*/
.secondary-navigation li:hover > a, .secondary-navigation li.focus > a, .secondary-navigation ul ul a {background: grey; color: white;} /* Farbe der Navigation */
.site-navigation a:hover,.secondary-navigation ul ul a:hover, .secondary-navigation ul ul li.focus > a {background: grey; color: red;} /* Farbe beim Überfahren mit der Maus */
.site-navigation .current-menu-item > a {color: grey;} /* Aktive Seite */

Die Farben können entweder direkt bezeichnet werden oder mittels einem HTML Code gesetzt werden.

Gruß,

Stefan

Schreibe einen Kommentar

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