|
Su
Beiträge: 416
|
 Unterschiedliche Farben für die Aktiv-Zustände der Navigation per CSS definieren (hmenu.css)
|
Hoi mitenand
Meine Kundin besteht darauf, dass die aktiven Navigationspunkte unterschiedliche Farben haben. Ich möchte das gern per CSS lösen, komme aber leider nicht weiter.
Hier sieht man es am Besten: Die aktive Navi 'coaching' müsste das Grün des Seitentitels 'Coaching' haben, nicht das standardmässige Bordeauxrot, dass für 'deutsch' oben rechts definiert ist.
Ich gehe davon aus, dass ich halt in der hmenu.css alle Untergruppen separat definieren muss. Mit meinem folgenden fancy Test passiert schon was - wenn auch nicht das richtige: 1) ist natürlich damit nur der generelle Inaktiv-Zustand angesprochen; 2) wird dieTextfarbe von der übergeordneten Definition* übernommen, die unbenötige (völlig sinnlose) Hintergrundfarbe wird aber angezeigt
div#course_categories_menu_horizontal div #li_group_id_7 {
color: #3F3;
background-color: #CFF;
text-decoration: none;
}
Ich müsste hierzu natürlich die hover-, inactive- und active-Zustände definieren, denke ich, kriege das aber auch nach zahllosen Versuchen leider nicht selber hin.
Dann hab ich zusätzlich das Problem, dass ich hier ja zwei Navi-Levels habe: level 0 und level 1 und diese in der hmenu.css im Unterschied zur menu.css nicht separat aufgeführt finde.
*Diese brauche ich aber für die separate Navigation, die nur Level 0 anzeigen darf.
Ich danke euch im Voraus herzlich für eure Ratschläge und Unterstützung!
Liebe Grüsse
Susanna
|
|
http://www.artundmedia.ch
|
|
|
|
|
27.05.2015 21:51
|
ZITIEREN
| ANTWORTEN
|
|
Urs Gamper
Beiträge: 530
|
Hoi Susanna
Es gibt da schon Möglichkeiten, je Navigationspunkt unterschiedliche Linkfarben zu definieren.
In diesem Beispiel etwa so:
div#li_group_id_8.active > p.single_grp_a > a.link {color: #8b8342;}
Und dabei z.B. dann auch die Farbe für hover:
div#li_group_id_8.active > p.single_grp_a > a.hover {color: #ff0000;}
Ist es das was du dir vorstellst?
Grüessli
Urs
|
gamper media GmbH
5621 Zufikon
+41-56-631 80 23
|
|
|
|
|
28.05.2015 14:14
|
ZITIEREN
| ANTWORTEN
|
|
Su
Beiträge: 416
|
Lieber Urs
Vielen Dank! Die erste Zeile hat super geholfen. Mit dem hover will es aber nicht klappen: Die Links auf level 0 und level 1 übernehmen jene aus der hmenu.css:
div#course_categories_menu_horizontal div.inactive a.link:hover
und ich hab leider mit diversen Anpassungsversuchen nicht herausgefunden, wie ich das ändern könnte.
Ich habe auch versucht, die Navi level 0 in mein vorläufig separates farbnavigation.css einzubinden, wollte aber nicht so tun, wie ich gern hätte ;-(
Von Herzen vielen Dank für weitere Unterstützung
und liebe Grüsse
Susanna
|
|
http://www.artundmedia.ch
|
|
|
|
|
28.05.2015 15:44
|
ZITIEREN
| ANTWORTEN
|
|
Su
Beiträge: 416
|
Hallo Christoph
Vielen Dank für den Hinweis!
Das div#course_categories_menu_horizontal div.inactive a.link:hover aus der hmenu.css brauche ich eigentlich so, wie es ist, für die Navigation auf level 0. (Ich habe die Farbe vorübergehend absichtlich auf Grellgelb gestellt, damit ich deren Auswirkung auf level 1 gut sehe.)
Für alle Navis auf level 1 sollte ich aber jeweils eine eigene hover-Farben definieren können (nur für die inaktiven, auf den aktiven will ich keinen hover einbauen). Ich habe es nun in meiner farbnavigation.css (die ich, wie du schreibst, als letztes stylesheet angehängt habe) versucht mit einer Kombination des Tipps von Urs und deinem:
div#li_group_id_8.active > p.single_grp_a > a.hover {color: #8b8342 !important;}
Ich habe es auch versucht mit
div#li_group_id_8.inactive > p.single_grp_a > a.hover {color: #8b8342 !important;}
Leider hilft beides nicht. Was könnte ich falsch gemacht haben?
Im Voraus vielen Dank für weitere Tipps
und beste Grüsse
Susanna
|
|
http://www.artundmedia.ch
|
|
|
|
|
28.05.2015 18:59
|
ZITIEREN
| ANTWORTEN
|
|
Urs Gamper
Beiträge: 530
|
Hoi Susanna
Aber du hast doch die Möglichkeit, das CSS auch auf den jeweiligen Layer zu vergeben: Also z.B:
#sprachwechsel a:link, #sprachwechsel a:visited {color: #000}
#sprachwechsel a:hover {color: #F00}
Dasselbe mit dem Layoer #navigation
Für eine Farbunterscheidung je Navigationspunkt nimmst du wie bei meinem vorigen Beitrag die Gruppen-ID.
Grüessli
Urs
|
gamper media GmbH
5621 Zufikon
+41-56-631 80 23
|
|
|
|
|
28.05.2015 19:46
|
ZITIEREN
| ANTWORTEN
|
|
Su
Beiträge: 416
|
Hoi mitenand
Herzlichen Dank für eure Unterstützung!
Ich habe habe es mit all euren Anleitungen versucht. Wenn ich dem div sprachwechsel seine Farben zuteile, ist der Aktivzustand von Deutsch respektive English nicht mehr markiert. An der Gruppennavi ändert sich nichts zum Guten: Wenn ich die entsprechenden Angaben in der hmenu.css ausschalte, wird’s noch ‚wilder‘.
Mit den Leerschlägen, Punkten und Doppelpunkten habe ich auch alles versucht, leider ebenfalls erfolglos. Ich hab auch versucht, die > wegzunehmen. Ausserdem schreibt die hmenu.css ja keine Klasse ‚hover‘ in den Quellcode. Also hab ich es in unterschiedlichen Zusammensetzungen auch versucht mit .active, .inactive und a.link und nur p.single_grp, weil der inaktive Zustand ja nicht als p.single_grp_a geschrieben wird.
Vielleicht müsste ich doch auch noch die div group_depth_0 und 1 definieren? Ich hab aber leider nicht herausgefunden, wie ich das machen müsste.
Ich danke euch von Herzen für weitere Tipps!
Liebe Grüsse
Susanna
|
|
http://www.artundmedia.ch
|
|
|
|
|
29.05.2015 12:24
|
ZITIEREN
| ANTWORTEN
|
|
Su
Beiträge: 416
|
Hoi mitenand
Jezt hab ichs glaub herausgefunden:
div#li_group_id_8.inactive > p.single_grp > a:hover
Liebe Grüsse
und schönes Wochenende
Susanna
|
|
http://www.artundmedia.ch
|
|
|
|
|
29.05.2015 16:10
|
ZITIEREN
| ANTWORTEN
|
|
