31.12.2014

Muster-Post

Ein kurzer Post mit drei kleinen Bildern, um sämtliche Bereiche um einen Post herum via Screenshot auf ein Bild zu kriegen.


Ute Ziemes, bodyvariant.blogspot.de,

16.03.2014

Reise - road - Webvorlage

Hier geht es um die Webversion der Variante "road" der Vorlage Reise (Travel).

So sieht sie aus

Ungeöffnet oben:

Geöffnet unten:


So erkennt man sie im Quelltext

Vorlage:
/* - - - - - - - - - - - - - - - - - - - - - - - - - -
Blogger Template Style
Name:     Travel
Designer: Sookhee Lee
URL:      www.plyfly.net
- - - - - - - - - - - - - - - - - - - - - - - - - - */

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

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

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Fixiertes Hintergrundbild von einem Reisebus, der auf einer Straße durch die Wüste, entlang an Elektromasten, fährt
    body {
    background: #f4bc4f url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMMDYxYTU0MmQtZTA5Yi00MTIwLTk3ZjktZWI4MzJhMDQyOTIy) repeat fixed top center;
    }
  • Inhaltsbereich: Alle Elemente des Inhaltsbereichs (Header, Tabs, Posts, Sidebar) stehen auf einem gemeinsamen Hintergrund, dem dunkleren zweier dunklen Gradienten
    .content-inner {
    background: transparent url(//www.blogblog.com/1kt/travel/bg_black_70.png) repeat scroll top left;
    background-position: left -0;
    background-color: transparent;
    }
  • Posts: Posts eines Tages (.date-outer) sind durch das Datum des Tages voneinander abgegrenzt. Sind mehrere Posts am gleichen Tag eingeordnet, sind diese nur durch die Post-Titel voneinander abgegrenzt.
  • Tabs: Die Tabs-Zeile ist von einem helleren dunklen Gradienten unterlegt. Ausgewählte und gehoverte Tabs sind zusätzlich nochmal extra von ihm unterlegt. Da die Gradienten eh schon auf dem dunklen Gradienten des Inhaltsbereichs stehen, wirkt der Tabs-Hintergrund noch dunkler.
    .tabs-inner .widget ul {
    background: transparent url(//www.blogblog.com/1kt/travel/bg_black_50.png) repeat scroll top center;
    }
    .tabs-inner .widget li.selected a,
    .tabs-inner .widget li a:hover {
    position: relative;
    z-index: 1;
    background: transparent url(//www.blogblog.com/1kt/travel/bg_black_50.png) repeat scroll top center;
    }


Ute Ziemes, bodyvariant.blogspot.de,

Reise - road - Mobilvorlage

Der Muster-Post sieht in der Standard-Mobilvorlage zur Variante "road" der Vorlage Reise (Travel) wie folgt aus:



Ute Ziemes, bodyvariant.blogspot.de,