Vorlage Fantastisch: Seiten-Tabs über mehrere Zeilen passend gestalten

Bei der Vorlage Fantastisch (Ethereal) passt die Gestaltung der Seiten-Tabs nur zu einer einzigen Tab-Zeile. Hat man so viele oder breite Tabs, dass man weitere Zeilen hat, dann sieht die Gestaltung seltsam aus.

Mit ein paar CSS-Kommandos, die man unter Vorlage > Anpassen > Erweitert > CSS hinzufügen einträgt, kann man das verschönern. Zwei Möglichkeiten werden hier vorgestellt.

---

Möglichkeit 1 - Ziel:

Code zu Möglichkeit 1:

/* Tabs - LINKS - Abstand nach rechts entfernt und Eckenabrundungen komplettiert */
.tabs-inner .widget li a {
margin-right: 0px;
border-radius: 5px;
}
/* Tabs - AUSGEWÄHLTER LINK - Eckenabrundungen komplettiert */
.tabs-inner .widget li.selected a {
border-radius: 5px;
}
/* Tabs - LISTENPUNKTE - Abstände hergestellt */
.tabs .widget li {
margin: 0px 3px 3px 0px;
}
/* PageList - UNTERE RAHMENLINIE entfernt */
.PageList {
border-bottom: none;
}

Möglichkeit 2 - Ziel:

Code, zu Möglichkeit 2:

/* Tabs - Listenpunkt - Abstand nach unten verringert */
.tabs .widget li,.tabs .widget li.selected {
margin-bottom:-5px;
}
/* Tabs - Links - Rahmen rundherum gesetzt */
.tabs-inner .widget li a, .tabs-inner .widget li.selected a {
border:0.1em solid #4d469c;
}
/* Tabs - Ausgewählter Listenpunkt und Link - tiefer gelegt */
tabs .widget li.selected, .tabs-inner .widget li.selected a {
z-index:-1;
}

Weiterführender Link

• Vorlagenvarianten bei Blogger: Fantastisch Web | Mobil

Ute Ziemes, sg.utez.de, 2014-07-10