Seiten

▼

23.02.2014

Einfach - literate - Webvorlage

Hier geht es um die Webversion der Variante "literate" der Vorlage Einfach (Simple).

So sieht sie aus

Ungeöffnet oben:
Geöffnet unten:


So erkennt man sie im Quelltext

Vorlage:
 /* - - - - - - - - - - - - - - - - - - - - - - - - - -
Blogger Template Style
Name:     Simple
Designer: Josh Peterson
URL:      www.noaesthetic.com
- - - - - - - - - - - - - - - - - - - - - - - - - - */
Variante:
 <body class='loading variant-literate'>

Der Eintrag der Klasse verschwindet jedoch, wenn man Wesentliches an der Vorlage ändert, wie etwa das Hintergrundbild.

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Sich nach unten hin wiederholendes Bild von einem Regal mit Büchern. Das Bild ist in zwei Bereichen eingetragen, die gemeinsam wie einer aussehen.
    body { background: #513831 url(//themes.googleusercontent.com/image?id=1KH22PlFqsiVYxboQNAoJjYmRbw5M4REHmdJbHT5M2x9zVMGrCqwSjZvaQW_A10KPc6Il) repeat scroll top center /* Credit: luoman (http://www.istockphoto.com/googleimages.php?id=11394138&platform=blogger) */;
    }
    .body-fauxcolumn-outer .cap-top {
    position: absolute;
    z-index: 1;
    height: 400px;
    width: 100%;
    background: #513831 url(//themes.googleusercontent.com/image?id=1KH22PlFqsiVYxboQNAoJjYmRbw5M4REHmdJbHT5M2x9zVMGrCqwSjZvaQW_A10KPc6Il) repeat scroll top center /* Credit: luoman (http://www.istockphoto.com/googleimages.php?id=11394138&platform=blogger) */;
    }
  • Header: Beige-grüne Farbe auf der ein grauer Gradient (teiltransparentes Hintergrundbild) liegt, der dafür sorgt, dass die Header-Farbe im oberen Bereich etwas heller aussieht.
    .header-outer {
    background: #ccb666 url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -400px;
    }
  • Tabs: Die Rahmenlinien nach rechts sind die Trennlinien zwischen den Tabs.
    .tabs-inner .widget li a {
    display: inline-block;
    padding: .6em 1em;
    font: normal normal 16px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
    color: #998877;
    border-left: 1px solid #fff9ee;
    border-right: 1px solid #eee5dd;
    }
  • 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 Hintergrund des Post.
  • Sidebar: Linke Rahmenlinie als Trennlinie zum Postbereich.
    .fauxcolumn-right-outer .fauxcolumn-inner {
    border-left: 1px solid #eee5dd;
    }


Ute Ziemes, bodyvariant.blogspot.de,
um

Keine Kommentare:

Kommentar veröffentlichen