08.03.2014

Wasserzeichen - flower - Webvorlage

Hier geht es um die Webversion der Variante "flower" der Vorlage Wasserzeichen (Watermark).

So sieht sie aus

Ungeöffnet oben:

Geöffnet unten:

So erkennt man sie im Quelltext

Vorlage:
/* - - - - - - - - - - - - - - - - - - - - - - - - - -
Blogger Template Style
Name:     Watermark
Designer: Josh Peterson
URL:      www.noaesthetic.com
- - - - - - - - - - - - - - - - - - - - - - - - - - */

Variante:
<body class='loading variant-flower'>

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 Hintergrundfarbe und hellgrauer Gradient darüber, der einen Körnungs- und leichten Marmorierungseffekt für die Farbe bewirkt
    body {
    background: url('//www.blogblog.com/1kt/watermark/body_background_flower.png') repeat scroll left top #7CE;
    }
  • Oberer Hintergrundbereich (Schicht über äußerem Hintergrund): Bildschnipsel, die Gras und eine Pusteblume darstellen
    .main-cap-top .cap-right {
    background: transparent url(//www.blogblog.com/1kt/watermark/main_cap_flower.png) repeat-x scroll bottom center;
    }
    .main-cap-top .cap-left {
    position: absolute;
    height: 245px;
    width: 280px;
    right: 0px;
    bottom: 0px;
    background: url('//www.blogblog.com/1kt/watermark/main_overlay_flower.png') no-repeat scroll left bottom transparent;
    }
  • Tabs: Brechen nicht in nächste Zeile um, wenn sie nicht in die erste passen, sondern erscheinen dann einfach nicht. Grund dafür ist das folgende Kommando:
    .tabs-inner .widget ul {
    max-height: 34px;
    }
  • Allgemeiner Hintergrund unterhalb der Tabs: Grüne Hintergrunfarbe und hellgrauer Gradient darüber
    .main-outer {
    margin-top: 100px;
    background: #66bb33 url(//www.blogblog.com/1kt/watermark/body_background_flower.png) repeat scroll top center;
    }
  • Posts: Jeder Post wird einzeln angezeigt.
    Hellgrauer Gradient über dem Hintergrund und gepunktete Rahmenlinien
    .post-outer {
    background: url('//www.blogblog.com/1kt/watermark/post_background_birds.png') repeat scroll left top transparent;
    border: 1px dotted transparent;
    }
  • Fußzeile: Hellgrauer Gradient über dunkler Hintergrundfarbe - geht über gesamte Screenbreite
    .footer-outer {
    background: url('//www.blogblog.com/1kt/watermark/body_background_navigator.png') repeat scroll left top #310;
    }


Ute Ziemes, bodyvariant.blogspot.de,

Keine Kommentare:

Kommentar veröffentlichen