Bunte Social Icons in Waipoua

Kommentare 6
Erklärstück / Unterbau

Das Waipoua-Theme von Elmastudio (das Ihr hier gerade seht) zeigt die Social Icons in seinem Widget standardmäßig in Grau (genauer: #B3B4AE) an.

Man kann die Icons relativ einfach einfärben, der Code dazu steht in der aktuellen (1.0.4) style.css ab Zeile 1893 und für die gesonderten Retina-Icons weiter unten ab Zeile 3050. Ich habe mir die jeweiligen Hexcodes für den background: mit ColorSnapper aus den jeweiligen Webseiten beziehungsweise Logos geholt.

Bei einer kleinen Spontanumfrage auf Google+ wurde auch noch die Option Icons grau mit buntem Mouseover angeregt. Vielleicht probiere ich das auch noch mal aus. Ist aber ein bisschen mehr Tipperei…

WeitersagenTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

Der Autor

Thomas Cloer ist Journalist in München. Hier schreibt er privat über allerlei, was ihn so interessiert.

6 Kommentare

    • Kleiner Hint noch: Für die Retina-Icons muss man das Ganze nochmal machen – und zwar in der aktuellen (1.0.4) styls.css ab Zeile 3050. Hatte ich erst später gemerkt und den Post noch nicht aktualisiert; hole ich gleich mal nach.

  1. Hallo Thomas Cloer.
    Sehr gute Beschreibung der Farbumstellung. Ich habe auch Waipoua und stand vor dem selben Problem. Und ich habe mir die HEX-Werte der Farben notiert.
    Ich habe daraus eine Infografik gemacht und ein PDF zum Download bereitgestellt.
    Darin befinden sich alle Farben für alle Social Icons des Waipoua Themes (Stand 12/2012).
    Wenn jemand an den HEX-Werten der Farben interessiert ist, hier ist der Link:
    http://mediaimpulse.net/social-media/colors-of-social-media-infografik
    Liebe Grüße
    Markus

  2. Pingback: Farbige Social Icons im Wordpress Waipoua Theme | Ralf Siepker

  3. Pingback: Aufräumen und Frühjahrsputz: Relaunch für mein Blog | Mike Schnoor

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>