Vorlage Bildfenster: Gradient tauschen oder deaktivieren

Die drei Varianten der Vorlage Bildfenster (Picture Window) nutzen Gradienten, teiltransparente Hintergrundbilder, die auf dem jeweiligen Hintergrundfarbwert liegen.

---

Alle drei Varianten nutzen einen Gradienten für den Haupthintergrund. Dort bewirkt er, dass der Inhalt lesbar ist, aber das Bild des äußeren Hintergrund noch durchschimmert. In Variante "open" und "shade" wird dafür ein heller Gradient genutzt, in Variante "screen" ein dunkler. In allen drei Varianten liegt der jeweilige Gradient auf dem Hintergrundfarbwert "transparent".

Das jeweilige Kommando, das für den Haupthintergrund zuständig ist, sieht wie folgt aus:

Variante "open"

.main-outer {
background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
}

Variante "shade"

.content-outer {
background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
}

Variante "screen"

.content-outer {
background: transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
}

Gradient tauschen (Haupthintergrund)

Will man den hellen Gradienten gegen den dunklen tauschen oder umgekehrt, dann muss man das jeweilige Kommando nochmal unter Vorlage > Anpassen > Erweitert > CSS hinzufügen eintragen und darin white80 gegen black50 tauschen oder umgekehrt.

Beispiel zu Variante "screen":

/*Gradient-Kommando: black50 gegen white80 getauscht*/
.content-outer {
background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
}

Standard: black50

Getauscht gegen: white80

Gradient deaktivieren (Haupthintergrund)

Will man den Gradienten gar nicht haben, weil man für den Bereich statt Teiltransparenz eine Farbe nutzen will, die zudem unverfälscht angezeigt werden soll, dann trägt man das jeweilige Kommando unter Vorlage > Anpassen > Erweitert > CSS hinzufügen ohne das Bild ein und trägt anstelle von "transparent" den Farbwert ein, den man da haben will.

Beispiel zu Variante "shade":

/*Haupthintergrund-Kommando: transparent gegen #B0B2B1 getauscht und Gradient im Kommando gelöscht*/
.content-outer {
background: #B0B2B1;
}

transparent mit Gradient

#B0B2B1 mit Gradient

#B0B2B1 ohne Gradient

Weitere Gradienten in den Varianten "open" und "shade"

Weitere Gradienten in Variante "open"

In der Variante "open" gibt es noch drei weitere Stellen, an denen die beiden Gradienten im Einsatz sind, erstens bei den nichtausgewählten Tabs, zweitens bei den ausgewählten Tabs und drittens beim Footer.

.tabs-inner .widget li a {
background: transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll bottom;
}

.footer-outer {
background: transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
}

Auch hier kann man die Gradienten tauschen, indem man ganz einfach black50 gegen white80 tauscht oder umgekehrt.

Deaktivieren kann man den Gradienten des Footer nach dem gleichen Prinzip, wie oben beschrieben. Bei den Tabs geht man aber anders vor. Für sie trägt man die Farbe unter den vorgefertigten Eintragsmöglichkeiten ein und trägt zum Deaktivieren des Gradienten die folgenden Kommandos unter "CSS hinzufügen" ein:

/*Nichtausgewählte Tabs: Gradient deaktiviert*/
.tabs-inner .widget li a {
background-image: none;
}

/*Ausgewählte Tabs: Gradient deaktiviert*/
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
background-image: none;
}

Weitere Gradienten in Variante "shade"

Auch in der Variante "shade" gibt es noch drei weitere Stellen mit Gradienten, erstens den Header, zweitens die ausgewählten Tabs und drittens den Footer.

.header-outer {
background: #992211 url(//www.blogblog.com/1kt/transparent/header_gradient_shade.png) repeat-x scroll top left;
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
background: #ffffff url(//www.blogblog.com/1kt/transparent/tabs_gradient_shade.png) repeat scroll bottom;
}

.footer-outer {
background: transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
}

Beim Footer kann man den Gradienten nach dem gleichen Prinzip wie ganz oben beschrieben tauschen oder deaktivieren.

Um beim Header den Gradienten zu tauschen, muss man header_gradient_shade gegen black50 oder white80 tauschen und zusätzlich repeat-x in repeat ändern. Der Gradient der Tabs eignet sich für den Header nur, wenn man einen Jalousien-Effekt wünscht (Gradient ist klein und farblich abgestuft) oder man noch mehr am Kommando ändert.

Headergradient
black50 repeat

Bei den Tabs kann man tabs_gradient_shade gegen black50 oder white80 oder header_gradient_shade tauschen.

Will man beim Header und bei den Tabs den Gradienten deaktivieren, trägt man die Farbe unter den vorgefertigten Eintragsmöglichkeiten ein und trägt zum Deaktivieren des Gradienten die folgenden Kommandos unter "CSS hinzufügen" ein:

/*Header-Gradient deaktiviert*/
.header-outer {
background-image: none;
}

/*Ausgewählte Tabs: Gradient deaktiviert*/
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
background-image: none;
}

Weiterführender Link

• Vorlagenvarianten bei Blogger: Bildfenster Web | Mobil

Ute Ziemes, sg.utez.de, 2014-07-22