18.02.2014

Einfach - bold - Webvorlage

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

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

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Orange 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;
    }
    }
  • Header: Braun-oranger Hintergrund auf dem ein hellgrauer Gradient liegt.
    .header-outer {
    background: #cc6611 url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -400px;
    }
  • Tabs: Hellgrauer Gradient auf hellgrauer Farbe
    .tabs-inner .widget ul {
    background: #f5f5f5 url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -800px;
    }
  • 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