Farben für das WordPress Theme „Twenty Fourteen“ anpassen
Das WordPress-Theme Twenty Fourteen ist für mich persönlich aktuell das schönste Standard-Theme von WordPress: Klar, übersichtlich und modern kommt es daher. Das es Responsive ist, also für die Darstellung auf mobilen Geräten optimiert, versteht sich fast von selbst 🙂
In der Standard-Version kommt das Theme allerdings mit dem schwarz im Kopf und der Seitenleiste für viele etwas „düster“ daher. Leider gibt es in den Theme-Optionen selbst keine Möglichkeit, die Farben anzupassen.
Doch hier kann Abhilfe geschaffen werden:
Inhaltsverzeichnis
Anpassungen mit dem Plugin „Fourteen Colors“
Wenn man das Plugin „Fourteen Colors“ installiert und aktiviert erhält man zwei Farbwähler, mit denen man die „Kontrastfarbe“ (das sind die Farben von Kopf und linkem Rand) sowie die „Akzentfarbe“ (Links, Suchmaske, etc.) einstellen kann.
Diese Option findet sich unter „Design“ -> „Anpassen“ -> „Farben“.
Anpassungen über CSS
Wer noch mehr Flexibilität bei der Anpassung der Farben wünscht, kann die Farben auch über Anpassungen der CSS-Regeln beeinflussen:
Da das Theme Twenty Fourteen keine eigene „Custom CSS“ mitbringt, man Anpassungen im Theme aber niemals direkt in der style.css vornehmen sollte, empfehle ich hierfür das Plugin „PC Custom CSS“ zu installieren.
Wenn außer den Farben noch weitere Anpassungen vorgenommen werden sollen empfiehlt es sich eventuell ein Child-Theme anzulegen.
Wenn Sie das Plugin „PC Custom CSS“ installieren, finden Sie unter „Design“ einen neuen Menüpunkt „Custom CSS“. Hier können Sie den folgenden Code einfügen (den Sie gern von mir kopieren dürfen).
Zwischen /* und */ kommentiere ich jeweils, wofür die jeweilige Codezeile steht.
Statt der Namen für die Farben (red, blue, yellow, …) können Sie natürlich auch den Farbcode Ihrer Farbe (z.B. #ff0000) verwenden, wenn Sie diesen kennen.
Hier also jetzt der Inhalt für Ihre Custom CSS:
Farben für Kopfzeile, Seitenleiste und Fußleiste
.site-header, .site:before {background-color: orange;} /* Kopf */
#secondary {background-color: grey; color: red;} /* linke Seitenleiste */
.site-footer {background-color: grey;} /* Fußleiste */Links
a {color: red;} /* Linkfarbe */
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 Sidebar */
.widget a:hover {color: white;} /* Linkfarbe in der Sidebar 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;} /* Lupensymbol */
.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: red; color: blue;} /* 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: yellow; color: green;} /* Farbe beim Überfahren mit der Maus */
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 */Wenn Sie Fragen zu dieser Anleitung haben oder wenn ich einen Bereich des Themes übersehen haben sollte, dessen Farbe Sie gern ändern möchten, dann stellen Sie Ihre Frage gern im Kommentarbereich.
Bildquelle:
© almagami – Fotolia.com
