So sieht sie aus
Ungeöffnet oben:
So erkennt man sie im Quelltext
Vorlage:/* - - - - - - - - - - - - - - - - - - - - - - - - - -
Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
- - - - - - - - - - - - - - - - - - - - - - - - - - */
Variante:
<body class='loading variant-wide'>
Der Eintrag der Klasse verschwindet jedoch, wenn man Wesentliches an der Vorlage ändert, wie etwa das Hintergrundbild.
Besondere Grundeinstellungen der Variante
- Äußerer Hintergrund: Grün-Gelbes Bild, das nur im oberen Bereich angezeigt wird
Grund für den Effekt: Die Container .main-outer, der unterhalb der Tab-Leiste beginnt, und .footer-outer, der auf Footer-Höhe liegt, liegen über die gesamte Breite der Anzeige und haben die Hintergrundfarbe Weiß.
body {
font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #222222;
background: #cfe7d1 url(//themes.googleusercontent.com/image?id=1x_TqXo6-7t6y2ZiuOyQ2Bk6Zod9CTtyKYtRui0IeQJe6hVlJcQiXYG2xQGkxKvl6iZMJ) repeat fixed top center /* Credit: gaffera (http://www.istockphoto.com/googleimages.php?id=4072573&platform=blogger) */;
padding: 0 0 0 0;
background-attachment: scroll;
}
.body-fauxcolumn-outer .fauxcolumn-inner {
background: transparent url(//www.blogblog.com/1kt/simple/body_gradient_tile_light.png) repeat scroll top left;
_background-image: none;
}
.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: #cfe7d1 url(//themes.googleusercontent.com/image?id=1x_TqXo6-7t6y2ZiuOyQ2Bk6Zod9CTtyKYtRui0IeQJe6hVlJcQiXYG2xQGkxKvl6iZMJ) repeat fixed top center /* Credit: gaffera (http://www.istockphoto.com/googleimages.php?id=4072573&platform=blogger) */;
background-attachment: scroll;
}
.body-fauxcolumn-outer .cap-top .cap-left {
width: 100%;
background: transparent url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll top left;
}
.main-outer, .footer-outer {
background-color: #ffffff;
} - Tabs: Die Tabs haben keine Trennlinie.
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #00818b;
border-left: 0 solid #ffffff;
border-right: 0 solid #dddddd;
} - Posts: Einzelne Tage (.date-outer) sind dadurch voneinander abgegrenzt, dass sie ein Datum drüber haben. Einzelne Posts sind dadurch abgegrenzt, dass der Hintergrund der Post-Fußzeilen anders gefärbt ist als der Post und nach unten eine Rahmenlinie hat.
- Sidebar: Linke Rahmenlinie als Trennlinie zwischen Postbereich und Sidebar.
.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid #DDD;
}
Weil in dieser Vorlagen-Variante die Textteile im oberen Bereich und auch die Abstände dort standardmäßig sehr groß sind, habe ich speziell hier den Blogtitel und die Beschreibung gekürzt und zwei Tabs gelöscht, damit nicht alles in die nächste Zeile umbricht und die Header- und Tab-Ebene nicht viel zu viel Monitorhöhe einnehmen.
Ute Ziemes, bodyvariant.blogspot.de,
Keine Kommentare:
Kommentar veröffentlichen