5202

ein Blog über technische Fragen zu Blogger

Wie ändere ich die Hintergrundfarbe im Blogger Seiten-Gadget?

von
Als pure Spielerei habe ich für das Blogger Seiten-Gadget einen Farbverlauf gebastelt - das ist mal was anderes, als die übliche einheitliche Hintergrundfarbe, oder? Jeder Link im Gadget bekommt eine eigene Farbe ... vielleicht kann jemand was damit anfangen!






Das ganze funktioniert so - jeder Link wird mit einer eigenen CSS-Regel angesprochen. Dabei gibt es ein 'erstes Element' - :first-child - und ein 'letztes Element' - :last-child - alle dazwischen liegenden Elemente werden durchnummeriert. Konkret sieht die CSS so aus:
.tabs-inner .widget li:first-child a
{
  background:green
}
.tabs-inner .widget li:nth-child(2) a
{
  background:yellow
}
.tabs-inner .widget li:nth-child(3) a
{
  background:orange
}
.tabs-inner .widget li:last-child a
{
  background:red
}
Weitere Elemente werden nach dem gleichen Muster eingefügt und zwar immer um eine Nummer (2,3,4 ..) höher gezählt. Die Ordnungszahl in der Klammer bezeichnet also die Position innerhalb des Gadgets - das Element mit der Zahl (2) ist das zweite Element in der Reihe und soll laut CSS die Hintergrundfarbe 'yellow' zeigen, was auch der Fall ist. Passt also in meinem Beispiel.

Statt der Farbnamen könnt ihr auch Farbwerte in Hex-Schreibweise [#eeeeee] oder RGBA-Farben oder sonst etwas nehmen - seid kreativ!

Die CSS kommt im Vorlagen Designer in die Box 'CSS hinzufügen' und wird angewendet, indem ihr hinter der letzten geschweiften Klammer } des letzten Ausdrucks die Taste 'Eingabe' [Enter] drückt - wenn es okay ist, könnt ihr die Änderung mit 'Auf Blog anwenden' sichern.

Die CSS-Regel überschreibt übrigens alle Hintergrundfarben und Gradienten aus dem Vorlagen-Designer. Noch ein Hinweis: Das ist eine Spielerei und funktioniert problemlos in allen Browsern, bis auf den Internet Explorer, der kann mit Nummerierungen nichts anfangen - der IE zeigt statt dessen die Farben aus dem Vorlagen Designer an.