22.02.2014

Einfach - deep - Webvorlage

Hier geht es um die Webversion der Variante "deep" 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-deep'>

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 wiederholendes Musterbild auf roter Farbe. Ganz oben liegt ein grauer Gradient (teiltransparentes Hintergrundbild) darauf.
    .body-fauxcolumn-outer .cap-top .cap-left {
    background: transparent url(//www.blogblog.com/1kt/simple/gradients_deep.png) repeat-x scroll top left;
    }
  • Haupthintergrund: Rote Farbe.
  • Header: Grauer Gradient.
    .header-outer {
    background: transparent url(//www.blogblog.com/1kt/simple/gradients_deep.png) repeat-x scroll 0 -400px;
    }
  • Tabs: Rahmenlinie links von den Tab-Links, außer dem ersten.
    .tabs-inner .widget li a {
    border-left: 1px solid #333333;
    }
  • 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 #772222;
    }


Ute Ziemes, bodyvariant.blogspot.de,

Keine Kommentare:

Kommentar veröffentlichen