10.03.2014

Fantastisch - hummingBirds2 - Webvorlage

Hier geht es um die Web-Version der Variante "hummingBirds2" der Vorlage Fantastisch (Ethereal).

So sieht sie aus

Ungeöffnet oben:

Geöffnet unten:


So erkennt man sie im Quelltext

Vorlage:
/* - - - - - - - - - - - - - - - - - - - - - - - - - -
Blogger Template Style
Name:     Ethereal
Designer: Jason Morrow
URL:      jasonmorrow.etsy.com
- - - - - - - - - - - - - - - - - - - - - - - - - - */


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

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

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Schmales hohes oben gelbes und unten blutoranges Hintergrundbild, das oben blasser und unten kräftiger gefärbt ist und sich seitlich immer wiederholt. Darunter wird eine blutorange Hintergrundfarbe wirksam.
    body {
    background: url('//www.blogblog.com/1kt/ethereal/birds-2toned-bg.png') repeat-x scroll center top #FB5E53;
    }
  • Oberer Bereich - Hintergrund: Gradient der nach unten hin dunkler grau wird und links und rechts Vogelmotive hat
    .content-fauxcolumn-outer .fauxborder-left {
    background-color: transparent;
    background-image: url('//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMNjViMzQ0ZDEtMWU1NS00ZTBkLWFjY2EtZjM5YmU4OTA2MjBm');
    background-repeat: no-repeat;
    background-position: left top;
    }
    .content-fauxcolumn-outer .fauxborder-right {
    background-color: transparent;
    background-image: url('//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMNjViMzQ0ZDEtMWU1NS00ZTBkLWFjY2EtZjM5YmU4OTA2MjBm');
    background-repeat: no-repeat;
    background-position: right top;
    }
  • Inhaltsbereich: Alle Inhalte stehen auf einem gemeinsamen Hintergrund (Header, Tabs, Posts, Sidebar, Fußzeile). Der Inhaltsbereich hat die Hintergrundfarbe Weiß und oben einen hellgrau-türkisen Gradienten als Hintergrundbild sowie seitliche Rahmenlinien.
    .content-fauxcolumns .fauxcolumn-inner {
    background: #ffffff url(//www.blogblog.com/1kt/ethereal/bird-2toned-blue-fade.png) repeat-x scroll top left;
    border-left: 1px solid #fb5e53;
    border-right: 1px solid #fb5e53;
    }
  • Tabs: Die Tab-Liste hat unten eine Linie.
    .PageList {
    border-bottom: 1px solid #fb5e53;
    }

    Die oberen Tab-Ecken sind abgerundet
    .tabs-inner .widget li a {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    }
    .tabs-inner .widget li.selected a,
    .tabs-inner .widget li a:hover {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    }
  • Posts: Posts eines Tages (.date-outer) sind durch das Datum des Tages voneinander abgegrenzt. Unter dem Datum befindet sich eine Linie.
    .main-inner .widget h2.date-header {
    border-bottom: 1px solid #dbdbdb;
    }
    Sind mehrere Posts am gleichen Tag eingeordnet, sind zweiter bis letzter Post jeweils durch eine Rahmenlinie nach oben abgegrenzt.
    .post-outer, .inline-ad {
    border-bottom: 1px solid #dbdbdb;
    }
  • Sidebar: Unter jedem Gadget-Titel befindet sich eine Linie
    .main-inner .sidebar .widget h2 {
    border-bottom: 1px solid #dbdbdb;
    }

    Unter jedem Gadget befindet sich eine Linie.
    .main-inner .widget {
    border-bottom: 1px solid #dbdbdb;
    }



Ute Ziemes, bodyvariant.blogspot.de,

Keine Kommentare:

Kommentar veröffentlichen