Posts mit dem Label Webvorlagen werden angezeigt. Alle Posts anzeigen
Posts mit dem Label Webvorlagen werden angezeigt. Alle Posts anzeigen

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,

15.03.2014

Reise - beach - Webvorlage

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

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 Bild von einem Strand und diesigem Himmel über dem Meer
    body {
    background: #ecb892 url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMNDE0ZGJiMjQtMzc0Mi00OWRkLWEzOGUtMjZkNTQ0MGMwODdm) repeat fixed top center;
    }
  • Tabs: Tabs sind von einem dunklen Gradienten unterlegt.
    .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;
    }
  • 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.
  • Sidebar: Die Sidebar ist von einem dunklen Gradienten unterlegt.
    .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
    background: transparent url(//www.blogblog.com/1kt/travel/bg_black_50.png) repeat scroll top left;
    }
    .main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
    background: transparent url(//www.blogblog.com/1kt/travel/bg_black_50.png) repeat scroll top left;
    }
  • Fußzeile: Die Fußzeile ist von einem dunklen Gradienten unterlegt.
    .footer-inner {
    background: transparent url(//www.blogblog.com/1kt/travel/bg_black_50.png) repeat scroll top center;
    }


Ute Ziemes, bodyvariant.blogspot.de,

14.03.2014

Reise - flight - Webvorlage

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

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 Bild von einem Blick aus einem Flugzeug
    body {
    background: #cfd9f6 url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMZDgyZmJiZTMtNWUxNC00NjA1LWJhZWMtODc3ZWQwMzZiYjcz) repeat fixed top center;
    }
  • Inhaltsbereich: Header, Tabs, Posts, Sidebar stehen auf einem gemeinsamen Hintergrund, der im oberen Bereich ein Bild von einem angeknüllten Stück Papier hat. Die Tabs sind nur nochmal mit dunkler Farbe unterlegt.
    .content-inner {
    background: #ffffff url(//www.blogblog.com/1kt/travel/bg_container.png) repeat-x scroll top left;
    background-position: left -5px;
    background-color: #ffffff;
    }
  • 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.


Ute Ziemes, bodyvariant.blogspot.de,

13.03.2014

Reise - studio - Webvorlage

Hier geht es um die Web-Version der Variante "studio" 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-studio'>

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 Bild von einem hippen renovierungsbedürftigen Zimmer
    body {
    background: #539bcd url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYTM3ZTRlZTktYzE4ZC00NWU0LWEyMzctOWFlZjVkZTkzNGY4) repeat fixed top center;
    }
  • Inhaltsbereich: Alle Elemente des Inhaltsbereichs (Header, Tabs, Posts, Sidebar) stehen auf einem gemeinsamen Hintergrund, einem dunkleren Gradienten
    .content-inner {
    background: transparent url(//blogblog.com/1kt/travel/bg_black_70.png) repeat scroll top left;
    background-position: left -0;
    background-color: transparent;
    }
  • Tab-Bereich: Hellerer dunkler Gradient als Hintergrund für die Liste insgesamt und dann zusätzlich auch nochmal für den ausgewählten Link und als Hintergrund bei Hover. Der Gradient ist zwar heller als der für den Inhaltsbereich aber er macht den Bereich dennoch dunkler, weil da die zwei Gradienten übereinander stehen.
    .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;
    }
  • 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.
  • Sidebar: Hellerer dunkler Gradient als Hintergrund für die Liste insgesamt und dann zusätzlich auch nochmal für den ausgewählten Link und als Hintergrund bei Hover. Der Gradient ist zwar heller als der für den Inhaltsbereich aber er macht den Bereich dennoch dunkler, weil da die zwei Gradienten übereinander stehen.
    .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
    background: transparent url(//www.blogblog.com/1kt/travel/bg_black_50.png) repeat scroll top left;
    }
    .main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
    background: transparent url(//www.blogblog.com/1kt/travel/bg_black_50.png) repeat scroll top left;
    }


Ute Ziemes, bodyvariant.blogspot.de,

12.03.2014

Fantastisch - leaves1 - Webvorlage

Hier geht es um die Web-Version der Variante "leaves1" 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-leaves1'>

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

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Orange-gelbe Hintergrundfarbe
  • Oberer Bereich des äußeren Hintergrunds: Gradient mit weiß-grauem Blätter-Muster
    .body-fauxcolumn-outer {
    background: transparent url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMNzE5NTg3YzUtMGU0Mi00OWQ3LTg2NjUtODk1OGVlMjg1YjZj) repeat-x scroll top center;
    }
  • Inhaltsbereich: Alle Inhalte stehen auf einem gemeinsamen Hintergrund (Header, Tabs, Posts, Sidebar, Fußzeile). Der Inhaltsbereich hat eine weiße Hintergrundfarbe und seitliche Rahmenlinien.
    .content-fauxcolumns .fauxcolumn-inner {
    border-left: 1px solid #D8AF4C;
    border-right: 1px solid #D8AF4C;
    }
  • Tabs: Die Tab-Liste hat unten eine Linie.
    .PageList {
    border-bottom: 1px solid #eddc83;
    }

    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 sieht man in dieser Variante keine Linie, weil die Farbe dafür Transparent ist.
    .main-inner .widget h2.date-header {
    border-bottom: 1px solid transparent;
    }

    Sind mehrere Posts am gleichen Tag eingeordnet, sind zweiter bis letzter Post jeweils durch eine blasse Rahmenlinie nach oben abgegrenzt.
    .post-outer, .inline-ad {
    border-bottom: 1px solid #f9f9f9;
    }
  • Sidebar: Unter jedem Gadget-Titel sieht man in dieser Variante keine Linie, weil  die Farbe dafür Transparent ist.
    .main-inner .sidebar .widget h2 {
    border-bottom: 1px solid transparent;
    }

    Unter jedem Gadget befindet sich auch in dieser Variante eine Linie.
    .main-inner .widget {
    border-bottom: 1px solid #f9f9f9;
    }


Ute Ziemes, bodyvariant.blogspot.de,

11.03.2014

Fantastisch - blossoms1Blue - Webvorlage

Hier geht es um die Web-Version der Variante "blossoms1Blue" 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-blossoms1Blue'>

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

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Himmelblaue Farbe
  • Oberer Bereich des äußeren Hintergrunds: Auf der Hintergrundfarbe liegt ein grauer Gradient mit farbigem Blätter-Muster.
    .body-fauxcolumn-outer {
    background: transparent url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMMDZjM2Q4YjctMTY2OC00ZGU2LWJjZDYtODVjOGRiOThlMGQ3) repeat-x scroll top center;
    }
  • Inhaltsbereich: Alle Inhalte stehen auf einem gemeinsamen Hintergrund (Header, Tabs, Posts, Sidebar, Fußzeile)
    Der Inhaltsbereich hat eine fliederfarbene Hintergrundfarbe, seitliche Rahmenlinien und oben einen schmalen weißen Gradienten als Hintergrundbild, der nach unten hin grau wird und sich seitlich immer wiederholt.
    .content-fauxcolumns .fauxcolumn-inner {
    background: #d4e1ff url(//www.blogblog.com/1kt/ethereal/white-fade.png) repeat-x scroll top left;
    border-left: 1px solid #bbbbff;
    border-right: 1px solid #bbbbff;
    }
  • Tabs: Die Tab-Liste hat unten eine Linie.
    .PageList {
    border-bottom: 1px solid #c2d8fa;
    }

    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 Linie 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 ebenfalls eine Linie.
    .main-inner .widget {
    border-bottom: 1px solid #DBDBDB;
    }


Ute Ziemes, bodyvariant.blogspot.de,

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,

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,

08.03.2014

Wasserzeichen - flower - Webvorlage

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

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

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Hellblaue Hintergrundfarbe und hellgrauer Gradient darüber, der einen Körnungs- und leichten Marmorierungseffekt für die Farbe bewirkt
    body {
    background: url('//www.blogblog.com/1kt/watermark/body_background_flower.png') repeat scroll left top #7CE;
    }
  • Oberer Hintergrundbereich (Schicht über äußerem Hintergrund): Bildschnipsel, die Gras und eine Pusteblume darstellen
    .main-cap-top .cap-right {
    background: transparent url(//www.blogblog.com/1kt/watermark/main_cap_flower.png) repeat-x scroll bottom center;
    }
    .main-cap-top .cap-left {
    position: absolute;
    height: 245px;
    width: 280px;
    right: 0px;
    bottom: 0px;
    background: url('//www.blogblog.com/1kt/watermark/main_overlay_flower.png') no-repeat scroll left bottom transparent;
    }
  • Tabs: Brechen nicht in nächste Zeile um, wenn sie nicht in die erste passen, sondern erscheinen dann einfach nicht. Grund dafür ist das folgende Kommando:
    .tabs-inner .widget ul {
    max-height: 34px;
    }
  • Allgemeiner Hintergrund unterhalb der Tabs: Grüne Hintergrunfarbe und hellgrauer Gradient darüber
    .main-outer {
    margin-top: 100px;
    background: #66bb33 url(//www.blogblog.com/1kt/watermark/body_background_flower.png) repeat scroll top center;
    }
  • Posts: Jeder Post wird einzeln angezeigt.
    Hellgrauer Gradient über dem Hintergrund und gepunktete Rahmenlinien
    .post-outer {
    background: url('//www.blogblog.com/1kt/watermark/post_background_birds.png') repeat scroll left top transparent;
    border: 1px dotted transparent;
    }
  • Fußzeile: Hellgrauer Gradient über dunkler Hintergrundfarbe - geht über gesamte Screenbreite
    .footer-outer {
    background: url('//www.blogblog.com/1kt/watermark/body_background_navigator.png') repeat scroll left top #310;
    }


Ute Ziemes, bodyvariant.blogspot.de,

07.03.2014

Wasserzeichen - navigator - Webvorlage

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

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

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Hintergrundfarbe und hellgrauer Gradient darüber, der einen Körnungs- und leichten Marmorierungseffekt für die Farbe bewirkt
    body {
    background: url('//www.blogblog.com/1kt/watermark/body_background_navigator.png') repeat scroll left top #441500;
    }
  • Oberer Hintergrundbereich (Schicht über äußerem Hintergrund): Transparentes Bild mit Landkarte auf transparenter Hintergrundfarbe
    .body-fauxcolumns .cap-top {
    background: url('//www.blogblog.com/1kt/watermark/body_overlay_navigator.png') no-repeat scroll center top transparent;
    }
  • Tabs: Brechen nicht in nächste Zeile um, wenn sie nicht in die erste passen, sondern erscheinen dann einfach nicht. Grund dafür ist das folgende Kommando:
    .tabs-inner .widget ul {
    max-height: 34px;
    }
  • Posts: Jeder Post wird einzeln angezeigt.
    Mittelgrauer Gradient über dem Hintergrund und eine gepunktete Rahmenlinien
    .post-outer {
    background: url('//www.blogblog.com/1kt/watermark/post_background_navigator.png') repeat scroll left top transparent;
    border: 1px dotted #321;
    }
  • Fußzeile: Hellgrauer Gradient über dunkler Hintergrundfarbe - geht über gesamte Screenbreite
    .footer-outer {
    background: url('//www.blogblog.com/1kt/watermark/post_background_navigator.png') repeat scroll left top transparent;
    border: 1px dotted #321;
    }


Ute Ziemes, bodyvariant.blogspot.de,

06.03.2014

Wasserzeichen - birds - Webvorlage

Hier geht es um die Web-Version der Variante "birds" 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-birds'>

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

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Hintergrundfarbe und sehr heller Gradient darüber, der einen Körnungs- und leichten Marmorierungseffekt für die Farbe bewirkt
    body {
    background: #c0a154 url(//www.blogblog.com/1kt/watermark/body_background_birds.png) repeat scroll top left;
    }
  • Oberer Hintergrundbereich (Schicht über äußerem Hintergrund): Transparentes Bild mit fliegenden Vögeln oben rechts auf transparenter Hintergrundfarbe
    .body-fauxcolumns .cap-top {
    background: transparent url(//www.blogblog.com/1kt/watermark/body_overlay_birds.png) no-repeat scroll top right;
    }
  • Tabs: Brechen nicht in nächste Zeile um, wenn sie nicht in die erste passen, sondern erscheinen dann einfach nicht. Grund dafür ist das folgende Kommando:
    .tabs-inner .widget ul {
    max-height: 34px;
    }
  • Posts: Jeder Post wird einzeln angezeigt.
    Sehr heller Gradient über dem Hintergrund und eine gepunktete Rahmenlinien
    .post-outer {
    background: url('//www.blogblog.com/1kt/watermark/post_background_birds.png') repeat scroll left top transparent;
    border: 1px dotted #CB9;
    }
  • Fußzeile: Heller Gradient über dunkler Hintergrundfarbe - geht über gesamte Screenbreite
    .footer-outer {
    background: url('//www.blogblog.com/1kt/watermark/body_background_navigator.png') repeat scroll left top #300;
    }


Ute Ziemes, bodyvariant.blogspot.de,

05.03.2014

Awesome - icy - Webvorlage

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

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

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Dunkelgraue Farbe
  • Tab-Bereich: Kleines dunkelgraues teiltransparentes Hintergrundbild (Gradient) für .tabs-outer, das sich ständig wiederholt - .tabs-outer geht über die gesamte Breite des jeweiligen Screens
  • Post-Bereich: Weiße Hintergrundfarbe, türkise Rahmenlinien und graue Schatten für .date-outer
  • Posts: Abgegrenzt durch Hintergrundfarbe, Rahmen und Schatten ist der Post-Tag (.date-outer). Einzelne Posts (.post-outer) haben keinen eigenen Hintergrund, keinen umlaufenden Rahmen, keine Schatten. Sind mehrere Posts am gleichen Tag eingeordnet, sind zweiter bis letzter Post jeweils durch eine Rahmenlinie nach oben abgegrenzt.


Ute Ziemes, bodyvariant.blogspot.de,

04.03.2014

Awesome - artsy - Webvorlage

Hier geht es um die Web-Version der Variante "artsy" 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-artsy'>

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 im Wesentlichen rosafarbenes Bild von einem Aquarell mit verlaufenem Rosa, Rot, Orange, Gelb
  • Header-Bereich: Kleines helles teiltransparentes Hintergrundbild (Gradient) für .header-outer, das sich ständig wiederholt - .header-outer geht über die gesamte Breite des jeweiligen Screens
  • Tab-Bereich: Kleines dunkelgraues teiltransparentes Hintergrundbild (Gradient) für .tabs-outer, das sich ständig wiederholt - .tabs-outer geht über die gesamte Breite des jeweiligen Screens
  • Datum über Posts eines Tages: Kleines dunkelgraues teiltransparentes Hintergrundbild (Gradient) für .main-inner .widget h2.date-header, das sich ständig wiederholt - Datum links positioniert - obere Ecken vom Hintergrund abgerundet
  • Post-Bereich-, Blog-Pager-Bereich: Weiße Hintergrundfarbe für .date-outer und #blog-pager
  • 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.
  • Sidebar: Kleines dunkelgraues teiltransparentes Hintergrundbild (Gradient) für .main-inner .column-right-inner, das sich ständig wiederholt
  • Fußzeile: Kleines helles teiltransparentes Hintergrundbild (Gradient) für .footer-fauxborder-left, das sich ständig wiederholt - .footer-fauxborder-left geht über die gesamte Breite des jeweiligen Screens


Ute Ziemes, bodyvariant.blogspot.de,

03.03.2014

Awesome - renewable - Webvorlage

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

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

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Beige Farbe
  • Tab-Bereich-Hintergrund: Grüne Farbe und Schmales grau-beiges Bild für .tabs-outer, das oben heller, dann dunkler und unten deutlich heller ist und sich seitlich immer weiter wiederholt - geht über gesamte Breite des jeweiligen Screens
  • Datum über Posts eines Tages: Grüne Rahmenlinie für Bereich darunter (.main-inner .widget h2) nach oben - Datum links positioniert
  • Post-Bereich-, Blog-Pager-Bereich, Sidebar: Hellere beige Hintergrundfarbe, Rahmenlinien und graue Schatten um .date-outer, #blog-pager, .main-inner .widget
  • Posts: Abgegrenzt durch Hintergrundfarbe, Rahmen und Schatten ist der Post-Tag (.date-outer). Einzelne Posts (.post-outer) haben keinen eigenen Hintergrund, keinen umlaufenden Rahmen, keine Schatten. Sind mehrere Posts am gleichen Tag eingeordnet, sind zweiter bis letzter Post jeweils durch eine Rahmenlinie nach oben abgegrenzt.
  • Fußzeile: Hellere beige Hintergrundfarbe, Rahmenlinie und grauer Schatten nach oben für .footer-fauxborder-left - geht über gesamte Breite des jeweiligen Screens


Ute Ziemes, bodyvariant.blogspot.de,

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,

01.03.2014

Awesome - light - Webvorlage

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

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

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Grau-beige Farbe
  • Tab-Bereich-Hintergrund: Schmales Bild für .tabs-outer, das oben heller, dann dunkler und unten deutlich heller ist und sich seitlich immer weiter wiederholt - geht über gesamte Breite des jeweiligen Screens
    .tabs-outer {
    overflow: hidden;
    position: relative;
    background: #eeeeee url(//www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png) repeat scroll 0 0;
    }
    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    background: #666666 url(//www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png) repeat-x scroll 0 -100px;
    color: #ffffff;
    }
  • 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.
  • Dunkler Schatten um allerhand Bereiche:
    .main-inner .column-left-inner,
    .main-inner .column-right-inner {
    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
    box-shadow: 0 0 0 rgba(0, 0, 0, .2);
    }
    .main-inner .widget {
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    }
    body .main-inner .Blog {
    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    .date-outer {
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    }
    #blog-pager {
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    }
    .footer-fauxborder-left {
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    }
  • Fußzeilen-Hintergrund: Weiße Farbe für .footer-fauxborder-left geht über gesamte Breite des jeweiligen Screens


Ute Ziemes, bodyvariant.blogspot.de,

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,

27.02.2014

Bildfenster - screen - Webvorlage

Hier geht es um die Webversion der Variante "screen" der Vorlage Bildfenster (Picture Window).

So sieht sie aus

Ungeöffnet oben:

Geöffnet unten:


So erkennt man sie im Quelltext

Vorlage:
/* - - - - - - - - - - - - - - - - - - - - - - - - - -
Blogger Template Style
Name:     Picture Window
Designer: Josh Peterson
URL:      www.noaesthetic.com
- - - - - - - - - - - - - - - - - - - - - - - - - - */

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

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

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Verschwommenes Bild von schneebelegten Gipfeln eines Hochgebirges, das man hinter Glas voller Tropfen sieht
    body {
    background: #fafafa url(//themes.googleusercontent.com/image?id=1iJBX-a-hBX2tKaDdERpElPUmvb4r5MDX9lEx06AA-UtZIQCYziZg3PFbmOyt-g2sH8Jo) repeat-x fixed top center;
    }
  • Inhaltsbereich: Alle Inhaltselemente (Header, Tabs, Posts, Sidebar, Fußzeile) liegen auf einem gemeinsamen Hintergrund, einem dunklen Gradienten. Posts und Tabs haben aber zusätzlich noch eigene Hintergrundfarben. Posts haben außerdem einen Rahmen. Jeder Post wird so deutlich abgegrenzt. Ecken sind in dieser Vorlagen-Variante nirgends abgerundet.
    .content-outer {
    background: transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
    }


Ute Ziemes, bodyvariant.blogspot.de,

26.02.2014

Bildfenster - shade - Webvorlage

Hier geht es um die Webversion der Variante "shade" der Vorlage Bildfenster (Picture Window).

So sieht sie aus

Ungeöffnet oben:

Geöffnet unten:


So erkennt man sie im Quelltext

Vorlage:
/* - - - - - - - - - - - - - - - - - - - - - - - - - -
Blogger Template Style
Name:     Picture Window
Designer: Josh Peterson
URL:      www.noaesthetic.com
- - - - - - - - - - - - - - - - - - - - - - - - - - */

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

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

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Verschwommenes Bild eines grünen Hangs mit Blick, vorbei an Bäumen, auf wolkenverhangene Bergwipfel
    body {
    background: #dddddd url(//themes.googleusercontent.com/image?id=1fupio4xM9eVxyr-k5QC5RiCJlYR35r9dXsp63RKsKt64v33poi2MvnjkX_1MULBY8BsT) repeat-x fixed bottom center;
    }
  • Inhaltsbereich: Allen Elementen (Header, Posts, Sidebar, Fußzeile) ist ein heller Gradient unterlegt. Header, Tabs Posts und Fußzeile haben aber nochmals einen Hintergrund.
    .content-outer {
    background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
    }
  • Header: Hellgrauer Gradient im Headerbereich.
    .header-outer {
    background: #992211 url(//www.blogblog.com/1kt/transparent/header_gradient_shade.png) repeat-x scroll top left;
    _background-image: none; /* Das steht da zusätzich. Durch den Unterstrich am Anfang ist das Kommando kapputt und wirkungslos. Das ist also Müll, der vor Veröffentlichung der Variante nicht entfernt wurde. Ohne Unterstrich würde das Kommando davor aufgehoben.*/
    }
  • Tabs: Die äußeren Ecken der äußeren Tabs sind abgerundet. Die Tabzeile ist mit einem hellgrauen Gradienten unterlegt. Die aktivierten und gehoverten Tabs sind mit dem gleichen Gradienten zusätzlich nochmal unterlegt, weshalb sie weniger durchsichtig und somit heller wirken.
    .tabs-inner .widget ul {
    background: #f5f5f5 url(//www.blogblog.com/1kt/transparent/tabs_gradient_shade.png) repeat scroll bottom;
    }
    .tabs-inner .widget li.selected a,
    .tabs-inner .widget li a:hover {
    position: relative;
    z-index: 1;
    background: #ffffff url(//www.blogblog.com/1kt/transparent/tabs_gradient_shade.png) repeat scroll bottom;
    }
  • Posts: Jeder Post ist mit Hintergrundfarbe hinterlegt, hat einen Rahmen und ist somit einzeln abgegrenzt. Die Post-Ecken sind abgerundet.
  • Fußzeile: Abgerundete Ecken. Mit dunklem Gradienten unterlegt.
    .footer-outer {
    background: transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
    }


Ute Ziemes, bodyvariant.blogspot.de,

25.02.2014

Bildfenster - open - Webvorlage

Hier geht es um die Webversion der Variante "open" der Vorlage Bildfenster (Picture Window).

So sieht sie aus

Ungeöffnet oben:

Geöffnet unten:


So erkennt man sie im Quelltext

Vorlage:
/* - - - - - - - - - - - - - - - - - - - - - - - - - -
Blogger Template Style
Name:     Picture Window
Designer: Josh Peterson
URL:      www.noaesthetic.com
- - - - - - - - - - - - - - - - - - - - - - - - - - */

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

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

Besondere Grundeinstellungen der Variante

  • Äußerer Hintergrund: Verschwommenes Bild einer Straße, die durch eine grüne Landschaft führt
    body {
    background: #111111 url(//themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center;
    }
  • Hautpthintergrund: Haupthintergrund hat nach oben abgerundete Ecken. Posts haben, mit geringerem Radius, alle Ecken abgerundet. Hinter Posts und Sidebar liegt ein heller Gradient. Posts haben außerdem eine weiße Hintergrundfarbe und einen Rahmen, wodurch sie deutlich einzeln abgegrenzt erscheinen.
    .main-outer {
    background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
    }
  • Tabs: Im Registerreiter-Stil, mit oben abgerundeten Ecken. Mit dunklem Gradienten unterlegt, ausgewählte und gehoverte Tabs werden jedoch mit einem hellen Gradienten unterlegt.
    .tabs-inner .widget li a {
    background: transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
    }
    .tabs-inner .widget li.selected a,
    .tabs-inner .widget li a:hover {
    background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll bottom;
    }
  • Fußzeile: Nach unten abgerundete Ecken. Mit dunklem Gradienten unterlegt.
    .footer-outer {
    background: transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
    }


Ute Ziemes, bodyvariant.blogspot.de,