09.03.2014

Wasserzeichen - bubblegum - Webvorlage

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

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

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Pinke Hintergrundfarbe mit hellgrauem Gradient darüber
    body {
    background: url('//www.blogblog.com/1kt/watermark/body_background_bubblegum.png') repeat scroll center top #E13;
    }
  • Oberer Hintergrund: Pinke Hintergrundfarbe mit zwei Grautönen gestreiftem Gradienten darüber, der sich seitlich ständig wiederholt .body-fauxcolumns .cap-top {
    margin-top: 30px;
    background: url('//www.blogblog.com/1kt/watermark/body_overlay_bubblegum.png') repeat-x scroll left top #E13;
    height: 400px;
    }
  • Tab-Leiste: Hintergrund, Rahmen, Schatten, Endenbilder
    Gelboranger Hintergrund, breite Rahmenlinien oben und unten sowie Schatten
    .tabs-inner .PageList {
    margin-left: -11px;
    margin-right: -11px;
    background-color: #FD9;
    border-top: 3px solid #FFF;
    border-bottom: 3px solid #FFF;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    }

    Linker Tab-Pfeil nach rechts und Beschränkung auf eine einzige Tab-Zeile (max-height)
    .tabs-inner .widget ul {
    padding: 2px 25px;
    max-height: 34px;
    background: url('//www.blogblog.com/1kt/watermark/tabs_background_left_bubblegum.png') no-repeat scroll left center transparent;
    }

    Rechter Tab-Pfeil nach links
    .tabs-inner .PageList .widget-content {
    margin: -3px -11px;
    background: url('//www.blogblog.com/1kt/watermark/tabs_background_right_bubblegum.png') no-repeat scroll right center transparent;
    }
  • Posts: Jeder Post wird einzeln angezeigt.
    Hellgelbe Hintergrundfarbe, weiße dicke Rahmenlinien sowie Schatten
    .post-outer {
    background: none repeat scroll left top #FFFFE5;
    border: 6px solid #FFF;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
    }
  • Fußzeile: Heller Gradient über Rosa
    .footer-outer {
    background: url('//www.blogblog.com/1kt/watermark/body_background_birds.png') repeat scroll left top #FCC;
    }


Ute Ziemes, bodyvariant.blogspot.de,

Keine Kommentare:

Kommentar veröffentlichen