So sieht sie aus
Ungeöffnet oben:
Geöffnet unten:
So erkennt man sie im Quelltext
Vorlage:/* - - - - - - - - - - - - - - - - - - - - - - - - - -
Blogger Template Style
Name: Picture Window
Designer: Josh Peterson
URL: www.noaesthetic.com
- - - - - - - - - - - - - - - - - - - - - - - - - - */
Variante:
<body class='loading variant-shade'>
Der Eintrag der Klasse verschwindet jedoch, wenn man Wesentliches an der Vorlage ändert, wie etwa das Hintergrundbild.
Besondere Grundeinstellungen der Variante
- Äußerer Hintergrund: Verschwommenes Bild eines grünen Hangs mit Blick, vorbei an Bäumen, auf wolkenverhangene Bergwipfel
body {
background: #dddddd url(//themes.googleusercontent.com/image?id=1fupio4xM9eVxyr-k5QC5RiCJlYR35r9dXsp63RKsKt64v33poi2MvnjkX_1MULBY8BsT) repeat-x fixed bottom center;
} - Inhaltsbereich: Allen Elementen (Header, Posts, Sidebar, Fußzeile) ist ein heller Gradient unterlegt. Header, Tabs Posts und Fußzeile haben aber nochmals einen Hintergrund.
.content-outer {
background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
} - Header: Hellgrauer Gradient im Headerbereich.
.header-outer {
background: #992211 url(//www.blogblog.com/1kt/transparent/header_gradient_shade.png) repeat-x scroll top left;
_background-image: none; /* Das steht da zusätzich. Durch den Unterstrich am Anfang ist das Kommando kapputt und wirkungslos. Das ist also Müll, der vor Veröffentlichung der Variante nicht entfernt wurde. Ohne Unterstrich würde das Kommando davor aufgehoben.*/
} - Tabs: Die äußeren Ecken der äußeren Tabs sind abgerundet. Die Tabzeile ist mit einem hellgrauen Gradienten unterlegt. Die aktivierten und gehoverten Tabs sind mit dem gleichen Gradienten zusätzlich nochmal unterlegt, weshalb sie weniger durchsichtig und somit heller wirken.
.tabs-inner .widget ul {
background: #f5f5f5 url(//www.blogblog.com/1kt/transparent/tabs_gradient_shade.png) repeat scroll bottom;
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: #ffffff url(//www.blogblog.com/1kt/transparent/tabs_gradient_shade.png) repeat scroll bottom;
} - Posts: Jeder Post ist mit Hintergrundfarbe hinterlegt, hat einen Rahmen und ist somit einzeln abgegrenzt. Die Post-Ecken sind abgerundet.
- Fußzeile: Abgerundete Ecken. Mit dunklem Gradienten unterlegt.
.footer-outer {
background: transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
}
Ute Ziemes, bodyvariant.blogspot.de,
Keine Kommentare:
Kommentar veröffentlichen