So sieht sie aus
Ungeöffnet oben:
Geöffnet unten:
So erkennt man sie im Quelltext
Vorlage:/* - - - - - - - - - - - - - - - - - - - - - - - - - -
Blogger Template Style
Name: Travel
Designer: Sookhee Lee
URL: www.plyfly.net
- - - - - - - - - - - - - - - - - - - - - - - - - - */
Variante:
<body class='loading variant-studio'>
Der Eintrag der Klasse verschwindet jedoch, wenn man Wesentliches an der Vorlage ändert, wie etwa das Hintergrundbild.
Besondere Grundeinstellungen der Variante
- Äußerer Hintergrund: Fixiertes Bild von einem hippen renovierungsbedürftigen Zimmer
body {
background: #539bcd url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYTM3ZTRlZTktYzE4ZC00NWU0LWEyMzctOWFlZjVkZTkzNGY4) repeat fixed top center;
} - Inhaltsbereich: Alle Elemente des Inhaltsbereichs (Header, Tabs, Posts, Sidebar) stehen auf einem gemeinsamen Hintergrund, einem dunkleren Gradienten
.content-inner {
background: transparent url(//blogblog.com/1kt/travel/bg_black_70.png) repeat scroll top left;
background-position: left -0;
background-color: transparent;
} - Tab-Bereich:
Hellerer dunkler Gradient als Hintergrund für die Liste insgesamt und dann zusätzlich auch nochmal für den ausgewählten Link und als Hintergrund bei Hover. Der Gradient ist zwar heller als der für den Inhaltsbereich aber er macht den Bereich dennoch dunkler, weil da die zwei Gradienten übereinander stehen.
.tabs-inner .widget ul {
background: transparent url(//www.blogblog.com/1kt/travel/bg_black_50.png) repeat scroll top center;
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: transparent url(//www.blogblog.com/1kt/travel/bg_black_50.png) repeat scroll top center;
} - Posts: Posts eines Tages (.date-outer) sind durch das Datum des Tages voneinander abgegrenzt. Sind mehrere Posts am gleichen Tag eingeordnet, sind diese nur durch die Post-Titel voneinander abgegrenzt.
- Sidebar: Hellerer dunkler Gradient als Hintergrund für die Liste insgesamt und dann zusätzlich auch nochmal für den ausgewählten Link und als Hintergrund bei Hover. Der Gradient ist zwar heller als der für den Inhaltsbereich aber er macht den Bereich dennoch dunkler, weil da die zwei Gradienten übereinander stehen.
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
background: transparent url(//www.blogblog.com/1kt/travel/bg_black_50.png) repeat scroll top left;
}
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
background: transparent url(//www.blogblog.com/1kt/travel/bg_black_50.png) repeat scroll top left;
}
Ute Ziemes, bodyvariant.blogspot.de,
Keine Kommentare:
Kommentar veröffentlichen