28.02.2014

Awesome - dark - Webvorlage

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

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

Übrigens heißt awesome zu deutsch genial.

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Winziges Musterbild, das sich in alle Richtungen ständig wiederholt und der dunkleren schwarz-braunen Hintergrundfarbe eine stoffartige Struktur verleiht. Das Hintergrundbild wird nur hinter dem Headerbereich und zwischen Tabbereich und Fußzeile angezeigt.
    body {
    background: #000000 url(//www.blogblog.com/1kt/awesomeinc/body_background_dark.png) repeat scroll top left;
    }
  • Post-Bereich-, Blog-Pager-Bereich, Sidebar-Hintergründe: Hellere schwarz-braune Farbe für .date-outer, #blog-pager, .main-inner .widget
  • Posts: Abgegrenzt durch die 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.
  • Header-Bereich, Tab-Bereich bis etwas in Post-Bereich hinein - Hintergründe: Braun-beige abgestufter, nach unten blasser werdender Gradient (teiltransparentes Bild) für .body-fauxcolumn-outer .cap-top
    .body-fauxcolumn-outer .cap-top {
    position: absolute;
    z-index: 1;
    height: 276px;
    width: 100%;
    background: transparent url(//www.blogblog.com/1kt/awesomeinc/body_gradient_dark.png) repeat-x scroll top left;
    _background-image: none;
    }
    Das Kommando _background-image: none; ist wegen des Unterstrichs am Anfang defekt, deshalb wirkt es nicht. Ohne Unterstrich würde es wirken und den Gradient deaktivieren.
  • Tab-Bereich-Hintergrund: Dunklere schwarz-braune Farbe für .tabs-outer geht über gesamte Breite des jeweiligen Screens
  • Fußzeilen-Hintergrund: Hellere schwarz-braune Farbe für .footer-fauxborder-left geht über gesamte Breite des jeweiligen Screens


Ute Ziemes, bodyvariant.blogspot.de,

Keine Kommentare:

Kommentar veröffentlichen