20.02.2014

Einfach - pale - Webvorlage

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

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

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Hellblaue Farbe, die überall unterschiedlich stark durchkommt und im oberen Bereich deutlich dunkler erscheint. Der Effekt wird von zwei Gradienten (teiltransparenten Hintergrundbildern), die auf der Hintergrundfarbe liegen, bewirkt. Der zweite Gradient liegt nur im oberen Bereich.
    .body-fauxcolumn-outer .fauxcolumn-inner {
    background: transparent url(//www.blogblog.com/1kt/simple/body_gradient_tile_light.png) repeat scroll top left;
    }
    .body-fauxcolumn-outer .cap-top .cap-left {
    background: transparent url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll top left;
    }
  • Tabs: Hellgrauer Gradient auf hellgrauer Farbe
    .tabs-inner .widget ul {
    background: url('//www.blogblog.com/1kt/simple/gradients_light.png') repeat-x scroll 0px -800px #F5F5F5;
    }
  • 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 #eeeeee;
    }


Ute Ziemes, bodyvariant.blogspot.de,

Keine Kommentare:

Kommentar veröffentlichen