Twenty Twelve – Widget-Hintergrund-Farbe

Heute verändern wir die Widget-Hintergrund-Farbe und realisieren abgerundete Ecken im Theme Twenty Twelve. Diese Extension gilt natürlich auf der gesamten WordPress-Website und wird folgendermaßen vorgenommen. In der style.css-Datei unseres Child-Themes fügen wir einfach eine Zeile Code hinzu.

Wenn Du Dir die ganze Arbeit sparen willst und das Theme einfach laden möchtest, klicke hier zum Download und installiere das dann einfach unter Design/Theme/Hochladen.
…und hier ist die Live-Demo des Themes (klicke dort Pulldown-Menü)…

Twenty Twelve – Widget-Hintergrund-Farbe: Child-Theme erstellen

Das Child-Theme für unser Theme Twenty Twelve ist schnell erstellt. Folge einfach dieser Kurzanleitung…

Twenty Twelve – Widget-Hintergrund-Farbe

Die Hintergrundfarbe des Widget soll verändert werden, damit man den Inhalt des Widgets auch besser lesen kann. Die dunkle Schrift auf farbigen Hintergrund ist einfach schlechter zu lesen, als auf hellem bzw. weißem Hintergrund.
Für einen hellen, fast weißen Hintergrund fügen wir unserem Child-Theme folgenden Code hinzu:

1
.widget-area {background: #F5F5F5; padding: 10px;}

Ihr seht, im Vergleich zu gestern habe ich einen Seitenabstand von 10 Pixel eingestellt. Fünf Pixel waren mir etwas zu knapp. Das Lesen ist jetzt angenehmer und es sieht etwas professioneller aus.

Twenty Twelve Widget Hintergrund Farbe

Twenty Twelve Widget Hintergrund Farbe

Twenty Twelve – Abgerundete Ecken für Text- und Widget-Bereich

Abgerundete Ecken sehen toll aus. Nicht zuletzt deshalb ist Apple so erfolgreich und wird von allen nachgeahmt. Das Theme Twenty Twelve arbeitet sowieso schon mit abgerundeten Ecken im Header-Bereich. Das Header-Bild erfährt eine deutliche Aufwertung dadurch. Deshalb macht es Sinn auch im Text- und Widget-Bereich mit abgerundeten Ecken zu arbeiten. Das ganze Theme sieht so harmonischer aus.

Nach der Abrundung der Ecken sieht unsere style.css-Datei so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*
Theme Name: My Twenty Twelve Extensions W8red
Theme URI: http://www.mydomain.de/
Description: My own Twenty Twelve extensions
Author: Chris Andersen | myblogtrainer.de
Author URI: http://www.myblogtrainer.de/twenty-twelve-theme-extensions-download/
Template: twentytwelve
Version: 0.1.1
*/
 
@import url("../twentytwelve/style.css");
 
/* Body background color */
.site {background-color: #FF3300;}
 
/* Post background color */
article {background: #F5F5F5; padding: 10px; border-radius: 3px 3px 3px 3px;} 
 
/* Widget background color */
.widget-area {background: #F5F5F5; padding: 10px; border-radius: 3px 3px 3px 3px;}

Die Abrundung der Ecken wird mit dem Befehl border-radius initiiert. Dabei muss man für alle 4 Ecken der Box eine Pixelanzahl eingeben. Bei höherer Pixelanzahl wird die Abrundung deutlicher. Ich habe mich am bereits vorliegenden border-radius des Header-Bildes orientiert, um das Theme harmonisch zu halten.

Hast Du noch Fragen oder Anregungen zum Theme? Schreibe einen Kommentar…

2 Gedanken zu „Twenty Twelve – Widget-Hintergrund-Farbe

  1. Sonja

    Hallo, ich habe auch WordPress und möchte gerne das Menü mit “Runden Ecken” erstellen.
    Hast du dafür eine Anleitung? Alles andere soll Eckig bleiben.

    Wäre dankbar für Hilfe.

    Grüße,
    Sonja

    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>