Mehrfarbiger Hintergrund gewünscht?

Man kann auch Variablen eintragen, mit deren Hilfe man für einen Bereich einen mehrfarbigen Hintergrund zuordnen kann. Jede einzelne Farbe, die in dem Hintergrund vorkommen soll, kann man über den Vorlagendesigner eingeben. Die Idee und Anleitung dafür habe ich von dort: http://bloggerillustrated.blogspot.ch/2012/07/how-to-add-support-for-blogger-template-designer-in-custom-templates.html. Ich habe es nur mit alternativen Namen und Werten gefüllt.

---

Getestet habe ich das mit der PageList.

Mir gefällt die Möglichkeit, einen mehrfarbigen Hintergrund bequem erstellen zu können. Und das nur bei Bedarf; denn wenn man für jeden Farbabschnitt den gleichen Farbwert angibt, kann man mit den Variablen auch einen einfarbigen Hintergrund realisieren.

Ich habe es aber nicht als Standard übernommen, weil ich annehme, dass die meisten einen einfarbgen Hintergrund wünschen und eine einzelne Variable dafür schlanker ist als mehrere.

Wer aber gerne einen mehrfarbigen Hintergrund hätte, für den trage ich folgend entsprechende Variablen ein und als Beispiel für die Zurodnung zu einem Bereich, das Style-Kommando, das man für die PageList bräuchte.

Voreingestellt ist Gelb, Orange, Rot, Blau, Grün, zu gleich breiten Teilen und alle Farben sind leuchtend.

Variablen

  <Variable name="BgColor1Gradient" description="BgColor1Gradient" type="color" default="#ffff00" value="#ffff00"/>
  <Variable name="BgColor2Gradient" description="BgColor2Gradient" type="color" default="#ffa500" value="#ffff00"/>
  <Variable name="BgColor3Gradient" description="BgColor3Gradient" type="color" default="#ff0000" value="#ff0000"/>
  <Variable name="BgColor4Gradient" description="BgColor4Gradient" type="color" default="#0000ff" value="#0000ff"/>
  <Variable name="BgColor5Gradient" description="BgColor5Gradient" type="color" default="#008000" value="#008000"/>

Style-Kommando, das die Variablen aufgreift:

/* - utez - - - statt nichts - Eine Alternative wäre BgColorPageList oder eben nichts - Die Idee und Anleitung für Gradienten als Variablen ist von Shawn Raimer Jr http://bloggerillustrated.blogspot.ch - - - utez - */
.PageList {
background: $(BGColor1Gradient);
background: -moz-linear-gradient(left, $(BGColor1Gradient) 0%, $(BGColor1Gradient) 20%, $(BGColor2Gradient) 20%, $(BGColor2Gradient) 40%, $(BGColor3Gradient) 40%, $(BGColor3Gradient) 60%, $(BGColor4Gradient) 60%, $(BGColor4Gradient) 80%, $(BGColor5Gradient) 80%, $(BGColor5Gradient) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,$(BGColor1Gradient)), color-stop(20%,$(BGColor1Gradient)), color-stop(20%,$(BGColor2Gradient)), color-stop(40%,$(BGColor2Gradient)), color-stop(40%,$(BGColor3Gradient)), color-stop(60%,$(BGColor3Gradient)), color-stop(60%,$(BGColor4Gradient)), color-stop(80%,$(BGColor4Gradient)), color-stop(80%,$(BGColor5Gradient)), color-stop(100%,$(BGColor5Gradient)));
background: -webkit-linear-gradient(left, $(BGColor1Gradient) 0%,$(BGColor1Gradient) 20%,$(BGColor2Gradient) 20%,$(BGColor2Gradient) 40%,$(BGColor3Gradient) 40%,$(BGColor3Gradient) 60%,$(BGColor4Gradient) 60%,$(BGColor4Gradient) 80%,$(BGColor5Gradient) 80%,$(BGColor5Gradient) 100%);
background: -o-linear-gradient(left, $(BGColor1Gradient) 0%,$(BGColor1Gradient) 20%,$(BGColor2Gradient) 20%,$(BGColor2Gradient) 40%,$(BGColor3Gradient) 40%,$(BGColor3Gradient) 60%,$(BGColor4Gradient) 60%,$(BGColor4Gradient) 80%,$(BGColor5Gradient) 80%,$(BGColor5Gradient) 100%);
background: -ms-linear-gradient(left, $(BGColor1Gradient) 0%,$(BGColor1Gradient) 20%,$(BGColor2Gradient) 20%,$(BGColor2Gradient) 40%,$(BGColor3Gradient) 40%,$(BGColor3Gradient) 60%,$(BGColor4Gradient) 60%,$(BGColor4Gradient) 80%,$(BGColor5Gradient) 80%,$(BGColor5Gradient) 100%);
background: linear-gradient(left, $(BGColor1Gradient) 0%,$(BGColor1Gradient) 20%,$(BGColor2Gradient) 20%,$(BGColor2Gradient) 40%,$(BGColor3Gradient) 40%,$(BGColor3Gradient) 60%,$(BGColor4Gradient) 60%,$(BGColor4Gradient) 80%,$(BGColor5Gradient) 80%,$(BGColor5Gradient) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$(BGColor1Gradient)', endColorstr='$(BGColor5Gradient)',GradientType=1 );
}

Dazu passt auch das:

.PageList {
border-top: 5px solid black;
}

Und außerdem:

5px statt 2px gedashter linker Border der Sidebar.

Beispiele in Bildern:

5 verschiedene Farben sind möglich.

Jeder Abschnitt kann aber ebenso
gut die gleiche Farbe kriegen.

Ute Ziemes, 2014-12-29 vorlagetekka.blogspot.com