Cookie-Hinweis Smartphone

10.07.2014

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



Ute Ziemes, sg.utez.de,

1 Kommentar:

  1. Vielen lieben Dank dass du dich darum gekümmert hast! Das ist großartig! Ich vermisse zwar ein bisschen die Zentrierung, die ich mit meinem früheren Code hatte, aber es funktioniert prima.

    AntwortenLöschen