Größere Abstände zwischen den Menüsymbolen und dem Menütext

2002Andreas

Zitat von bananovic

Das Lupen-Icon ganz links vor "Zoom" ist zu klein

Teste mal damit als Zusatz:

CSS

transform: scale(1.2, 1.2) !important;

Die Werte evtl. noch etwas anpassen.

Zitat von bananovic

um einen guten Zentimeter nach links auseinandergezogen.

Ändere mal die margin Werte etwas.

bananovic

Der Code "transform" hat dem Icon vor "Zoom" zur gewünschten Größe verholfen, und zwar mit Deinen Werten.

Ich habe die margin-right Werte bei "verkleinern", "vergrößern" und auch bei "Reset" (neu eingefügt) mit 12px versehen. Das hat die richtigen Abstände gebracht, diese drei Symbole wurden damit nach links verschoben. Vollbild am Ende und Zoom am Anfang blieben unverändert positioniert. Damit sind meine Fragen beantwortet. Vielen Dank, Andreas.

Ich habe noch ein kleines Problem, das betrifft die Checkmarks. Ich bin gewohnt, daß diese Grün sind. Eine entsprechende Icondatei habe ich auch in meiner Sammlung. Checkmarks gibt es im Untermenu von "Ansicht" – Symbolleisten (hier ist es die "Menüleiste") sowie im weiteren Untermenü von Lesezeichen-Symbolleiste (hier ist es "immer anzeigen").
Im Untermenü "Webseiten-Stil" hat bei mir merkwürdigerweise der Untermenüpunkt "Kein Stil" einen grünen Haken. Der Haken bei "Standard-Stil" ist grau. Meines Erachtens müßte der Haken bei "Kein Stil" ganz verschwinden, da diese Option nicht ausgewählt ist, und bei "Standard-Stil" sollte der Haken grün sein.

Als Untermenü von "Zoom" gibt es den Punkt "Nur Text zoomen". Letzterem Menüpunkt habe ich ein Icon spendiert. Wenn ich die Option "Nur Text zoomen" wähle, sollte eigentlich ein Haken (am besten ein grüner Haken) statt des Icons erscheinen. Tatsächlich rückt das Icon etwas nach links und an der bisherigen Stelle erscheint ein grauer Haken. Statt eines Symbols sind beide vorhanden, was sicherlich nicht richtig ist.

Gibt es auch für diese Fragen eine Lösung?

2002Andreas

Zitat von bananovic

Vielen Dank, Andreas.

Freut mich wenn ich dir damit helfen konnte, war gern geschehen

Zitat von bananovic

sowie im weiteren Untermenü von Lesezeichen-Symbolleiste (hier ist es "immer anzeigen").

Evtl. kannst du damit ja etwas anfangen für deine Codes:

CSS

#view-menu-popup > menu > menupopup > menuitem:is([type="checkbox"], [checked="true"]) > .menu-iconic-left,
#toolbar-context-menu menuitem:not(#toggle_toolbar-menubar):is([type="checkbox"], [checked="true"]) > .menu-iconic-left,
#placesContext menuitem:is([type="checkbox"], [checked="true"]) > .menu-iconic-left {
  display: none !important;
}

#placesContext > menu > menupopup > menuitem[checked="true"]::before {
  margin-right: 3px !important; 
  margin-left: -10px !important;
  content: '' !important;
  display: block !important;
  width: 19px !important;
  height: 15px !important;
  background-image: url("file:///C:/Users/Andi/Icons%20Firefox/grün.png") !important;
  background-repeat: no-repeat !important;
  background-position: 0px 0px !important;
  background-size: 15px 15px !important;
}

#placesContext > menu > menupopup > menuitem[checked="false"]::before {
  margin-right: 13px !important; 
  margin-left: -18px !important;
  content: '' !important;
  display: block !important;
  width: 19px !important;
  height: 15px !important;
  background-image: url("file:///C:/Users/Andi/Icons%20Firefox/rot.png") !important;
  background-repeat: no-repeat !important;
  background-position: 0px 0px !important;
  background-size: 15px 15px !important;
}

#placesContext > menu > menupopup > menuitem[checked="false"] {
  padding-inline-start: 21px !important;
}

#toolbar-context-menu > menu > menupopup > menuitem[checked="false"]::before {
  margin-right: -1px !important; 
  margin-left: -31px !important;
  content: '' !important;
  display: block !important;
  width: 19px !important;
  height: 15px !important;
  background-image: url("file:///C:/Users/Andi/Icons%20Firefox/rot.png") !important;
  background-repeat: no-repeat !important;
  background-position: 0px 0px !important;
  background-size: 15px 15px !important;
}

#toolbar-context-menu > menu > menupopup > menuitem[checked="true"]::before {
  margin-right: 3px !important; 
  margin-left: -8px !important;
  content: '' !important;
  display: block !important;
  width: 19px !important;
  height: 15px !important;
  background-image: url("file:///C:/Users/Andi/Icons%20Firefox/grün.png") !important;
  background-repeat: no-repeat !important;
  background-position: 0px 0px !important;
  background-size: 15px 15px !important;
}

#view-menu-popup > menu > menupopup > menuitem[checked="true"]::before {
  margin-right: 3px !important; 
  margin-left: -10px !important;
  content: '' !important;
  display: block !important;
  width: 19px !important;
  height: 15px !important;
  background-image: url("file:///C:/Users/Andi/Icons%20Firefox/grün.png") !important;
  background-repeat: no-repeat !important;
  background-position: 0px 0px !important;
  background-size: 15px 15px !important;
}

#view-menu-popup > menu > menupopup > menuitem[checked="false"]::before {
  margin-right: 3px !important; 
  margin-left: -32px !important;
  content: '' !important;
  display: block !important;
  width: 19px !important;
  height: 15px !important;
  background-image: url("file:///C:/Users/Andi/Icons%20Firefox/rot.png") !important;
  background-repeat: no-repeat !important;
  background-position: 0px 0px !important;
  background-size: 15px 15px !important;
}

Alles anzeigen

So sieht das dann z.B. für die Lesezeichensymbolleiste aus.

grisu2099

Zitat von bananovic

Als Untermenü von "Zoom" gibt es den Punkt "Nur Text zoomen". Letzterem Menüpunkt habe ich ein Icon spendiert. Wenn ich die Option "Nur Text zoomen" wähle, sollte eigentlich ein Haken (am besten ein grüner Haken) statt des Icons erscheinen. Tatsächlich rückt das Icon etwas nach links und an der bisherigen Stelle erscheint ein grauer Haken. Statt eines Symbols sind beide vorhanden, was sicherlich nicht richtig ist.

Stellst du dir das so in der Art vor?

2002Andreas

Zitat von bananovic

Im Untermenü "Webseiten-Stil"

Auch wieder zum testen:

CSS

menuitem[checked="true"] {
  color: green !important;
}

menuitem[type="checkbox"]:not([checked="true"]):not([data-l10n-id="menu-view-full-screen"]),
menuitem[type="radio"]:not([checked="true"]) {
  color: blue !important;
}

menuitem[type="checkbox"]:not([checked="true"]):hover,  
menuitem[type="radio"]:not([checked="true"]):hover {
  color: white !important;
  background-color: blue !important;
}

Alles anzeigen

Mira_Belle

Zitat von grisu2099

Stellst du dir das so in der Art vor?

Wie ist denn Dein Code dazu?

Ich habe zwar auch Symbole, aber diese überdecken dann den Haken, wenn aktiviert.

grisu2099

Zitat von Mira_Belle

Ich habe zwar auch Symbole, aber diese überdecken dann den Haken, wenn aktiviert.

Bei mir ist es genau andersrum...

Mira_Belle

Zitat von grisu2099

Bei mir ist es genau andersrum...

Interresant,

und Dein Code?

grisu2099

Der ist ein wenig tricky....

Step 1:

CSS

            /* hiermit werden Checkbox/Radio mit Rahmen dargestellt */
            /* Wenn später im Code für dieses Item noch ein Icon definiert wird, wird das verwendet (bei ungecheckt) */
menuitem[type="checkbox"] > hbox:nth-child(1),
menuitem[type="radio"] > hbox:nth-child(1) {
    border: 1px solid white !important;
    border-radius: 3px !important;
    width: 16px !important;
    height: 16px !important;
    }

Step 2: Icon für den Menü-Punkt (bei [checked=false]:

Hier als Beispiel für den Menü-Eintrag Ansicht->Sidebar->Lesezeichen (wie oben in den Screenshots)

CSS

    /* Wchselicons für die Sidebar-Typen */
#menu_bookmarksSidebar:not([checked="true"]) > hbox:nth-child(1) {
    border: none !important;
    width: 16px !important;
    height: 16px !important;
    }
#menu_bookmarksSidebar:not([checked="true"]) {
    background: url("file:///F:/FIREFOX-ICONS/Icons/Lesezeichen.png") no-repeat 5px 4px !important;
    }
#menu_bookmarksSidebar:not([checked="true"]) > .menu-iconic-text {
    margin-left: 0 !important;
    }

Alles anzeigen

Step 3: Der Haken für die Checkbox, wenn [checked=true] ist

CSS

            /* hiermit bekommen Checkbox/Radio mit Haken dargestellt, wenn gecheckt */
menuitem[checked="true"] > .menu-iconic-left {
    border: 1px solid white !important;
    border-radius: 3px !important;
    list-style-image: url("file:///F:/FIREFOX-ICONS/Icons/checkmark3.png") !important;
    width: 16px !important;
    height: 16px !important;
    }

Bei Menü-Einträgen, für die kein Extra-Icon definiert ist, sieht das dann so aus:

Mira_Belle

grisu2099

Daraus konnte ich mir jetzt was basteln, danke.

Es schaut jetzt so aus:

Und wer sich für die Umsetzung interessiert:

Beitrag

RE: Symbole in den Kontextmenüs [ Update ]

Es hat sich wieder etwas getan.

Da es hier und da neue Menüs bzw. Einträge in diesen gab,

aber ich auch kleine Unvollständigkeiten behoben habe,

eine neue Version meiner Symbole.css sowie der Sybole.us.js

Es gibt zwei Möglichkeiten, den Firefox zum Anzeigen von Symbolen in den Menüs zu bewegen.

1.

(Quelltext, 764 Zeilen)

oder

2.

(Quelltext, 712 Zeilen)

Und natürlich wieder mit den Symbolen.

camp-firefox.de/attachment/43819/

Mira_Belle

29. August 2023 um 11:34

bananovic

Mit dem Code von grisu2099 bin ich zum gewünschten Ergebnis gekommen. Hier der vollständige Code des Ansicht-Menüs:

CSS

/* Checkboxen mit grünem Haken, wenn ausgewählt */
    menuitem[checked="true"] > .menu-iconic-left {
        list-style-image: url("../icons/Checkmark.png") !important; }

/* --- ANSICHT --- */
    
    /* Symbolleisten */
    #viewToolbarsMenu { background-image: url("../icons/application-XP.png"); }
        /* <<< Submenu_Symbolleisten >>> */
           #toggle_PersonalToolbar { background-image: url("../icons/bookmarksToolbar-1.png"); }
           #menu_customizeToolbars { background-image: url("../icons/Palette.png"); }  
    /* Sidebar */
    #viewSidebarMenuMenu { background-image: url("../icons/Sidebar.png"); }
        /* <<< Submenu_Sidebar >>> */
        
        /* Wechselicons für die Sidebar-Typen */
        
        #menu_bookmarksSidebar:not([checked="true"]) > hbox:nth-child(1) {
           border: none !important;
           width: 16px !important;
           height: 16px !important; }
        #menu_bookmarksSidebar:not([checked="true"]) {
           background: url("../icons/Bookmark_2.png") no-repeat 5px 4px !important;
           background-position:12px 4px!important; }
        #menu_bookmarksSidebar:not([checked="true"]) > .menu-iconic-text {
           margin-left: -15px !important; }
           
           #menu_historySidebar:not([checked="true"]) > hbox:nth-child(1) {
           border: none !important;
           width: 16px !important;
           height: 16px !important; }
        #menu_historySidebar:not([checked="true"]) {
           background: url("../icons/history-XP.png") no-repeat 5px 4px !important;
           background-position:12px 4px!important; }
        #menu_historySidebar:not([checked="true"]) > .menu-iconic-text {
           margin-left: -15px !important; }
           
        #menu_tabsSidebar:not([checked="true"]) > hbox:nth-child(1) {
           border: none !important;
           width: 16px !important;
           height: 16px !important; }
        #menu_tabsSidebar:not([checked="true"]) {
           background: url("../icons/Sync.png") no-repeat 5px 4px !important;
           background-position:12px 4px!important; }
        #menu_tabsSidebar:not([checked="true"]) > .menu-iconic-text {
           margin-left: -15px !important; }
        
    /* Zoom */
    #viewFullZoomMenu { background-image: url("../icons/Zoom-1.png"); } 
        /* <<< Submenu_Zoom >>> */
        
        #menu_zoomEnlarge { background-image: url("../icons/ZoomPlus.png"); }       /*  +  */
        #menu_zoomReduce { background-image: url("../icons/ZoomMinus.png"); }   /*  -  */
        #menu_zoomReset { background-image: url("../icons/ZoomReset.png"); }
           
        /* Wechselicon für Zoom - Nur Text zoomen */   
        #toggle_zoom:not([checked="true"]) > hbox:nth-child(1) {
           border: none !important;
           width: 16px !important;
           height: 16px !important; }
        #toggle_zoom:not([checked="true"]) {
           background: url("../icons/Font.png") no-repeat 5px 4px !important;
           background-position:12px 4px!important; }
        #toggle_zoom:not([checked="true"]) > .menu-iconic-text {
           margin-left: -15px !important; } } 
           
    /* Webseiten-Stil */
    #pageStyleMenu { background-image: url("../icons/PageStyle.png"); }  
    /* Textkodierung reparieren */
    #repair-text-encoding { background-image: url("../icons/Encoding.png"); }
    /* Vollbild */
    #fullScreenItem { background-image: url("../icons/Vollbild-Image.png"); }
    /* Leseansicht öffnen / beenden */
    #menu_readerModeItem { background-image: url("../icons/ReaderView.png"); }

Alles anzeigen

Ich füge auch mal die farbigen Icons bei. Wenn meine Menu-Icons.css komplett gewünscht wird, bitte melden. Meine Fragen sind damit alle beantwortet. Vielen Dank an alle. Menu-Icons.zip

2002Andreas

Zitat von bananovic

Meine Fragen sind damit alle beantwortet.

Danke für die Rückmeldung. 👍

Schön dass dein Problem gelöst ist.

grisu2099

Zitat von bananovic

Mit dem Code von grisu2099 bin ich zum gewünschten Ergebnis gekommen.

Freut mich, wenn ich dir die passende Idee geben konnte...