Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[FoodFighter]

Moin allerseits,

ich versuche mich grad dumm und dämlich ... und vermutlich ist es was ganz einfaches.
Ich habe meine Menü-Buttons (jqui Nav-Button) per css angepasst:

.FoFiStyle .ui-button {
background: #707070 !important;
color: #FFFFFF !important;
font-family: Play-Bold !important;
border: 1px solid #4a4a4a !important;
}

.FoFiStyle .ui-button:hover {
background: #7d7973 !important;
color: #FFFFFF !important;
}

.FoFiStyle .ui-state-active {
background: #e9b13a !important;
color: #4a4a4a !important;
font-family: Play-Bold !important;
border: 1px solid #4a4a4a !important;
}

.FoFiStyle .ui-state-active:hover {
background: #dda631 !important;
color: #4a4a4a !important;
}

Den Buttons wurde dann immer die CSS-Klasse "FoFiStyle" zugewiesen.

Prinzipiell funktioniert auch alles soweit - nur bleibt der Button des aktiven Views leider nicht in seinem activ-CSS-style (Gelber hintergrund).
Wenn ich irgndeinen View aufrufe und über F5 die Seite aktualisiere, ist der korrekte Button gelb.
Wenn ich dann allerdings mit der Maus drüber fahre, wird er wieder grau und bleibt dies auch.

Das Hovern der Maus macht also iwie den Aktiv-Zustand kaputt.
Bei dem Radio-Button-Menü (rechts im Heizungs-Fenster der Betriebszustand) funktioniert alles tadellos auch nach dem Hovern.

Was kann ich tun, damit das Menü korrekt funktioniert?

(Ist Momentan alles noch sehr wild...ich bin am Probieren...
Es geht um das untere Menü mit der weißen Schrift. Oben habe ich die Material-Buttons ausprobiert)

[Edit]
Die Navigation ist ein eigener View, den ich auf den einzel-Views dann über View in Widget einbinde

[FoodFighter]

Einen Schritt weiter...
Es scheint generell mit dem Nav-Button zusammen zu hängen, dass der Active-State nicht beibehalten wird.
Wenn man das Navigation-Icon-Widget nutzt, funktioniert alles mit diesem CSS-Code:

.FoFi .ui-button,
.FoFi_navbutton,
.FoFi_incbutton {
background: #707070 !important;
color: #FFFFFF !important;
font-family: Play-Bold !important;
border: 1px solid #4a4a4a !important;
}

.FoFi .ui-button:hover,
.FoFi_navbutton:hover,
.FoFi_incbutton:hover {
background: #7d7973 !important;
color: #FFFFFF !important;
}

.FoFi .ui-state-active,
.FoFi_navbutton.ui-state-active{
background: #e9b13a !important;
color: #4a4a4a !important;
font-family: Play-Bold !important;
border: 1px solid #4a4a4a !important;
}

.FoFi .ui-state-active:hover,
.FoFi_navbutton.ui-state-active:hover{
background: #dda631 !important;
color: #4a4a4a !important;
}

So ganz leuchtet mir noch nicht ein, wieso man die einen Selektoren verknüpfen (.FoFi_navbutton.ui-state-active) und die anderen kaskadieren (.FoFi .ui-state-active) muss, damit alles funktioniert.
Mein Ordnungs-Drang ist der Meinung, dass man den CSS-Code noch deutlich aufräumen könnte, wenn man wüsste, was man tut.

Vielleicht hat ja Jemand noch eine Idee oder einen Ratschlag.

[Holger76]

ich war mit dem Nav-Button auch gerade am verzeifeln (deshalb hatte ich einen passenden thread gesucht) und habe festgestellt, dass der Nav Button im Anzeigemodus als Thema ganz andere Farben als im Editor-Modus anzeigt (Orange statt blau etc). Der Nav-Button mit Icon hingegen macht alles so wie er soll. Also ich denke, da steckt ein Bug drin.