Symbole in Menüs

Mira_Belle

Zitat von 2002Andreas

Zitat von Mira_Belle

Nur mit weniger Zeilenhöhe.

Siehe Beitrag Nr. 13 +16.
Das ist doch nur eine geänderte Einstellung im Fx.

Das hatte ich aber, ich glaube mit Deiner Hilfe,

so fest eingestellt.

CSS

    :root {
        --arrowpanel-menuitem-padding: 0px 8px !important;                    /* Zeilenabstand */
    }

2002Andreas

Zitat von Mira_Belle

so fest eingestellt.

Ist ja auch ok damit.

So sieht das dann hier mit Icons aus:

Bzw. so wenn der Text oben in einer Zeile sein soll:

Gabbo

@Mira_Belle

Manchmal hilft auch mal ne Pause oder ein mentaler Reset, weil man den Wald vor lauter Bäumen einfach nicht mehr sieht.

Diese Lsg. ist genial einfach und von einem echten Crack erstellt.

Vielleicht fehlt Dir bei der Farbe ja einfach nur die Zeile #8 dieses Scripts:

firefox-csshacks/iconized_main_menu.css at master · MrOtherGuy/firefox-csshacks

Collection of userstyles affecting the browser. Contribute to MrOtherGuy/firefox-csshacks development by creating an account on GitHub.

github.com

2002Andreas

Zitat von Gabbo

von einem echten Crack erstellt.

Sieht doch nicht anders aus als auf meinem unteren Screenshot in Beitrag Nr. 22

Mira_Belle

Ein leichter Schubser, danke!

@Gabbo

So schaut nun "mein" Code aus:

CSS

#appMenu-fxa-status2[fxastatus] > toolbarbutton::before,
#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image {
    fill: currentColor;
    -moz-context-properties: fill;
    margin-inline: 0 8px !important;
}    

/* Neuer Tab */

    #appMenu-new-tab-button2 {
        list-style-image: url("chrome://browser/skin/new-tab.svg");
    }

/* Neues Fenster */

    #appMenu-new-window-button2 {
        list-style-image: url("chrome://browser/skin/window.svg");
    }

/* Neues privates Fenster */

    #appMenu-new-private-window-button2 {
        list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
    }

/* Lesezeichen */

    #appMenu-bookmarks-button {
        list-style-image: url("chrome://browser/skin/bookmark.svg");
    }

/* Chronik */

    #appMenu-history-button {
        list-style-image: url("chrome://browser/skin/history.svg");
    }

/* Download */

    #appMenu-downloads-button {
        list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
    }

/* Passwörter */

    #appMenu-passwords-button {
        list-style-image: url("chrome://browser/skin/login.svg");
    }

/* Add-ons und Themes */

    #appMenu-extensions-themes-button {
        list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
    }

/* Drucken */

    #appMenu-print-button2 {
        list-style-image: url("chrome://global/skin/icons/print.svg");
    }

/* Seite speichern unter */

    #appMenu-save-file-button2 {
        list-style-image: url("chrome://browser/skin/save.svg");
    }

/* In Seite suchen */

    #appMenu-find-button2 {
        list-style-image: url("chrome://global/skin/icons/search-glass.svg");
    }

/* Zoom */



/*Einstellungen */

    #appMenu-settings-button {
        list-style-image: url("chrome://global/skin/icons/settings.svg");
    }

/*Weitere Werkzeuge */

    #appMenu-more-button2 { 
        list-style-image: url("chrome://global/skin/icons/developer.svg") 
    }

/* Hilfe */

    #appMenu-help-button2 {
        list-style-image: url("chrome://global/skin/icons/help.svg");
    }

/* Beenden */

    #appMenu-quit-button2 {
        list-style-image: url("../chrome/icons/quit.svg");
    }

Alles anzeigen

So weit war ich fast schon mal!

Nur fehlten mir die ersten sechs Zeilen.

OK, danke dafür.

Nun sind fast alle meine Probleme gelöst, fast, da ja immer noch das Ding mit dem Zoom offen ist

und

mir immer noch das Icon für Daten synchronisieren und speichern fehlt.

Gruß

Mira

PS: Das Menü schaut jetzt so aus.

2002Andreas

Zitat von Mira_Belle

fast alle meine Probleme gelöst

Dann teste bitte mal:

CSS

/*Nur bei Dark Theme hover*/
panelmultiview .toolbaritem-combined-buttons:hover {
background-color: #52525e !important;
}

/*Sync*/
#appMenu-fxa-status2::before {
margin-right: 6px !important; 
margin-left: -5px !important;
content: '' !important;
display: block !important;
width: 19px !important;
height: 15px !important;
background-image: url("chrome://browser/skin/fxa/avatar-empty.svg") !important;
background-repeat: no-repeat !important;
background-position: 0px 0px !important;
background-size: 15px 15px !important;
}

/* Zoom */
#appMenu-zoom-controls2::before {
margin-right: 6px !important; 
margin-left: -5px !important;
content: '' !important;
display: block !important;
width: 19px !important;
height: 15px !important;
background-image: url("chrome://browser/skin/fullscreen.svg") !important;
background-repeat: no-repeat !important;
background-position: 0px 0px !important;
background-size: 15px 15px !important;
}

Alles anzeigen

Gabbo

@Mira_Belle

Für den account-button sieht das o.a. CSS diese Lösung vor:

CSS

/* Use account-button icon for signed in sync item */
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before{
  display: -moz-box;
  content: "";
  width: 16px;
  height: 16px;
  background-image: var(--avatar-image-url)
}

Für zoom diese:

CSS

/* Add somewhat hacky separator to zoom controls so it looks consistent */
#appMenu-protonMainView > .panel-subview-body::after{
  content: "";
  display: -moz-box;
  border-bottom: 1px solid var(--panel-separator-color);
  margin: var(--panel-separator-margin);
}

milupo

Zitat von Mira_Belle

mir immer noch das Icon für Daten synchronisieren und speichern fehlt.

Du könntest dafür auch

CSS

        list-style-image: url("chrome://browser/skin/sync.svg");

nehmen. Dafür Zeile 14 im vorstehenden Code von Andreas ersetzen.

2002Andreas

Zitat von Gabbo

sieht das o.a. CSS diese Lösung vor:

wie kommst du darauf

Genau die beiden Button hat der echte Crack auch nicht.

Gabbo

@2002Andreas

Ich wollte Dir wirklich nicht auf die Füße treten...

Aber MrOtherGuy ist mein Idol, das andere ist 2002Andreas...

Das Icon für den account-button macht er so:

CSS

background-image:  var(--avatar-image-url) !important;

Das Icon für zoom hat er nicht, deshalb verschiebt er die letzte Einstellmöglichkeit an den Anfang (und benutzt sie als Icon)

2002Andreas

Zitat von Gabbo

Aber MrOtherGuy ist mein Idol, das andere ist Andreas2000.

Ich kenne beide nicht, das hat aber auch nichts zu bedeuten.

Zitat von Gabbo

Das Icon für den account-button macht er so:

Wie du auf meinem Screenshot erkennen kannst, ist dort keines vorhanden.

(evtl. muss man einen Account dazu erst haben)

Zitat von Gabbo

Das Icon für zoom hat er nicht

Ok, ist ja auch nicht schlimm.

Nur weil du geschrieben hattest:

Zitat von Gabbo

Für zoom diese:

Zitat von Gabbo

Ich wollte Dir wirklich nicht auf die Füße treten.

Tust du auch nicht.

Nur weil deine Bemerkung so klang, als wenn wir hier alle keine Ahnung haben.

Mira_Belle

Ich bin jetzt so weit!

CSS

@-moz-document url(chrome://browser/content/browser.xhtml)
{
    .foo {    /* nur wegen der Klammern */
    }

#appMenu-fxa-status2[fxastatus] > toolbarbutton::before,
#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image {
    fill: currentColor;
    -moz-context-properties: fill;
    margin-inline: 0 8px !important;
}
    
/*Sync*/
#appMenu-fxa-status2::before {
  margin-top: 3px !important;
  margin-right: 10px !important; 
  margin-left: -1px !important;
  content: '' !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  mask-image: url("chrome://browser/skin/fxa/avatar-empty.svg") !important;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: #e1e1e1 !important;
}

    
/* Neuer Tab */

    #appMenu-new-tab-button2 {
        list-style-image: url("chrome://browser/skin/new-tab.svg");
    }

/* Neues Fenster */

    #appMenu-new-window-button2 {
        list-style-image: url("chrome://browser/skin/window.svg");
    }

/* Neues privates Fenster */

    #appMenu-new-private-window-button2 {
        list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
    }

/* Lesezeichen */

    #appMenu-bookmarks-button {
        list-style-image: url("chrome://browser/skin/bookmark.svg");
    }

/* Chronik */

    #appMenu-history-button {
        list-style-image: url("chrome://browser/skin/history.svg");
    }

/* Download */

    #appMenu-downloads-button {
        list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
    }

/* Passwörter */

    #appMenu-passwords-button {
        list-style-image: url("chrome://browser/skin/login.svg");
    }

/* Add-ons und Themes */

    #appMenu-extensions-themes-button {
        list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
    }

/* Drucken */

    #appMenu-print-button2 {
        list-style-image: url("chrome://global/skin/icons/print.svg");
    }

/* Seite speichern unter */

    #appMenu-save-file-button2 {
        list-style-image: url("chrome://browser/skin/save.svg");
    }

/* In Seite suchen */

    #appMenu-find-button2 {
        list-style-image: url("chrome://global/skin/icons/search-glass.svg");
    }

/* Zoom */



/*Einstellungen */

    #appMenu-settings-button {
        list-style-image: url("chrome://global/skin/icons/settings.svg");
    }

/*Weitere Werkzeuge */

    #appMenu-more-button2 { 
        list-style-image: url("chrome://global/skin/icons/developer.svg") 
    }

/* Hilfe */

    #appMenu-help-button2 {
        list-style-image: url("chrome://global/skin/icons/help.svg");
    }

/* Beenden */

    #appMenu-quit-button2 {
        list-style-image: url("../chrome/icons/quit.svg");
    }



#appmenu-moreTools-button {
  list-style-image: url("chrome://browser/skin/customize.svg");
}

}

Alles anzeigen

Und die Icons für das Untermenü "Weitere Werkzeuge" habe ich auch gefunden.

CSS

/* Zoom */
#appMenu-zoom-controls2::before {
margin-right: 6px !important; 
margin-left: -5px !important;
content: '' !important;
display: block !important;
width: 19px !important;
height: 15px !important;
background-image: url("chrome://browser/skin/fullscreen.svg") !important;
background-repeat: no-repeat !important;
background-position: 0px 0px !important;
background-size: 15px 15px !important;
}

Alles anzeigen

Blendet zwar ein Icon ein, aber halt nicht das aus "LEPTON".

Für Heute mach ich Schluß.

Danke für Eure Hilfe.

Gruß

Mira

Gabbo

@2002Andreas

War einfach nur gut gemeint, aber jetzt bin ich Sprachlos...

2002Andreas

Zitat von Gabbo

War einfach nur gut gemeint,

Das ist ja auch sehr freundlich von dir gewesen.

Zitat von Gabbo

jetzt bin ich Sprachlos...

Warum

Mira_Belle

So habe noch etwas rumgespielt.

Wenn ich in Andreas Code für das Zoom-Icon

so abändere

CSS

#appMenu-zoom-controls2::before {
  margin-top: 3px !important;
  margin-right: 10px !important; 
  margin-left: -1px !important;
  content: '' !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  mask-image: url ("../chrome/icons/screenshot.svg") !important;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: #e1e1e1 !important;
}

Alles anzeigen

bekomme ich nur ein graues Kästchen zusehen! Irgendwie scheint was mit dem Pfad nicht zustimmen.

Habe under dem Pofil einen Chrome-Ordner in dem ich einen weiteren Icons-Ordner habe.

C:\Users\Benutzer\AppData\Roaming\Mozilla\Firefox\Profiles\default-release\chrome\Icons

Wie binde ich diese SVG-Dateien richtig ein?

Denn das Problem habe ich auch bei den Submenüs.

1. Weitere Werkzeuge

CSS

/*-----------------------*/
/* Weitere Werkzeuge */
/*-----------------------*/

/* Symbolleiste anpassen ... */

#appmenu-moreTools-button {
  list-style-image: url("chrome://browser/skin/customize.svg");
}

/* Werkzeuge für Web-... */

#appmenu-developer-tools-view .subviewbutton:nth-child(1) {
  list-style-image: url("../icons/developer.svg");
}

/* Task-Manager */

#appmenu-developer-tools-view .subviewbutton:nth-child(2) {
  list-style-image: url("../icons/performance.svg");
}

/* Externes Debugging */

#appmenu-developer-tools-view .subviewbutton:nth-child(3) {
  list-style-image: url("../icons/bug.svg");
}

/* Browser-Werkzeuge */

#appmenu-developer-tools-view .subviewbutton:nth-child(4) {
  list-style-image: url("../icons/window-dev-tools.svg");
}

/* Browser-Inhaltswerkzeuge */

#appmenu-developer-tools-view .subviewbutton:nth-child(5) {
  list-style-image: url("../icons/command-frames.svg");
}

/* Browser-Konsole */

#appmenu-developer-tools-view .subviewbutton:nth-last-child(5) {
  list-style-image: url("chrome://devtools/skin/images/command-console.svg");
}

/* Bildschirmgrößen testen */

#appmenu-developer-tools-view .subviewbutton:nth-last-child(4) {
  list-style-image: url("../icons/command-responsivemode.svg");
}

/* Farbpipette */

#appmenu-developer-tools-view .subviewbutton:nth-last-child(3) {
  list-style-image: url("chrome://devtools/skin/images/command-eyedropper.svg");
}

/* Seitenquelltext anzeigen */

#appmenu-developer-tools-view .subviewbutton:nth-last-child(2) {
  list-style-image: url("../icons/document-search.svg");
}

/* Erweiterungen für Entwickler */

#appmenu-developer-tools-view .subviewbutton:nth-last-child(1) {
  list-style-image: url("chrome://devtools/skin/images/debugging-addons.svg");
}

Alles anzeigen

und 2. Firefox-Hilfe

CSS

/*---------------*/
/* Firefox-Hilfe */
/*---------------*/

/* Hilfe erhalten */

#appMenu_menu_openHelp {
  list-style-image: url("chrome://global/skin/icons/help.svg");
}

/* Ideen und Feedback teilen ... */

#appMenu_feedbackPage {
  list-style-image: url("../icons/send.svg");
}

/* Fehlerbehebungsmodus ... */

#appMenu_helpSafeMode {
  list-style-image: url("chrome://devtools/skin/images/debugging-workers.svg");
}

/* Weitere Informationen zur ... */

#appMenu_troubleShooting {
  list-style-image: url("chrome://global/skin/icons/more.svg");
}

/* Betrügerische Website melden ... */

#appMenu_menu_HelpPopup_reportPhishingtoolmenu {
  list-style-image: url("chrome://global/skin/icons/warning.svg");
}

/* Über Firefox */

#appMenu_aboutName {
  list-style-image: url("chrome://global/skin/icons/info.svg");
}

Alles anzeigen

Bei den Subs keben auch die Icons und der Text wider aneinander

und

sie sind dunkel.

Gruß

Mira

milupo

Zitat von Mira_Belle

bekomme ich nur ein graues Kästchen zusehen! Irgendwie scheint was mit dem Pfad nicht zustimmen.

Wenn der Ordner icons direkt unter chrome liegt: Verwende dann den Pfad ../icons/screenshot.svg

Mira_Belle

Zitat von milupo

Wenn der Ordner icons direkt unter chrome liegt: Verwende dann den Pfad ../icons/screenshot.svg

Tut er!

Z.B. Aus der "Weitere Werkzeuge-CSS"

CSS

#appmenu-developer-tools-view .subviewbutton:nth-child(1) {
  list-style-image: url("../icons/developer.svg");
}

Wird das Icon nicht angezeigt.

Was ich aber mittlerweile gelöst bekommen habe ist,

dass in diesem Submenü die Icons, welche angezeigt werden,

nicht mehr dunkel sind und nicht mehr am Text kleben!

Hier der Code dafür:

CSS

#appmenu-moreTools > .panel-subview-body > toolbarbutton > image{
  fill: currentColor;
  -moz-context-properties: fill;
  margin-inline: 0 8px !important;
}

Für das erste Symbol!

Und für alle anderen =>

CSS

#appmenu-developer-tools-view > .subviewbutton  > image{
  fill: currentColor;
  -moz-context-properties: fill;
  margin-inline: 0 8px !important;
}

Nur für das verdammte Hilfemenü bekomme ich es einfach nicht hin!

Fazit:

Nur noch drei Probleme!

1. Das Submenü "Hilfe",

2. das mit den Pfaden

und

3. immer noch das "Zoom-Icon"

Gruß

Mira

NACHTRAG!

Hatte einen Geistesblitz!!

Problem im Submenü "Hilfe" ist jetzt auch gelöst,

für die Icons, die angezeigt werden.

Der Code:

CSS

#PanelUI-helpItems> toolbarbutton > image{
  fill: currentColor;
  -moz-context-properties: fill;
  margin-inline: 0 8px !important;
}

Dharkness

Zitat von Mira_Belle
Tut er!
Z.B. Aus der "Weitere Werkzeuge-CSS"
CSS
#appmenu-developer-tools-view .subviewbutton:nth-child(1) {
  list-style-image: url("../icons/developer.svg");
}
Wird das Icon nicht angezeigt.

Versuche es mal mit "..//chrome/icons/developer.svg", ist bei mir merkwürdigerweise auch so nötig.

Mira_Belle

Zitat von Dharkness

Versuche es mal mit "..//chrome/icons/developer.svg", ist bei mir merkwürdigerweise auch so nötig.

Leider nicht von Erfolg gekrönt.

Gruß

Mira

Nachtrag.

Also mit list-style-image: url("..//chrome/icons/developer.svg"); oder list-style-image: url("..//icons/developer.svg");

wird gar nichts gezeigt!

Bei list-style-image: url("../chrome/icons/developer.svg"); oder auch list-style-image: url("..//icons/developer.svg");.

Bekomme ich wenigstes eine Fehlermeldung!

No chrome package registered for chrome://chrome/browser/icons/developer.svg

bzw. No chrome package registered for chrome://browser/icons/developer.svg

Kann damit jemand was anfangen?

Sören Hentzschel

Zitat von Mira_Belle

Bei list-style-image: url("../chrome/icons/developer.svg"); oder auch list-style-image: url("..//icons/developer.svg");.
Bekomme ich wenigstes eine Fehlermeldung!
No chrome package registered for chrome://chrome/browser/icons/developer.svg
bzw. No chrome package registered for chrome://browser/icons/developer.svg

Kann damit jemand was anfangen?

Unter dem angegebenen Pfad existiert keine Datei. Gib den Pfad doch einfach mal in die Adressleiste ein.

Symbole in Menüs

Ähnliche Themen

Meine .css und .js für Fx 10x.0bxbeta

Firefox Startseite

Separator zwischen Tableiste und Url-Leiste entfernen

Ähnliche Themen

Meine *.css und *.js für Fx 10x.0bxbeta

Firefox Startseite

Separator zwischen Tableiste und Url-Leiste entfernen

Meine .css und .js für Fx 10x.0bxbeta