PageList2

PageList1

Cookie-Hinweis Smartphone

22.07.2014

Vorlage Bildfenster: Gradient tauschen oder deaktivieren

Die drei Varianten der Vorlage Bildfenster (Picture Window) nutzen Gradienten, teiltransparente Hintergrundbilder, die auf dem jeweiligen Hintergrundfarbwert liegen.

Alle drei Varianten nutzen einen Gradienten für den Haupthintergrund. Dort bewirkt er, dass der Inhalt lesbar ist, aber das Bild des äußeren Hintergrund noch durchschimmert. In Variante "open" und "shade" wird dafür ein heller Gradient genutzt, in Variante "screen" ein dunkler. In allen drei Varianten liegt der jeweilige Gradient auf dem Hintergrundfarbwert "transparent".

Das jeweilige Kommando, das für den Haupthintergrund zuständig ist, sieht wie folgt aus:

Variante "open"
.main-outer {
background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
}

Variante "shade"
.content-outer {
background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
}

Variante "screen"
.content-outer {
background: transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
}

Gradient tauschen (Haupthintergrund)


Will man den hellen Gradienten gegen den dunklen tauschen oder umgekehrt, dann muss man das jeweilige Kommando nochmal unter Vorlage > Anpassen > Erweitert > CSS hinzufügen eintragen und darin white80 gegen black50 tauschen oder umgekehrt.

Beispiel zu Variante "screen":
/*Gradient-Kommando: black50 gegen white80 getauscht*/
.content-outer {
background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
}

Standard: black50
Getauscht gegen: white80

Gradient deaktivieren (Haupthintergrund)


Will man den Gradienten gar nicht haben, weil man für den Bereich statt Teiltransparenz eine Farbe nutzen will, die zudem unverfälscht angezeigt werden soll, dann trägt man das jeweilige Kommando unter Vorlage > Anpassen > Erweitert > CSS hinzufügen ohne das Bild ein und trägt anstelle von "transparent" den Farbwert ein, den man da haben will.

Beispiel zu Variante "shade":
/*Haupthintergrund-Kommando: transparent gegen #B0B2B1 getauscht und Gradient im Kommando gelöscht*/
.content-outer {
background: #B0B2B1;
}

transparent mit Gradient
#B0B2B1 mit Gradient
#B0B2B1 ohne Gradient

Weitere Gradienten in den Varianten "open" und "shade"

Weitere Gradienten in Variante "open"
In der Variante "open" gibt es noch drei weitere Stellen, an denen die beiden Gradienten im Einsatz sind, erstens bei den nichtausgewählten Tabs, zweitens bei den ausgewählten Tabs und drittens beim Footer.

.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;
}

.footer-outer {
background: transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
}

Auch hier kann man die Gradienten tauschen, indem man ganz einfach black50 gegen white80 tauscht oder umgekehrt.

Deaktivieren kann man den Gradienten des Footer nach dem gleichen Prinzip, wie oben beschrieben. Bei den Tabs geht man aber anders vor. Für sie trägt man die Farbe unter den vorgefertigten Eintragsmöglichkeiten ein und trägt zum Deaktivieren des Gradienten die folgenden Kommandos unter "CSS hinzufügen" ein:

/*Nichtausgewählte Tabs: Gradient deaktiviert*/
.tabs-inner .widget li a {
background-image: none;
}

/*Ausgewählte Tabs: Gradient deaktiviert*/
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
background-image: none;
}

Weitere Gradienten in Variante "shade"
Auch in der Variante "shade" gibt es noch drei weitere Stellen mit Gradienten, erstens den Header, zweitens die ausgewählten Tabs und drittens den Footer.

.header-outer {
background: #992211 url(//www.blogblog.com/1kt/transparent/header_gradient_shade.png) repeat-x scroll top left;
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
background: #ffffff url(//www.blogblog.com/1kt/transparent/tabs_gradient_shade.png) repeat scroll bottom;
}

.footer-outer {
background: transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
}

Beim Footer kann man den Gradienten nach dem gleichen Prinzip wie ganz oben beschrieben tauschen oder deaktivieren.

Um beim Header den Gradienten zu tauschen, muss man header_gradient_shade gegen black50 oder white80 tauschen und zusätzlich repeat-x in repeat ändern. Der Gradient der Tabs eignet sich für den Header nur, wenn man einen Jalousien-Effekt wünscht (Gradient ist klein und farblich abgestuft) oder man noch mehr am Kommando ändert.

Headergradient
black50 repeat

Bei den Tabs kann man tabs_gradient_shade gegen black50 oder white80 oder header_gradient_shade tauschen.

Will man beim Header und bei den Tabs den Gradienten deaktivieren, trägt man die Farbe unter den vorgefertigten Eintragsmöglichkeiten ein und trägt zum Deaktivieren des Gradienten die folgenden Kommandos unter "CSS hinzufügen" ein:

/*Header-Gradient deaktiviert*/
.header-outer {
background-image: none;
}

/*Ausgewählte Tabs: Gradient deaktiviert*/
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
background-image: none;
}


Weiterführender Link



Ute Ziemes, sg.utez.de,

8 Kommentare:

  1. Ich hätte da mal eine Frage.
    Momentan tüftel ich an einem Testblog mit der Bildfenster-Vorlage. Ich möchte gerne den inneren Rahmen ändern und ein Bild als Hintergrund. Wenn ich nun statt einem Farbcode die URL eingebe, passiert nichts und ich habe nur einen weißen Hintergrund. Was mache ich falsch?
    Wäre super dankbar für etwas Hilfe.
    LG

    AntwortenLöschen
    Antworten
    1. Um welche der drei Varianten der Vorlage Bildfenster geht es dir?
      Welchen inneren Rahmen meinst du?
      Für welchen Bereich willst du das eigene Hintergrundbild eintragen?
      Wo hattets du die URL dafür eingetragen?

      Löschen
    2. Es ist die erste Variante.
      Über ".main-inner { background" konnte ich den Hintergrund für den Rahmen um die Posts+Sidebar schon farbig verändern, allerdings möchte ich das gerne gegen einen eigenen Hintergrund tauschen damit es plastischer wirkt.
      Das mit der URL ist glaube ich genau mein Problem, weil ich nirgends finde, wo/wie man sie richtig hochläd. Ev. liegt da der Fehler.
      Wie für die eigene Titelgestaltung der Sidebar, habe ich das Bild über einen Post hochgeladen und davon dann die URL genommen...

      Löschen
    3. Korrigierte Fassung, wegen Flüchtigkeitsfehler in erster Version:

      Bildadresse herstellen per Hochladen über den Blogger-Editor ist richtig, sofern du das Bild später nicht bei Picasaweb bzw. Google+ gelöscht hast. (Löschen im Blog wäre egal, aber speichern im Post-Entwurf macht Sinn, um die Adresse dauerhaft zu wissen.) Du hast dann also eine Adresse, die mit http://1bp (oder 2bp oder 3bp oder 4bp) anfängt.

      Wenn du dein Bild in den Bereich setzen willst, in dem bislang der Gradient eingetragen ist, musst du jedoch .main-outer nehmen, nicht .main-inner. Das allein ist aber nicht dafür verantwortlich, dass dein Bild gar nicht sichtbar wird. Es würde dann eigentlich nur den gewünschten Bereich nicht korrekt treffen und zudem die runden Ecken mit eckigen überlagern.

      Die Frage ist deshalb auch, welche Maße dein Bild hat, wo darin die Motive bzw. alternativen Farbwerte sind und wo du es in dem Bereich positioniert hast. Wenn das Bild breiter ist als der Bereich, in dem es als Hintergrund zu sehen sein soll und es links ganz viel Weiß hat und erst sehr weit rechts die Motive oder alternativen Farbwerte hat und du es top left einsortiert hast, dann wird man nur das Weiß des Bildes sehen. Wenn du es top right einsortierst, wird man als Sidebar-Hintergrund die Motive/alternativen Farbwerte des Bildes sehen und nur links das Weiß des Bildes. Du musst also statt repeat top left eventuell etwas anderes eintragen oder das Bild so ändern, dass es besser passt und das neue Bild hochladen, damit du seine Adresse bekommst.

      Insgesamt ist es wichtig, dass das CSS-Kommando unter CSS hinzufügen vollständig und korrekt eingetragen wurde, sonst kann es nicht wie erwartet wirken.

      Beispiel für ein CSS-Kommando, bei dem das Hintergrundbild auf weißem (#ffffff) Hintergrund liegen soll, oben rechts einsortiert sein soll, sich bei breiterem und längerem Container horizontal und vertikal wiederholen soll und mitscrollen soll, wenn man auf der Seite scrollt:

      .main-outer {
      background: #ffffff url(BILDADRESSE) repeat scroll top right;
      }

      Erläuterungen zur Bedeutung der einzelnen Werte hinter background, siehe: http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background

      Löschen
    4. Ergänzung:

      Wenn du für .main-outer das Bild und zusätzlich für .main-inner eine Farbe als Hintergrund einträgst, dann wird das Bild in .main-outer von der Farbe in .main-inner verdeckt.

      Löschen
  2. Kann man eigentlich auch den Gradienten in der Ethereal-Vorlage (am oberen Seitenrand) auf irgendeine Weise entfernen?

    AntwortenLöschen
    Antworten
    1. Ja, siehe: Vorlage Fantastisch: Türkisen Streifen entfernen Web | Mobil

      Übrigens: Sehr schön geworden, dein Blog. Lädt ganz gewaltig zum Lesen ein. Prima.

      Löschen
    2. Danke. Dein Blog war mit Abstand der hilfreichste auf dem Weg dahin.

      Löschen