Einzelne Seiten-Tabs individuell färben

In einer Layout-Vorlage von Blogger kann man die Farben für Hintergrund und Text eines Seiten-Gadgets in der Webverson des Blogs, das im Bereich "crosscol" bzw. "Cross-Column" des Layout einsortiert ist, bequem im Vorlagendesigner festlegen. Unter Vorlage > Anpassen > Erweitert > Tab-Text bzw. Tab-Hintergrund kann man unterschiedliche Farben für unausgewählte Tabs einerseits und den gerade ausgewählten bzw. gehoverten Tab andererseits angeben. Die Farben gelten für alle Tabs.

Mit welchen CSS-Kommandos man einzelne Tabs individuell färben kann, erfährt man hier.

---

Unter "Tab-Hintergrund" wählt man mit "Hintergrundfarbe" die Farbe der Liste (ul), also der Zeile/n, in der/denen die Tabs stehen. Mit "Ausgewählte Farbe" wählt man die Hintergrundfarbe des einzelnen Tabs, wenn die dazugehörige Seite gerade ausgewählt ist (selected) oder man die Maus über den Tab hält (hover). Das gleiche Prinzip gilt unter "Tab-Text" für "Schriftfarbe" und "Ausgewählte Farbe". Als Farbe kann man jeweils auch "Transparent" wählen, dann sieht man, statt einer eigenen Farbe für das Element, die Hintergrundfarbe des Bereichs, auf dem das Element steht.

Standard

Man sieht hinter dem letzten, gerade ausgewählten Tab, dass das dunklere Blau die Zeilenfarbe ist.

Einzelne Tabs per CSS ansprechen

Man kann die einzelnen Tabs und ihre verschiedenen Zustände wie folgt per CSS ansprechen (Beispiel mit 8 Tabs in der PageList1):

Ungehovert und unausgewählt:

1. #PageList1 li:first-child a
2. #PageList1 li:first-child + li a
3. #PageList1 li:first-child + li + li a
4. #PageList1 li:first-child + li + li + li a
5. #PageList1 li:first-child + li + li + li + li a
6. #PageList1 li:first-child + li + li + li + li + li a
7. #PageList1 li:first-child + li + li + li + li + li + li a
8. #PageList1 li:last-child a

Gehovert oder ausgewählt:

1. #PageList1 li:first-child a:hover,
   #PageList1 li:first-child.selected a
2. #PageList1 li:first-child + li a:hover,
   #PageList1 li:first-child + li.selected a
3. #PageList1 li:first-child + li + li a:hover,
   #PageList1 li:first-child + li + li.selected a
4. #PageList1 li:first-child + li + li + li a:hover,
   #PageList1 li:first-child + li + li + li.selected a
5. #PageList1 li:first-child + li + li + li + li a:hover,
   #PageList1 li:first-child + li + li + li + li.selected a
6. #PageList1 li:first-child + li + li + li + li + li a:hover,
   #PageList1 li:first-child + li + li + li + li + li.selected a
7. #PageList1 li:first-child + li + li + li + li + li + li a:hover,
   #PageList1 li:first-child + li + li + li + li + li + li.selected a
8. #PageList1 li:last-child a:hover,
   #PageList1 li:last-child.selected a

Färbe-Beispiele mit Bild und Code:

Mit gefärbter Zeile (ul)

Hinter dem letzten Tab sieht man ein Stück der gefärbten Zeile. Im ersten Bild ist der letzte Tab ausgewählt, im zweiten Bild nicht. Dort hat er deshalb die gleiche Farbe wie die Zeile. Dadurch wirkt es, als hätte der Tab nach rechts mehr Innenabstand.

Tab-Text:
Einträge unter Vorlage > Anpassen > Erweitert >
Schriftfarbe: #ffff00, Ausgewählte Farbe: #ffff00

Einträge unter Vorlage > Anpassen > Erweitert > Tab-Hintergrund:
Hintergrundfarbe: #002079, Ausgewählte Farbe: #005cb8

Einträge unter Vorlage > Anpassen > Erweitert > CSS hinzufügen:

/* PageList1
- - - - - - - */
/* Erster Link, unausgewählt und ungehovert */
#PageList1 li:first-child a {
color:#fff;
}
/* Erster Link, ausgewählt oder gehovert */
#PageList1 li:first-child a:hover,
#PageList1 li:first-child.selected a {
color:#fff;
}
/* Sechster und siebter Link, unausgewählt und ungehovert */
#PageList1 li:first-child + li + li + li + li + li a,
#PageList1 li:first-child + li + li + li + li + li + li a {
background-color:#415270;
color:#fff;
}
/* Sechster und siebter Link, ausgewählt oder gehovert */
#PageList1 li:first-child + li + li + li + li + li a:hover,
#PageList1 li:first-child + li + li + li + li + li.selected a,
#PageList1 li:first-child + li + li + li + li + li + li a:hover,
#PageList1 li:first-child + li + li + li + li + li + li.selected a {
background-color:#5F80A3;
color:#fff;
}
/* Letzter Link, unausgewählt und ungehovert */
#PageList1 li:last-child a {
color:#ccc;
}
/* Letzter Link, ausgewählt oder gehovert */
#PageList1 li:last-child a:hover,
#PageList1 li:last-child.selected a {
color:#ccc;
}

Mit transparenter Zeile (ul)

Hier ist keine zusätzliche Zeilenfarbe vorhanden und der letzte Tab wirkt deshalb nicht als hätte er rechts mehr Innenabstand. Ohne die Zeilenfarbe wirkt jedoch der Außenabstand nach rechts größer.

Einträge unter Vorlage > Anpassen > Erweitert > Tab-Text:
Schriftfarbe: #ffff00, Ausgewählte Farbe: #ffff00

Einträge unter Vorlage > Anpassen > Erweitert > Tab-Hintergrund:
Hintergrundfarbe: transparent, Ausgewählte Farbe: #005cb8

Einträge unter Vorlage > Anpassen > Erweitert > CSS hinzufügen:

/* PageList1
- - - - - - - */
/* Wenn Zeilenhintergrund transparent ist
- - - Tabs allgemein, unausgewählt und ungehovert */
#PageList1 li a {
background-color:#002079;
}
/* Wenn Zeilenhintergrund transparent ist
- - - Tabs allgemein, ausgewählt oder gehovert */
#PageList1 li a:hover,
#PageList1 li.selected a {
background-color:#005cb8;
}
/* Erster Link, unausgewählt und ungehovert */
#PageList1 li:first-child a {
color:#fff;
}
/* Erster Link, ausgewählt oder gehovert */
#PageList1 li:first-child a:hover,
#PageList1 li:first-child.selected a {
color:#fff;
}
/* Sechster und siebter Link, unausgewählt und ungehovert */
#PageList1 li:first-child + li + li + li + li + li a,
#PageList1 li:first-child + li + li + li + li + li + li a {
background-color:#415270;
color:#fff;
}
/* Sechster und siebter Link, ausgewählt oder gehovert */
#PageList1 li:first-child + li + li + li + li + li a:hover,
#PageList1 li:first-child + li + li + li + li + li.selected a,
#PageList1 li:first-child + li + li + li + li + li + li a:hover,
#PageList1 li:first-child + li + li + li + li + li + li.selected a {
background-color:#5F80A3;
color:#fff;
}
/* Letzter Link, unausgewählt und ungehovert */
#PageList1 li:last-child a {
color:#ccc;
}
/* Letzter Link, ausgewählt oder gehovert */
#PageList1 li:last-child a:hover,
#PageList1 li:last-child.selected a {
color:#ccc;
}

Link dazu

• Nachbarselektor (wiki.selfhtml.org)
  = Erläuterung zu dem " + li"

Ute Ziemes, sg.utez.de, 2016-02-24