Symbole in Menüs

Mira_Belle

Hallo.

Inspiriert durch diesen Beitrag, bzw. den Link auf Reddit

erwuchs in mir das Bedürfnis, meine Menüs auch mit Symbole zu verschönern.

Eventuell kann mir da jemand, Andreas?, unter die Arme greifen.

Was ich bräuchte sind sie Symbole bzw, die Verweise darauf.

Und so in etwa sollte es dann ausschauen.

Es geht NUR um die Symbole, eventuell in hell und dunkel,

aber eher in hell, da z.Z. bei mir der Hintergrund dunkel ist.

Hamburgermenü

CSS

@-moz-document url(chrome://browser/content/browser.xhtml)
{
    /*---------------------------------------------------*/
    /********* Anpassungen des "Hamburgermenüs" **********/
    /*---------------------------------------------------*/

    .foo {    /* nur wegen der Klammern */
    }

    :root {
        --arrowpanel-menuitem-padding: 0px 8px !important;                    /* Zeilenabstand */
    }
    
    #appMenu-protonMainView {                                                /* Menübreite */
        width: 320px !important;            
    }    

    /* Farbe der Separatoren */
 
    #editBookmarkPanel toolbarseparator, 
    .cui-widget-panel toolbarseparator {
        appearance: none !important;
        background: #5b5b66 !important;                                    /* Helles Mausgrau */
    }

    /* Farbe der Schrift & Hintergrund */
    
    panelview,
    #appMenu-popup  .panel-subview-body {
        background: #292c2f !important;                                          /* Dunkles Grau */
        border: 1px solid #ff9600 !important;
        border-radius: 8px !important;
    }

    :is(menupopup, panel)[type="arrow"] {
    
        --panel-color: #e1e1e1 !important;                                 /* Schriftfarbe */        /* Hellgrau */
        --panel-border-color:#292c2f !important;                             /* Rahmenfarbe */
        --panel-border-radius: 8px !important;                                 /* Rahmenradius */
    } 
}

Alles anzeigen

Lesezeichen, weil hier auch die Popups sind.

CSS

@-moz-document url(chrome://browser/content/browser.xhtml)            
{
    /* ----------------------------------------------------------------------------*/
    /***** Abstände der Einträge in den Menüs und Lesezeichen wieder schmaler ******/
    /* ----------------------------------------------------------------------------*/

    /* Abstände */ 
    menupopup > menuitem,
    menupopup > menu {
        appearance: none !important;
        padding-block: 2px !important;
        padding-inline-start: 25px !important;
    }


/*Abstände Lesezeichen Popup + Menü */
/*
#PlacesToolbar :is(menu,menuitem){
  margin: 0 0 !important;
  min-height: 20px !important;
  padding-top: 0 !important; 
  padding-bottom: 0 !important;
}

*/

    /* Anpassungen der Popups */
    menupopup {
        appearance: none !important;
        --panel-color: #e1e1e1 !important;                                    /* Hellgrau, Schrift */
        --panel-background: #292c2f !important;                                /* Dunkles Grau, Hintergrund */    
        --panel-border-color:transparent !important;                        /* Rahmenfarbe */
        --panel-border-radius: 4px !important;                                /* Rahmenradius */
        background-color: #292c2f !important;                             /* Hintergrund */
    border: 3px solid #ff9600 !important;
/*    border: 3px solid #ff9600 !important;    */
    border-radius: 8px !important;
    }
  
    /* Nur für anderes Windowstheme */
    #context-navigation {
        background-color: transparent !important;
    }

    #context-navigation:not([hidden]) {
        appearance: none !important;
        padding: 0 25px 4px !important;
    }

    menu[id="file-menu"],
    menu[id="edit-menu"],
    menu[id="view-menu"],
    menu[id="history-menu"],
    menu[id="bookmarksMenu"],
    menu[id="tools-menu"],
    menu[id="helpMenu"]  {
        appearance: none !important; 
        background:transparent !important;    
        color: #e1e1e1  !important;                                        /* Hellgrau, Schrift */
    }
    menu[id="file-menu"]:hover,
    menu[id="edit-menu"]:hover,
    menu[id="view-menu"]:hover,
    menu[id="history-menu"]:hover,
    menu[id="bookmarksMenu"]:hover,
    menu[id="tools-menu"]:hover,
    menu[id="helpMenu"]:hover {
        appearance: none !important; 
        background: rgba(225, 225, 225, 0.2) !important;                    /* Hellgrau, Feld */
    }

}

Alles anzeigen

Gruß

Mira

milupo

Vielleicht liest Endor das. Er hat schon vor langem 5 CSS-Dateien für das Hamburger-Menü zusammengestellt, mit denen farbige Symbole zugewiesen werden:

CSS/Firefox/Hamburger-Panel at master · Endor8/CSS

CSS Codes. Contribute to Endor8/CSS development by creating an account on GitHub.

github.com

Ob auf seiner Github-Seite der Stand aktuell ist, kann ich dir nicht sagen. Aber Endor wird sich sicher melden.

So sieht das bei mir im sorbischen Firefox aus:

Endor

Hallo Mira_Belle .

Leider habe ich im Moment keine Zeit meine Codes auf Github zu pflegen.
Daher kann ich auch nicht sagen ob die im aktuellen Firefox richtig funktionieren.

Sobald ich wieder Zeit habe kümmere ich mich darum.

Mfg.
Endor

Mira_Belle

Danke Endor für Deine Rückmeldung.

Ich habe, die vom mir gewünschten Symbole (Icons) gefunden.

Lepton (old name: Proton Fix)

Jetzt muss ich nur noch zusehen, wie ich diese so einbinde, dass sie auch an richtiger Stelle erscheinen.

Dazu kann ich ja dann Deinen Code als Beispiel heranziehen.

Mal schauen, ob ich das dann an diesem WE wie von mir gewünscht hinbekomme.

Gruß

Mira

Mira_Belle

So, habe mal ein neues Profil angelegt und mit "Lepton" [hingerichtet. ] eingerichtet.

Die Menüs schauen schon so aus, wie ich sie gerne auch hätte.

Habe mir dann die CSS's angeschaut, und blöde aus der Wäsche geschaut.

Danach geschaut, was ich mit den "Werkzeugen" rausfinden kann.

So auf die Schnelle nix.

Werde also etwas Zeit benötigen.

Gruß

Mira

milupo

Zitat von Mira_Belle

mit "Lepton" hingerichtet

Du bist ja ziemlich brutal.

Mira_Belle

Hahaha!

Ich kann nicht mehr.

Nein, das Profil gibt es noch.

Hingerichtet wird es später!

Gruß

Mira

Mira_Belle

So etwas...

CSS

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

... stellt mich vor ein Rätzel!

Wo bitte finde ich diese "windows.svg"?

Im Profilordner schon mal nicht! Oder etwa doch?

Wenn ich also all diese Codefragmente kopiere, werden die Icons dann auch in meinem anderen Profil gefunden und eingebunden?

Und wenn ja, muss ich noch herausfinden, wie sie dann anrichtiger Stelle erscheinen.

Gruß

Mira

PS: Nur zur Erinnerung!

CSS

@supports -moz-bool-pref("userChrome.icon.panel_full") or -moz-bool-pref("userChrome.icon.panel_photon") {
#appMenu-new-tab-button2 {
list-style-image: url("chrome://browser/skin/new-tab.svg");
}
}

CSS

@supports -moz-bool-pref("userChrome.icon.panel_sparse") {
#appMenu-new-tab-button2,
#appMenu-passwords-button,
#appMenu-extensions-themes-button,
#appMenu-save-file-button2,
#appMenu-find-button2,
#appMenu-more-button2,
#appMenu-help-button2,
#appMenu-quit-button2 {
padding-top: var(--arrowpanel-menuitemblank-padding-block) !important;
padding-bottom: var(--arrowpanel-menuitemblank-padding-block) !important;
}


#appMenu-zoom-controls2 {
padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
}
}
#appMenu-new-window-button2 {
list-style-image: url("chrome://browser/skin/window.svg");
}


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


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


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


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


@supports -moz-bool-pref("userChrome.icon.panel_full") or -moz-bool-pref("userChrome.icon.panel_photon") {
#appMenu-passwords-button {
list-style-image: url("chrome://browser/skin/login.svg");
}


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


@supports -moz-bool-pref("userChrome.icon.panel_full") {
#appMenu-save-file-button2 {
list-style-image: url("chrome://browser/skin/save.svg");
}


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


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


@supports -moz-bool-pref("userChrome.icon.panel_full") {
#appMenu-more-button2 {
list-style-image: url("chrome://browser/skin/ion.svg");
}
}
@supports -moz-bool-pref("userChrome.icon.panel_full") or -moz-bool-pref("userChrome.icon.panel_photon") {
#appMenu-help-button2 {
list-style-image: url("chrome://global/skin/icons/help.svg");
}


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

Alles anzeigen

Sören Hentzschel

Zitat von Mira_Belle

Wo bitte finde ich diese "windows.svg"?
Im Profilordner schon mal nicht! Oder etwa doch?

Diese Datei befindet sich direkt in Firefox, wie alles, was über das chrome://-Protokoll aufgerufen wird. Wenn du eine andere Grafik verwenden möchtest, musst du den Pfad entsprechend zu einer anderen Datei anpassen.

Mira_Belle

So, habe einige "Sybole" (Icons) gefunden und genau so in die Stilbearbeitung mal eingetragen.

Siehe da, die Anordnung stimmt schon mal.

CSS

/* 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 */


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

Alles anzeigen

Jedoch, so'n Käse, sind alle Symbole dunkel (schwarz)

und mit fill: white !important; oder color: white !important; tut sich auch nichts.

Schade.

Auch klebt die Beschriftung direkt an den "Sybolen" (Icons),

auch nicht wirklich schön!

Tja, und was ich bisher so gar nicht herausgefunden habe,

die "Sybole" (Icons) für:

Zoom, Weitere Werkzeuge und Beenden.

Gruß

Mira

PS:

Normalerweise sollten diese Eintrage die fehlenden "Sybole" (Icons) sein.

CSS

#appMenu-zoom-controls2::before {
content: url("../icons/screenshot.svg");
}

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

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

Alles anzeigen

Jedoch werden die so nicht angesprochen und erscheinen dan ja nicht.

Wie bekomme ich das noch hin?

HA!

"screenshot.svg" & "quit.svg" sind im Unterverzeichnis!

2002Andreas

Zitat von Mira_Belle

Wie bekomme ich das noch hin?

Meinst du das alles so?

Dharkness

Zitat von 2002Andreas

Meinst du das alles so?

Hm, wieso ist in dem Menü eine Scrollbar zu sehen, ich habe einen Eintrag mehr und habe keine Scrollbar?

2002Andreas

Zitat von Dharkness

wieso ist in dem Menü eine Scrollbar zu sehen

Neues Profil:

Da ich alle Abstände in den Menüs hier verändert habe.

Sieht es in meinem Hauptprofil so aus:

Sören Hentzschel

Zitat von Mira_Belle

Jedoch, so'n Käse, sind alle Symbole dunkel (schwarz)
und mit fill: white !important; oder color: white !important; tut sich auch nichts.

Kannst du so lösen:

CSS

#appMenu-new-tab-button2 image {
  width: 16px;
  height: 16px;
  mask-image: url('chrome://browser/skin/new-tab.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: rebeccapurple;
}

Zitat von Mira_Belle

Auch klebt die Beschriftung direkt an den "Sybolen" (Icons),
auch nicht wirklich schön!

Einfach ein bisschen padding hinzugefügt:

CSS

#appMenu-new-tab-button2 label {
  padding-start: 10px;
}

Dharkness

Zitat von 2002Andreas

Da ich alle Abstände in den Menüs hier verändert habe.

Das habe ich auch, aber ich habe keinen entsprechenden Effekt.

2002Andreas

Zitat von Dharkness

keine entsprechenden Effekt.

Standard:

Änderung in den Anpassungen:

Mira_Belle

CSS

#appMenu-new-tab-button2 image {
  width: 16px;
  height: 16px;
  mask-image: url('chrome://browser/skin/new-tab.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: #e1e1e1 !important;
}
#appMenu-new-tab-button2 label {
  padding: 10px !important;
}

#appMenu-new-window-button2 image {
  width: 16px;
  height: 16px;
  mask-image: url("chrome://browser/skin/window.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: #e1e1e1 !important;
}
#appMenu-new-window-button2 label {
  padding: 10px !important;
}
#appMenu-new-private-window-button2 image {
  width: 16px;
  height: 16px;
  mask-image: url("chrome://browser/skin/privateBrowsing.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: #e1e1e1 !important;
}
#appMenu-new-private-window-button2 label {
  padding: 10px !important;
}

Alles anzeigen

Führt leider nicht zum erwünschten Erfolg.

Rot markiert stimmt es!

Icon ist "hell" der Abstand zum Text ist auch i.O.

ABER die Zeilenhöhe wurde verändert!

Siehe Zeilenabstäne ab "Lesezeichen".

Die Icons, gelb unterstichen, wollen aber nicht hell werden.

Zitat von 2002Andreas

Meinst du das alles so?

Ja, genau so!

Nur mit weniger Zeilenhöhe.

Also, eigentlich genau so =>

Gruß

Mira

PS: Das Icon für Daten synchronisieren und speichern habe ich auch noch nicht gefunden).

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.

Mira_Belle

War gerade etwas Künstlerisch!

Habe einen Entwurf gemacht.

Wie bis Download, so hätte ich gerne das Menü.

Probleme, welche ich bisher habe:

* Mir fehlen zwei Icons Datei synchronisieren und speichern, Weitere Werkzeuge und Zoom

* Icon bekomme ich nicht alle HELL

* Zeilenhöhe !

Gruß

Mira

Dharkness

Zitat von Mira_Belle

* Icon bekomme ich nicht alle HELL

Da müsste eigentlich das → fill: #FFF !important; helfen.

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