Icons für Menüeinträge

Hier mal als Muster mit einem base64 Code.

Wenn dann musst du dir das mit deinen Icons und dem Pfad ändern:

#file-menu,
#edit-menu,
#view-menu,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu {
    -moz-appearance:none!important;
    background: lightgrey url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABXklEQVQ4jaXRvWvCQBgG8PwJXR0cuwkdBJ0iHVyUYDYd7OigLrp1KwREnLIELOLkuQQiCEEIhUxZ4qZTlS7imiGKg40f8HQoOXMxYqEHD4GD58f7Xjjuv0e3lghnqE+hW0v8GTiezkyG+hSpfAWj8YQiQrUPP8H7SEAhBnRreYWMxhO8dXpI8uJ9IJWv0IQnvgtsdnssVg6dIggI1T6SvHhBhvqUKS9WDjQi0wjVPgMoxECSFy+rBYHNbg+NyPBcFZ6r4rzuQCMy+2jhoxCDln0gKoNuiwlFFWLQsg/g24LnqvTrT3Ned3D6esXRLkFqFlhgsXLo/reKh3kNR7uEWS/GAsFfNui2roBgeWsKmPViqJcz0e8SBKLKW1OAJsVRzCVuA1E7+2UfyKbj0YDSbsBzVRzmNWxNAZ/GC2xVxMf7MzQpTvP0+HAbUNoNSM0C6uUMirkEsunfQjgcx3E/R0ccGxq+wikAAAAASUVORK5CYII=")no-repeat !important;
    padding-left: 25px !important;
    background-position: 5px 4px!important;
    }

#file-menu:hover,
#edit-menu:hover,
#view-menu:hover,
#history-menu:hover,
#bookmarksMenu:hover,
#tools-menu:hover,
#helpMenu:hover {
    -moz-appearance: none !important;
    background: red url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABXklEQVQ4jaXRvWvCQBgG8PwJXR0cuwkdBJ0iHVyUYDYd7OigLrp1KwREnLIELOLkuQQiCEEIhUxZ4qZTlS7imiGKg40f8HQoOXMxYqEHD4GD58f7Xjjuv0e3lghnqE+hW0v8GTiezkyG+hSpfAWj8YQiQrUPP8H7SEAhBnRreYWMxhO8dXpI8uJ9IJWv0IQnvgtsdnssVg6dIggI1T6SvHhBhvqUKS9WDjQi0wjVPgMoxECSFy+rBYHNbg+NyPBcFZ6r4rzuQCMy+2jhoxCDln0gKoNuiwlFFWLQsg/g24LnqvTrT3Ned3D6esXRLkFqFlhgsXLo/reKh3kNR7uEWS/GAsFfNui2roBgeWsKmPViqJcz0e8SBKLKW1OAJsVRzCVuA1E7+2UfyKbj0YDSbsBzVRzmNWxNAZ/GC2xVxMf7MzQpTvP0+HAbUNoNSM0C6uUMirkEsunfQjgcx3E/R0ccGxq+wikAAAAASUVORK5CYII=")no-repeat !important;
    padding-left: 25px !important;
    background-position: 5px 4px!important;
    color: white !important;
    }

Und so mit Angabe vom Pfad hier:

#file-menu,
#edit-menu,
#view-menu,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu {
    -moz-appearance:none!important;
    background: url("file:///C:/Users/Andi/Icons%20Firefox/Computer_File_061.gif")no-repeat !important;
    padding-left: 25px !important;
    background-position: 5px 4px!important;
    }

#file-menu:hover,
#edit-menu:hover,
#view-menu:hover,
#history-menu:hover,
#bookmarksMenu:hover,
#tools-menu:hover,
#helpMenu:hover {
    -moz-appearance: none !important;
    background: red url("file:///C:/Users/Andi/Icons%20Firefox/Computer_File_061.gif")no-repeat !important;
    padding-left: 25px !important;
    background-position: 5px 4px!important;
    color: white !important;
    }

Zitat von 2002Andreas

Hier mal als Muster mit einem base64 Code.

Wenn dann musst du dir das mit deinen Icons und dem Pfad ändern:

CSS

#file-menu,
#edit-menu,
#view-menu,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu {
    -moz-appearance:none!important;
    background: lightgrey url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABXklEQVQ4jaXRvWvCQBgG8PwJXR0cuwkdBJ0iHVyUYDYd7OigLrp1KwREnLIELOLkuQQiCEEIhUxZ4qZTlS7imiGKg40f8HQoOXMxYqEHD4GD58f7Xjjuv0e3lghnqE+hW0v8GTiezkyG+hSpfAWj8YQiQrUPP8H7SEAhBnRreYWMxhO8dXpI8uJ9IJWv0IQnvgtsdnssVg6dIggI1T6SvHhBhvqUKS9WDjQi0wjVPgMoxECSFy+rBYHNbg+NyPBcFZ6r4rzuQCMy+2jhoxCDln0gKoNuiwlFFWLQsg/g24LnqvTrT3Ned3D6esXRLkFqFlhgsXLo/reKh3kNR7uEWS/GAsFfNui2roBgeWsKmPViqJcz0e8SBKLKW1OAJsVRzCVuA1E7+2UfyKbj0YDSbsBzVRzmNWxNAZ/GC2xVxMf7MzQpTvP0+HAbUNoNSM0C6uUMirkEsunfQjgcx3E/R0ccGxq+wikAAAAASUVORK5CYII=")no-repeat !important;
    padding-left: 25px !important;
    background-position: 5px 4px!important;
    }

#file-menu:hover,
#edit-menu:hover,
#view-menu:hover,
#history-menu:hover,
#bookmarksMenu:hover,
#tools-menu:hover,
#helpMenu:hover {
    -moz-appearance: none !important;
    background: red url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABXklEQVQ4jaXRvWvCQBgG8PwJXR0cuwkdBJ0iHVyUYDYd7OigLrp1KwREnLIELOLkuQQiCEEIhUxZ4qZTlS7imiGKg40f8HQoOXMxYqEHD4GD58f7Xjjuv0e3lghnqE+hW0v8GTiezkyG+hSpfAWj8YQiQrUPP8H7SEAhBnRreYWMxhO8dXpI8uJ9IJWv0IQnvgtsdnssVg6dIggI1T6SvHhBhvqUKS9WDjQi0wjVPgMoxECSFy+rBYHNbg+NyPBcFZ6r4rzuQCMy+2jhoxCDln0gKoNuiwlFFWLQsg/g24LnqvTrT3Ned3D6esXRLkFqFlhgsXLo/reKh3kNR7uEWS/GAsFfNui2roBgeWsKmPViqJcz0e8SBKLKW1OAJsVRzCVuA1E7+2UfyKbj0YDSbsBzVRzmNWxNAZ/GC2xVxMf7MzQpTvP0+HAbUNoNSM0C6uUMirkEsunfQjgcx3E/R0ccGxq+wikAAAAASUVORK5CYII=")no-repeat !important;
    padding-left: 25px !important;
    background-position: 5px 4px!important;
    color: white !important;
    }

Alles anzeigen

Danke.

Das löst das Problem mit dem verschwundenen Hintergrund bei Buttons, aber nicht das Problem, dass keine Hervorhebung beim Drüberfahren stattfindet (bei Buttons und Menüeinträgen).

So, hab ein bisschen verspätet versucht mitzudenken. Mit ...:hover kann ich natürlich den Hintergrund beim Drüberfahren über einen Button verändern.

Wie muss der Hintergrund bezeichnet werden, damit beim Drüberfahren über Menüpunkte der Hintergrund des Standard-Themes verwendet wird?

Zitat von bege

Wie muss der Hintergrund bezeichnet werden

background-color: var(--toolbarbutton-hover-background) !important;

So sieht der normale Hintergrund aus

Mit

Zitat von 2002Andreas

background-color: var(--toolbarbutton-hover-background) !important;

ist er einfach nur grau

Der ges. Code hat nur Einfluss auf die Button oben in der Menüleiste.

Wenn du dann in einem Menü nach unten gehst, dann ist bei hover die Standardfarbe von dir vorhanden.

So sieht das ohne den Code aus, bei hover auf den Hilfe Button:

Und so sieht das mit dem Code bei hover auf den Hilfe Button aus:

Der Hintergrund ist also gleich geblieben.

Und so sieht mein Code dafür aus:

#file-menu,
#edit-menu,
#view-menu,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu {
    -moz-appearance:none!important;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABXklEQVQ4jaXRvWvCQBgG8PwJXR0cuwkdBJ0iHVyUYDYd7OigLrp1KwREnLIELOLkuQQiCEEIhUxZ4qZTlS7imiGKg40f8HQoOXMxYqEHD4GD58f7Xjjuv0e3lghnqE+hW0v8GTiezkyG+hSpfAWj8YQiQrUPP8H7SEAhBnRreYWMxhO8dXpI8uJ9IJWv0IQnvgtsdnssVg6dIggI1T6SvHhBhvqUKS9WDjQi0wjVPgMoxECSFy+rBYHNbg+NyPBcFZ6r4rzuQCMy+2jhoxCDln0gKoNuiwlFFWLQsg/g24LnqvTrT3Ned3D6esXRLkFqFlhgsXLo/reKh3kNR7uEWS/GAsFfNui2roBgeWsKmPViqJcz0e8SBKLKW1OAJsVRzCVuA1E7+2UfyKbj0YDSbsBzVRzmNWxNAZ/GC2xVxMf7MzQpTvP0+HAbUNoNSM0C6uUMirkEsunfQjgcx3E/R0ccGxq+wikAAAAASUVORK5CYII=")no-repeat !important;
    padding-left: 25px !important;
    background-position: 5px 4px!important;
    }

#file-menu:hover,
#edit-menu:hover,
#view-menu:hover,
#history-menu:hover,
#bookmarksMenu:hover,
#tools-menu:hover,
#helpMenu:hover {
    -moz-appearance: none !important;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABXklEQVQ4jaXRvWvCQBgG8PwJXR0cuwkdBJ0iHVyUYDYd7OigLrp1KwREnLIELOLkuQQiCEEIhUxZ4qZTlS7imiGKg40f8HQoOXMxYqEHD4GD58f7Xjjuv0e3lghnqE+hW0v8GTiezkyG+hSpfAWj8YQiQrUPP8H7SEAhBnRreYWMxhO8dXpI8uJ9IJWv0IQnvgtsdnssVg6dIggI1T6SvHhBhvqUKS9WDjQi0wjVPgMoxECSFy+rBYHNbg+NyPBcFZ6r4rzuQCMy+2jhoxCDln0gKoNuiwlFFWLQsg/g24LnqvTrT3Ned3D6esXRLkFqFlhgsXLo/reKh3kNR7uEWS/GAsFfNui2roBgeWsKmPViqJcz0e8SBKLKW1OAJsVRzCVuA1E7+2UfyKbj0YDSbsBzVRzmNWxNAZ/GC2xVxMf7MzQpTvP0+HAbUNoNSM0C6uUMirkEsunfQjgcx3E/R0ccGxq+wikAAAAASUVORK5CYII=")no-repeat !important;
    padding-left: 25px !important;
    background-position: 5px 4px!important;
    background-color: var(--toolbarbutton-hover-background) !important;
    }

Ich benutze den Code hauptsächlich für Symbole in den Menüs (siehe Thema). In Beitrag #46 waren die Screenshots nicht an der richtigen Stelle, habe ich jetzt korrigiert.

Ohne background-color: wird dann der entsprechende Eintrag (hier: Einstellungen) beim Drüberfahren nicht hervorgehoben, mit background-color: var(--toolbarbutton-hover-background) !important; hat er nicht die Standardfarbe sondern eben nur grau (siehe Screenshot oben).

Entferne mal das !important hinter background-color: var(--toolbarbutton-hover-background)

Zitat von milupo

Entferne mal das !important hinter background-color: var(--toolbarbutton-hover-background)

Probiert, hat die gleiche Wirkung, wie ganz ohne diese Angabe, d.h. gar keine Hervorhebung, weil dann -moz-appearance:none!important; gilt.

Zitat von bege

hat er nicht die Standardfarbe sondern eben nur grau (siehe Screenshot oben).

Die Standardfarbe ist wohl grau.

Ich benutze das Firefox-Standardtheme, und da ist die Hover-Farbe ein durchscheinendes Blau, siehe den ersten Screenshot im obigen Beitrag.

Das betrifft aber nur die Menüeinträge, nicht das Hauptmenü. Und der Code von 2002Andreas bezieht sich nur auf das Hauptmenü in der Menüleiste. Wie das Andreas auch im Beitrag #47 geschrieben hat. Wir haben also aneinander vorbei geschrieben.

Probiere mal

background-color: #91C9F7 !important;

So, jetzt habe ich endlich kapiert, dass der Code wirklich nur für die Menüpunkte in der Menüleiste gedacht war und deshalb einige Änderungen für Menüeinträge nötig sind. Leider ist das 'ne Menge Code, wenn man die Menüs mit Symbolen verschönern will, so wie es mal mit der Erweiterung CuteButtons ging.

{
-moz-appearance:none!important;
background: url(Pfad-zu-deiner-Datei.png)no-repeat !important;
background-position: 3px !important;
min-height: 20px !important
}

Und das ist der zusätzliche Code, um die Hervorhebung des Standard-Themes beim Drüberfahren mit der Maus nachzuahmen. Bei mir sieht's fast echt aus. Eine "professionellere" Methode, die weniger Code bräuchte, wäre mir aber lieber.

{
background-image: url(Pfad-zu-deiner-Datei.png),
linear-gradient(to top, RGB(99,111,165,0.8), RGB(216,223,254,0.5) 4%, RGB(241,244,255,0.5) 96%, RGB(99,111,165,0.8)) !important;
background-position: 3px !important
}

Zitat von bege

Leider ist das 'ne Menge Code, wenn man die Menüs mit Symbolen verschönern will,

So ist es

Zitat von 2002Andreas

Zitat von bege

Leider ist das 'ne Menge Code, wenn man die Menüs mit Symbolen verschönern will,

So ist es

Danke nochmal für deinen Code, der mir den Einstieg erleichtert hat

Gerne doch