So sieht sie aus
Ungeöffnet oben:
Geöffnet unten:
So erkennt man sie im Quelltext
Vorlage:/* - - - - - - - - - - - - - - - - - - - - - - - - - -
Blogger Template Style
Name: Ethereal
Designer: Jason Morrow
URL: jasonmorrow.etsy.com
- - - - - - - - - - - - - - - - - - - - - - - - - - */
Variante:
<body class='loading variant-blossoms1Blue'>
Der Eintrag der Klasse verschwindet jedoch, wenn man Wesentliches an der Vorlage ändert, wie etwa das Hintergrundbild.
Besondere Grundeinstellungen der Variante
- Äußerer Hintergrund: Himmelblaue Farbe
- Oberer Bereich des äußeren Hintergrunds: Auf der Hintergrundfarbe liegt ein grauer Gradient mit farbigem Blätter-Muster.
.body-fauxcolumn-outer {
background: transparent url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMMDZjM2Q4YjctMTY2OC00ZGU2LWJjZDYtODVjOGRiOThlMGQ3) repeat-x scroll top center;
} - Inhaltsbereich: Alle Inhalte stehen auf einem gemeinsamen Hintergrund (Header, Tabs, Posts, Sidebar, Fußzeile)
Der Inhaltsbereich hat eine fliederfarbene Hintergrundfarbe, seitliche Rahmenlinien und oben einen schmalen weißen Gradienten als Hintergrundbild, der nach unten hin grau wird und sich seitlich immer wiederholt.
.content-fauxcolumns .fauxcolumn-inner {
background: #d4e1ff url(//www.blogblog.com/1kt/ethereal/white-fade.png) repeat-x scroll top left;
border-left: 1px solid #bbbbff;
border-right: 1px solid #bbbbff;
} - Tabs: Die Tab-Liste hat unten eine Linie.
.PageList {
border-bottom: 1px solid #c2d8fa;
}
Die oberen Tab-Ecken sind abgerundet.
.tabs-inner .widget li a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
} - Posts: Posts eines Tages (.date-outer) sind durch das Datum des Tages voneinander abgegrenzt. Unter dem Datum befindet sich eine Linie.
.main-inner .widget h2.date-header {
border-bottom: 1px solid #DBDBDB;
}
Sind mehrere Posts am gleichen Tag eingeordnet, sind zweiter bis letzter Post jeweils durch eine Linie nach oben abgegrenzt.
.post-outer, .inline-ad {
border-bottom: 1px solid #DBDBDB;
} - Sidebar: Unter jedem Gadget-Titel befindet sich eine Linie.
main-inner .sidebar .widget h2 {Unter jedem Gadget befindet sich ebenfalls eine Linie.
border-bottom: 1px solid #DBDBDB;
}
.main-inner .widget {
border-bottom: 1px solid #DBDBDB;
}
Ute Ziemes, bodyvariant.blogspot.de,
Keine Kommentare:
Kommentar veröffentlichen