02.03.2014

Awesome - groovy - Webvorlage

Hier geht es um die Webversion der Variante "groovy" der Vorlage Awesome AG (Awesome Inc.).

So sieht sie aus

Ungeöffnet oben:

Geöffnet unten:


So erkennt man sie im Quelltext

Vorlage:
/* - - - - - - - - - - - - - - - - - - - - - - - - - -
Blogger Template Style
Name:     Awesome Inc.
Designer: Tina Chen
URL:      tinachen.org
- - - - - - - - - - - - - - - - - - - - - - - - - - */

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

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

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Fixes leuchtend oranges Bild mit vielfarbigem Schnörkelmuster body {
    background: #f4af52 url(//themes.googleusercontent.com/image?id=1jBzZZhWmESbxpWuz4_KYI1iPRIJPfZVbhagMxWcJWDsBoLRejCvAeTWImo0USEiGpD5G) repeat fixed top center /* Credit: molotovcoketail (http://www.istockphoto.com/googleimages.php?id=1794602&platform=blogger) */;
    }
  • Tab-Bereich-Hintergrund: Gradient (helles, kleines, teiltransparentes Bild für .tabs-outer, das sich ständig wiederholt. Tabs-outer geht über die gesamte Breite des jeweiligen Screens
  • Datum über Posts eines Tages: Hintergrundbild für .main-inner .widget h2.date-header - Datum rechts positioniert
    .main-inner .widget h2.date-header {
    background: transparent url(//www.blogblog.com/1kt/awesomeinc/date_background_groovy.png) repeat-x scroll bottom center;
    border-top: 1px solid #664400;
    border-bottom: 1px solid transparent;
    position: absolute;
    bottom: 100%;
    right: 15px;
    }
  • Post-Bereich-, Blog-Pager-Bereich, Sidebar: Weiße Hintergrundfarb und Rahmenlinien .date-outer, #blog-pager, .main-inner .widget
  • Posts: Abgegrenzt durch Hintergrundfarbe ist der Post-Tag (.date-outer). Einzelne Posts (.post-outer) haben keinen eigenen Hintergrund. Sind mehrere Posts am gleichen Tag eingeordnet, sind zweiter bis letzter Post jeweils durch eine Rahmenlinie nach oben abgegrenzt.
  • Fußzeilen-Hintergrund: Weiße Farbe für .footer-fauxborder-left geht über gesamte Breite des jeweiligen Screens


Ute Ziemes, bodyvariant.blogspot.de,

Keine Kommentare:

Kommentar veröffentlichen