Hoverfarbe und Hintergrund der Menüs anpassen

reni

Hallo in die Runde,

ich möchte mir gern die Menüs im FF anpassen und habe dazu das hier gefunden:

Leider zappelt nun das Menü

So schaut es aus:

CSS

#main-menubar > menu:hover,
menupopup.textbox-contextmenu :is(menu,menuitem)[_moz-menuactive="true"],
popupset > menupopup  :is(menu,menuitem)[_moz-menuactive="true"],
popupset > menupopup  menupopup :is(menu,menuitem)[_moz-menuactive="true"],
popupset >*:not(menupopup) menupopup :is(menu,menuitem)[_moz-menuactive="true"],
menupopup :is(menu,menuitem)[_moz-menuactive="true"] {
background: green !important;
color: white !important;
appearance: none !important;
height: 22px !important;
}

Alles anzeigen

Was kann/muss ich dafür ändern?

Ich hätte auch gern die Hintergrundfarbe geändert. Habt ihr dafür auch einen Tipp für mich?

Vielen Dank vorab und schönen Abend,

reni

2002Andreas

Zitat von reni

Hallo in die Runde,

Hallo und Willkommen hier im Forum. ?

Zitat von reni

Was kann/muss ich dafür ändern?

Entfern bitte mal diesen Eintrag im Code und teste es dann.

height: 22px !important;

reni

Guten Morgen und danke für die freundliche Begrüßung

Allerdings ... es "zappelt" trotzdem.

2002Andreas

Zitat von reni

es "zappelt" trotzdem.

Eigenartig, aber ok.

Dann bitte die Zeile wieder einfügen, und mal den Wert 22 verändern.

Wird die Zeile dicker, dann den Wert verringern, wird sie dünner dann eben etwas erhöhen.

reni

Zitat von 2002Andreas

Dann bitte die Zeile wieder einfügen, und mal den Wert 22 verändern.
Wird die Zeile dicker, dann den Wert verringern, wird sie dünner dann eben etwas erhöhen.

Ahh, mit dem Wert hatte ich schon etwas "rumgespielt", aber in der falschen Richtung. Bei 27 hörte es auf zu zappeln

Perfekt ist es aber noch nicht, denn noch rücken die Zeilen beim Hover nach links - einschließlich des Menüpunktes selbst.

Ein Bild im Anhang - ich hoffe, es erkennbar was ich meine.

2002Andreas

Zitat von reni

rücken die Zeilen beim Hover nach links

Nutzt du noch einen anderen CSS Code?

Hier funktioniert das einwandfrei

reni

Bei dir sieht das schick aus

Ich zeig mal meine vollständige userChrome.css:

CSS

/* set default namespace to XUL  */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");


/* Schriftfarbe Menü */
menubar > menu {
color: darkgreen !important;
}
menubar > menu[_moz-menuactive="true"] {
color: darkgreen !important;
}
menubar > menu[_moz-menuactive="true"][open="true"] {
color: darkgreen !important;
}


/* Hintergrundfarbe aktives Menü */
#main-menubar > menu:hover,
menupopup.textbox-contextmenu :is(menu,menuitem)[_moz-menuactive="true"],
popupset > menupopup  :is(menu,menuitem)[_moz-menuactive="true"],
popupset > menupopup  menupopup :is(menu,menuitem)[_moz-menuactive="true"],
popupset >*:not(menupopup) menupopup :is(menu,menuitem)[_moz-menuactive="true"],
menupopup :is(menu,menuitem)[_moz-menuactive="true"] {
background: green !important;
color: white !important;
appearance: none !important;
height: 27px !important;
}


/* abgerundete Ecken der Tabs */
#TabsToolbar .tabbrowser-tab{
background: lightgrey !important;
border-radius: 80px !important;
border:none!important;
}
.tab-background[selected="true"] {
background: yellowgreen !important;
border-radius: 80px !important;
border:none!important;
}
.tabbrowser-tab::after, .tabbrowser-tab::before {
margin-inline-start: 0px!important;
border-left: 0px solid!important;
border-image:none!important;
border-image-slice: 0!important;
width: 0px!important;
box-sizing: border-box;
opacity: 0!important;
}
.tab-line[selected=true] {
display:none!important
}

Alles anzeigen

2002Andreas

Zitat von reni

meine vollständige userChrome.css:

Mit deinem Code sieht das hier so aus:

Da verrutscht hier nichts

reni

Jetzt hab ich einfach mal die .css auf meinen Büro-PC geladen (Win10, FF 85.0.2 (32bit)) und was soll ich sagen - da sieht auch alles schick aus.

Was nun (sprach Zeus)

Was ich inzwichen noch versucht habe:

- Default-Thema benutzt => keine Änderung

- mit einen frischen Profil => keine Änderung (dafür hab ich jetzt ein Test-Profil )

- etwas mit "padding" bzw. "padding-right" rumprobiert => ganz viele Änderungen, aber nicht was ich haben möchte

reni

Ich hab noch bisschen hier im Forum gestöbert und dabei dies für mich "gefrickelt":

CSS

/* Hover Schrift-Farbe schwarz, wird beim hovern Grün unterlegt */
menupopup > menu:hover:not([disabled="true"]),
menupopup > menuitem:hover:not([disabled="true"]),
popup > menu:hover:not([disabled="true"]),
descriptionpopup > menuitem:hover:not([disabled="true"]) {
-moz-appearance: none !important;
background: green !important;
color: white ! important;
}


/*Höhenverschiebung Menüzeilen durch Hovereffekt verhindern */
menupopup > menu ,
menupopup > menuitem,popup > menu ,
popup > menuitem {
-moz-appearance: none!important;
min-height: 27px !important;
max-height: 27px !important;
}

Alles anzeigen

Jetzt rutscht nichts mehr nach links - kann auch nicht, da bei vorhandenen Icons, diese schon ganz links am Rand stehen

Nur ist mir gerade aufgefallen, dass im Kontext-Menü ein Ohne-Aktion-Eintrag beim Default blau bleibt.

Mir fehlt da diesbezüglich noch was. Kann da bitte noch einmal jemand drüberschaun?

Danke

2002Andreas

Zitat von reni

noch einmal jemand drüberschaun?

Teste bitte mal:

CSS

/* Hover Schrift-Farbe schwarz, wird beim hovern Grün unterlegt */
popupset >*:not(menupopup) menupopup :is(menu,menuitem)[_moz-menuactive="true"],
menupopup :is(menu,menuitem)[_moz-menuactive="true"],
menupopup > menu:hover:not([disabled="true"]),
menupopup > menuitem:hover:not([disabled="true"]),
popup > menu:hover:not([disabled="true"]),
descriptionpopup > menuitem:hover:not([disabled="true"]) {
-moz-appearance: none !important;
background: green !important;
color: white ! important;
}


/*Höhenverschiebung Menüzeilen durch Hovereffekt verhindern */
menupopup > menu ,
menupopup > menuitem,popup > menu ,
popup > menuitem {
-moz-appearance: none!important;
min-height: 27px !important;
max-height: 27px !important;
}

Alles anzeigen

reni

Ja, das schaut gut aus Danke.

Zu den links angedockten Icons hast du evt. auch noch eine Idee?

Die Hintergrundfarbe der Menüs hab ich auch inzwischen hinbekommen

CSS

/* Hintergrundfarbe der Menüs */
.popup-internal-box, menupopup, hbox popup {
-moz-appearance: none !important;
background-color: #f2f2f2 !important;
}

2002Andreas

Zitat von reni

Zu den links angedockten Icons

Ich kann das immer nur vermuten, denn bei mir ändert sich davon nichts, nur weil per hover ein anderer Hintergrund ist

CSS

menupopup > menu,
menupopup > menuitem {
  padding-left: 5px !important;
}

Den Wert musst du dir evtl. anpassen.

reni

Ja wunderbar Jetzt gefällt mir das alles Vielen Dank.

Eine kleine Bitte noch. Inzwischen habe ich für alle Menü-Anpassungen eine extra menu.css erstellt, die ich hier gern mal poste.

Ist das soweit alles ok - syntaktisch zum Beispiel - oder empfiehlt sich teilweise etwas anderes / besseres?

CSS

/* menu.css im TEST-PROFIL !!!!!!!!!!  */


/* Hintergrundfarbe der Menüs */
.popup-internal-box, menupopup, hbox popup {
-moz-appearance: none !important;
background-color: #f2f2f2 !important;
}


/* Schriftfarbe Menü */
menubar > menu {
color: darkgreen !important;
font-weight:bold !important;
}
menubar > menu[_moz-menuactive="true"] {
color: darkgreen !important;
font-weight:bold !important;
}
menubar > menu[_moz-menuactive="true"][open="true"] {
color: darkgreen !important;
font-weight:bold !important;
}


/* Abstand Icons im Menü */
menupopup > menu,
menupopup > menuitem {
padding-left: 5px !important;
}


/* Hover Schrift-Farbe schwarz, wird beim hovern Grün unterlegt */
popupset >*:not(menupopup) menupopup :is(menu,menuitem)[_moz-menuactive="true"],
menupopup :is(menu,menuitem)[_moz-menuactive="true"],
menupopup > menu:hover:not([disabled="true"]),
menupopup > menuitem:hover:not([disabled="true"]),
popup > menu:hover:not([disabled="true"]),
descriptionpopup > menuitem:hover:not([disabled="true"]) {
-moz-appearance: none !important;
background: green !important;
color: white ! important;
}


/*Höhenverschiebung Menüzeilen durch Hovereffekt verhindern */
menupopup > menu ,
menupopup > menuitem,popup > menu ,
popup > menuitem {
-moz-appearance: none!important;
min-height: 27px !important;
max-height: 27px !important;
}

Alles anzeigen

2002Andreas

Zitat von reni

syntaktisch zum Beispiel

Ob das so 100% perfekt ist kann ich dir als Laie auch nicht sagen

Man könnte aus:

CSS

menubar > menu[_moz-menuactive="true"] {
color: darkgreen !important;
font-weight:bold !important;
}
menubar > menu[_moz-menuactive="true"][open="true"] {
color: darkgreen !important;
font-weight:bold !important;
}

einen Code machen:

CSS

menubar > menu[_moz-menuactive="true"],
menubar > menu[_moz-menuactive="true"][open="true"] {
color: darkgreen !important;
font-weight:bold !important;
}

Ob das besser ist...kürzer ja

grisu2099

-moz-appearance: kannst du durch appearance: ersetzen.

Zeile 42: zwischen ! und important gehört kein Leerzeichen.

reni

Dankeschön. Habe die kleinen Änderungen noch gemacht und auch noch fix meinen Kommentar (Zeile 33) korrigiert

Nun muss ich unbedingt mal schaun, wie ich selbst rausbekomme, mit welchen Elementen man was anspricht.

Eine Anleitung für Werkzeuge hab ich ja im Forum schon gefunden.

Nochmals Danke und schönen Abend.

2002Andreas

Zitat von reni

Nochmals Danke und schönen Abend.

Gern geschehen, und danke, das wünsche ich dir auch

Melde dich, wenn du weitere Fragen haben solltest.

reni

Zitat von 2002Andreas

Melde dich, wenn du weitere Fragen haben solltest.

Mit Sicherheit