Twenty Twelve – Abgerundete Ecken

Abgerundete Ecken geben dem Theme Twenty Twelve von WordPress ein angenehmeres Erscheinungsbild. Bei den Tags bzw. Schlagwörtern führen abgerundete Ecken zu höheren Klickraten respektive zu einer höheren Aufmerksamkeit für weiterführende Links innerhalb der eigenen Seite. Wie man den Code der style.css ändern muss, um diesen Effekt zu erreichen, ist im folgenden beschrieben.

Wenn Du Dir die ganze Arbeit sparen willst und das Theme mit den abgerundeten Ecken einfach laden möchtest, klicke hier zum Download des Themes my Twenty Twelve Extensions Red/White und installiere es dann einfach unter Design/Theme/Hochladen.
…und hier ist die Live-Demo des Themes (klicke dort Pulldown-Menü)…

Twenty Twelve – Abgerundete Ecken: Child-Theme erstellen

Wenn Du das Child-Theme selbst erstellen willst… Das Child-Theme für unser Theme Twenty Twelve ist schnell erstellt. Folge einfach dieser Kurzanleitung…

Twenty Twelve – Abgerundete Ecken an verschiedenen Stellen

Über abgerundete Ecken im Text und Widget-Bereich hatte ich vorher schon hier geschrieben…
Heute wollen wir uns abgerundeten Ecken beim Texthintergrund widmen. Der standardmäßig eckige Texthintergrund soll also geschmackvoll abgerundete Ecken bekommen, in der Hoffnung ich bekomme keine Abmahnung von Apple ;-).
So soll es aussehen:

Twenty Twelve - Abgerundete Ecken

Twenty Twelve – Abgerundete Ecken

Twenty Twelve – Abgerundete Ecken – Code für die style.css

In der style.css sprechen wir mit dem folgenden Code direkt Kategorie-, Schlagwörter- und Datums-Links an. Wir verändern die Vorder- und Hintergrundfarbe (background) der Links, ihren Seitenabstand (padding), und den Ecken-Radius (border-radius). Der Mouse-Over-Effekt wird durch hover bestimmt.
Wir fügen unserer Datei style.css einfach den folgenden Code hinzu:

1
2
3
/* Tags under post & Mouse over color */
.entry-meta a{color:#ffffff; background-color:#636363; padding: 0px 3px 3px 3px; border-radius: 3px 3px 3px 3px;}
.entry-meta a:hover{color:#FF8073;}

Natürlich könnt Ihr die Farben nach eigenem Gusto verändern, indem Ihr die Hexa-Codes (z.B. #636363) austauscht. Hier gibt es eine Farbauswahl…

Hast Du noch Fragen zum Thema Twenty Twelve – Abgerundete Ecken? Schreibe einen Kommentar…

2 Gedanken zu „Twenty Twelve – Abgerundete Ecken

  1. Vicky

    Mal wieder ein toller Tipp, Chris. Werd ich nachher mal in einem meiner Blogs testen. Auch, ob die Conversion dadurch wirklich steigt, denn dass kann ich mir ehrlich gesagt noch nicht vorstellen ;)

    Antworten

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>