Die Farben des Themes anpassen

Geschätzte Lesezeit: 2 Minuten

Mein Theme Sampression hat eine Vielzahl von vordefinierten Farben. Um sie so zu verändern, wie es mir am besten gefällt, bearbeite ich das Stylesheet. Ich beginne, indem ich analysiere, welchen Elementen welche Farben zugewiesen sind.

Dazu öffne ziehe ich mir die Datei style.css auf meinen Rechner, öffne sie im Notepad++ und sehe mir Farbe für Farbe an, welche Elemente damit verbunden sind. Farben in Stylesheets sind üblicherweise als Hexadezimalfarbe definiert. Im Stylesheet von Sampression ist das so. Wer nicht weiß, was Hexadezimalcode für Farben bedeutet: Bitte einlesen, es gibt zahlreiche Artikel im Netz.

Schritt für Schritt betrachte ich jede einzelne Farbe und identifiziere ihre Erscheinung mit einem Onlinetool, das mir sofort anzeigt, welcher Code für welchen Farbwert steht. Das Tool heißt Color Wheel und ist sehr praktisch aufbereitet. Für viele Elemente sind identische Farbcodes vergeben. Ich trage jeden Farbwert in eine Tabelle ein, mache mir Notizen über die Farbqualität und welche Elemente damit verbunden sind.

In Sampression gibt es SECHSUNDDREISSIG verschiedene Farben. Davon sind achtzehn unterschiedlichste Variationen eines Minttons. Da hat sich jemand wirklich große Mühe gegeben. Hut ab!

Mintvariationen: #9BB0AB #80938F #8AB7AD #63857F #A6BBB7 #8AB7AC #C3DAD5  #d2dfdc #A7BDB8 #EAF8F6 #C2CFCC #C1D6D2 #D0CEDA #688E8A #DDEAE7 #A6BDB8 #75AB9F #9BC2B9 #CDEBE6
Orangetöne: #F60 #FF6600 #FE6E41
Grautöne: #666 #777 #ddd #555 #eee
Schwarztöne: #333 #444 #111
Weißtöne: #fff #fafafa #f0f0f0
Social: #3B5998 #1DCAFF #c23a2c
Rot: #F00

Eigentlich wollte ich SASS in mein Stylesheet integrieren, um die Farben leicht konfigurierbar zu gestalten. Doch eine kurze Recherche online macht deutlich, dass SASS die Performance meines Themes schwächen kann. Ich möchte mein Theme möglichst mobilfreundlich gestalten. Deshalb überarbeite ich das CSS-Stylesheet und wechsle „einfach“ die Farbwerte aus.

Der erste Schritt ist, dass ich mein vorbereitetes Farbschema auf das vorhandene umlege und jede Farbe über das Notepad++ mit einer anderen Farbe ersetze. Der zweite Schritt ist die individuelle Anpassung einzelner Elemente, falls mir die Farben nicht harmonisch erscheinen. Ich sehe mir alle Seiten an, überprüfe die einzelnen Pages und Posts und finde alles ganz gut gelungen. Teilweise mache ich noch leichte Feinabstimmungen. Im dritten Schritt überarbeite ich alle themeeigenen Grafiken in Adobe Photoshop und ersetze ihre Farben.

Der krönende Abschluss ist die Überarbeitung der social Buttons. Facebook, Twitter und Google+ werden neu angelegt. Und der kleine RSS-Button oben rechts im Eck darf ein kleiner Granat werden.

Insgesamt arbeite ich acht Stunden am neuen Farbschema. Das derzeitige Resultat mag ich ganz gern. Aber noch bin ich nicht 100%ig zufrieden. In so einem Fall sollte man die Arbeit an den Farben ruhen lassen, und einen Tag warten, bevor man neue Anpassungen macht.

Teilen Sie Ihre Meinung mit