Farbe eines einzelnen Subtabs ändern?

[otto]

Hallo,

Ich hab einen Tab "Tabname1", mit 5 Subtabs "Subtab1" bis "Subtab5" die man sieht, wenn man mit der Maus über den Haupttab "Tabname1" geht.

Wie kann ich die Schriftfarbe und oder Hintergrundfarbe eines einzelnen Subtabs (zB. Subtab2 ) ändern?

Hintergrund ist - ich möchte in einem gemeinsamen Menü extra Links für Mitglieder, Mods und Admins unter bringen, die sich jedoch farblich unterscheiden sollten um schnell zu sehen wo man zu klicken hat.

Zusatzfrage - Trennlinien zwischen einzelnen Subtabs? Jemand da eine Idee?

 

[Timeout]

in deine Extra-CSS...

#XenForoUniq1 ul li:nth-child(3) {
  background-color:green;
  color:#fff;
}

und die "Anstehenden Events" in deinem Event-Menü haben eine andere Farbe...
Du mußt dann natürlich auch noch den Hover, die Link-Farbe und den Border-Radius anpassen.

 

[ragtek]

XenForoUniq1

Das Problem ist, dass die Id nicht eindeutig ist.

zB geh auf http://www.xendach.de/resources/ und schau dir die Id vom Über uns Tab an.
Dann geh auf http://www.xendach.de/aboutus/ und schau dir die Id vom Resourcen Tab an.

Wenn, dann muss man hier eher über die CSS Klasse (zB eventsTabLinks ) drauf zugreifen. (oder einfach gleich das Submenü Template anpassen und eine eindeutige ID/css Klasse dem Link vergeben

 

[Timeout]

stimmt leider. Ich habe gerade gesehen, dass die ID auch im selben Menü auf unterschiedlichen Seiten unterschiedlich ist... Ich dachte, dass XF diese einmalig vergibt, aber dem ist leider nicht so.

also für die Events:

.eventsTabLinks ul li:nth-child(3) {

  background-color:green;
}

 

[ragtek]

Die ID bezieht sich auf SEIN Forum

ja dann mach das was ich gesagt habe dort


die ids sind NIE die gleichen


das tab, das gerade aktiv ist, hat kein menü und dadurch fällt hier die fortlaufende id weg
beim 3. tab ist es 1,2,x,3
und beim 2. 1,x,2,3

 

[Timeout]

schon geändert...

 

[otto]

Also bei den Events funktioniert das so - aber sonst bekomme ich das nirgends hin - zB. beim Lexikon Tab. Ich nutze NodesAsTabs falls das wichtig sein sollte?

Blöde Frage - wie kommt man da drauf: ".eventsTabLinks ul li:nth-child(3)"

Gerade bei längeren child node Listen wäre es klasse, wenn man die Textfarbe des child nodes frei bestimmen könnte, statt alles gleichfarbig zu haben.

 

[ragtek]

einfach die richtige CSS Klasse (endet auf TabLinks) mittels Entwicklertools, Firebug & Co raussuchen

Siehe

 

[ragtek]

AJA und auch beim Rest muss man tierisch aufpassen!
NIcht jedes Menü ist für jeden Sichtbar, dadurch wird auch das mit dem Kindelement ( li:nth-child(3) ) fehleranfällig

Wie gesagt, am sichersten wäre es, per TMS dem Link eine eindeutige ID oder CSS Klasse zu geben und diese für den Selektor zu verwenden

 

[otto]

Habs mal versucht - das wäre dann wohl "nodetabXXXTabLinks" - XXX ist die Nummer des child nodes. Versuch das morgen gleich noch mal in der Extra CSS ob ich damit weiter komme...

Wie gesagt, am sichersten wäre es, per TMS dem Link eine eindeutige ID oder CSS Klasse zu geben und diese für den Selektor zu verwenden

Erscheint logisch Nur wie geht das im Detail? Hab im (original xF) TMS bisher nur das vB-typische Suche/Ersetze verwendet. ... wie geht man da ran, bin lernwillig

 

[Timeout]

ebenso mit Suchen und ersetzen...

Beispiel
Template: navigation
Suche:

<li><a href="{xen:link members}">{xen:phrase notable_members}</a></li>

Ersetze mit:

<li class="irgendwasmembers"><a href="{xen:link members}">{xen:phrase notable_members}</a></li>

und dann in die EXTRA.CSS ->

.tabMenu .irgendwasmembers {
  background-color:green;
}