Icons in Kontxtmenü überlagern Menütext

bananovic · August 4, 2024 at 2:00 PM

Thunderbird 128.01esr

Windows 10

Ich habe in meinem Thunderbird alle Einträge der Menüs und Kontextmenüs mit Icons versehen. Das hat bis zur Version 115 gut geklappt. Nach dem Update auf TB 128 überlagern die Icons der Kontxtmenüeinträge in der Threadpane und der Messagepane die Menütexte, zum Teil auch bei den Untermenüs, aber nicht bei allen. In den Hauptmenüs (Datei, Bearbeiten, Ansicht etc.) ist alles wie es sein soll. Einen Screenshot im Anhang.

Ein Auszug aus meiner Menu-Icons.css. Die ganze Datei ist sehr groß.

CSS

/* THREADPANE */
    
    #mailContext-openNewTab { background-image: url("../icons/43.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }      
    #mailContext-openNewWindow { background-image: url("../icons/42.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-openConversation { background-image: url("../icons/233.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-replySender { background-image: url("../icons/155.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-replyAll { background-image: url("../icons/94.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-forward { background-image: url("../icons/37.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-forwardAsMenu { background-image: url("../icons/37.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
           #mailContext-forwardAsInline { background-image: url("../icons/147.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-forwardAsAttachment { background-image: url("../icons/173.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
    #mailContext-redirect { background-image: url("../icons/267.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-editAsNew { background-image: url("../icons/6.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-tags { background-image: url("../icons/385.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
           #mailContext-addNewTag { background-image: url("../icons/203.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-manageTags { background-image: url("../icons/292.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-tagRemoveAll { background-image: url("../icons/300.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
    #mailContext-mark { background-image: url("../icons/305.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
           #mailContext-markRead { background-image: url("../icons/356.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-markUnread { background-image: url("../icons/357.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-markThreadAsRead { background-image: url("../icons/80.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-markReadByDate { background-image: url("../icons/287.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-markAllRead { background-image: url("../icons/274.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-markFlagged { background-image: url("../icons/14.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-markAsJunk { background-image: url("../icons/167.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-markAsNotJunk { background-image: url("../icons/168.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-recalculateJunkScore { background-image: url("../icons/169.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
    #mailContext-archive { background-image: url("../icons/157.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-moveMenu { background-image: url("../icons/146.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-copyMenu { background-image: url("../icons/29.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-moveToFolderAgain { background-image: url("../icons/inbox.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-calendar-convert-menu { background-image: url("../icons/332.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
           #mailContext-calendar-convert-event-menuitem { background-image: url("../icons/geplanter-termin.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-calendar-convert-task-menuitem { background-image: url("../icons/newtask-small.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
    #mailContext-delete { background-image: url("../icons/35.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-ignoreThread { background-image: url("../icons/forbidden.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-ignoreSubthread { background-image: url("../icons/forbidden.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-watchThread { background-image: url("../icons/View-2.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-saveAs { background-image: url("../icons/160.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-print { background-image: url("../icons/Print.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }

Display More

Wie kann das Problem gelöst werden?

Grisu2099 · August 4, 2024 at 2:25 PM

Quote from bananovic

Wie kann das Problem gelöst werden?

Indem du die Label per CSS nach rechts verschiebst...

beispielhaft für das erstes Icon oben:

CSS

#mailContext-openNewTab {
	background-image: url("../icons/43.png") no-repeat 7px 4px !important;
	}      
#mailContext-openNewTab > label {
	padding-left: 26px !important;
	}

ggbsde · August 4, 2024 at 3:31 PM

Quote from bananovic

alle Einträge der Menüs und Kontextmenüs mit Icons versehen

Ach du große Güte...

Um nun nicht jedes label einzeln verschieben zu müssen hilft vielleicht auch

CSS

#messageMenuPopup label {
 padding-left: 26px !important;
}

für jedes Menü.

Alternativ geht vielleicht auch, die background-position-x für die icons nach links zu verschieben.

bananovic · August 4, 2024 at 3:33 PM

Danke, das funktioniert. Aber kann man das nicht mit einem allgemeinen Code für alle Menü- und Untermenüeinträge lösen, gewissermaßen vor der Klammer? Dann würde ich mir viel Arbeit ersparen.

ggbsde · August 4, 2024 at 3:42 PM

Das wäre dann

CSS

#mail-menubar label {
 padding-left: 26px !important;
}

aber je höher man in der Hierarchie startet desto größer ist die Wahrscheinlichkeit unerwünschter Effekte.

bananovic · August 4, 2024 at 3:44 PM

Quote from ggbsde

Um nun nicht jedes label einzeln verschieben zu müssen hilft vielleicht auch

Dieser Code hat nicht funktioniert, ist aber das, was ich mir vorstelle. Das Verschieben des Icons nach links geht nicht, weil der Platz fehlt.

bananovic · August 4, 2024 at 3:51 PM

Danke ggbsde. Auch der letzte Code zeigt bei den betroffenen Kontextmenüs keine Wirkung. Jetzt sind aber in den HAuptmenüs die Abstände zwischen Icon und Menütext riesig.

ggbsde · August 4, 2024 at 3:56 PM

Du bist nicht an den Wert '26' gebunden. Pass das an wie du es brauchst.

Bei welche Menüeinträgen funktioniert es denn nicht. Ich kann keine finden.

Grisu2099 · August 4, 2024 at 4:15 PM

Probiere mal dieses Script aus:

Code

setTimeout(function() {
    var ucjsAC = {
        init : function () {
            const menu = document.querySelectorAll('menu');
            menu.forEach(query => query.classList.add('menu-iconic'));
            const menuitem = document.querySelectorAll('menuitem');
            menuitem.forEach(query => query.classList.add('menuitem-iconic'));
        },
    }
ucjsAC.init();
}, 1000);

Display More

Das verschiebt pauschal die Label nach rechts. Wirkt allerdings nicht im PopUp bei Rechtsklick auf eine Mail...

Edit: Oder benutzt du das schon? Dann wirst du dort doch händisch verschieben müssen...

bananovic · August 4, 2024 at 4:16 PM

An dem Wert 26 liegt es nicht. Der Code zeigt bei den Kontextmenüs keine Wirkung.

bananovic · August 4, 2024 at 4:25 PM

Quote from Grisu2099

Das verschiebt pauschal die Label nach rechts. Wirkt allerdings nicht im PopUp bei Rechtsklick auf eine Mail...

So ist es. Bei den Hauptmenüs erhalte ich die gleichen Abstände wie ich sie schon habe. Bei den problematischen Kontextmenüs tut sich nichts.

Grisu2099 · August 4, 2024 at 4:28 PM

Mir ist da bis jetzt nur das Kontext-Menü bei Rechtsklick auf eine einzelne Mail aufgefallen... Sonst noch wo?

bananovic · August 4, 2024 at 4:42 PM

In der Threadpane, wenn ich mit rechts auf eine einzelne Mail klicke, und in der Messagepane. In der Folderpane funktioniert alles.

Grisu2099 · August 4, 2024 at 4:45 PM

Teste mal folgendes CSS:

CSS

#mailContext menu label,
#mailContext menuitem label {
	padding-left: 26px !important;
	}

bananovic · August 4, 2024 at 5:13 PM

Danke Grisu2099, dieser Code, eingetragen vor dem gesamten Kontextmenü-Code, funktioniert, so wie ich es mir vorgestellt habe. Allerdings sind jetzt bei einigen Untermenüs die Abstände zwischen Icon und Text sehr groß, und zwar bei: Verschieben in, Kopieren in, Schlagwörter, Markieren, Themen sowie bei dem letzten Kontextmenü-Eintrag "Drucken NG".

Ferner habe ich festgestellt, daß die Icons den Text überlagern, wenn ich im Verfassen-Fenster in der Zeile An, Kopie und Blindkopie rechts klicke. Ich dachte, daß das von den Kontextmenü-Einträgen im Hauptfenster gesteuert wird. Ist aber nicht so.

Grisu2099 · August 4, 2024 at 6:03 PM

Quote from bananovic

sowie bei dem letzten Kontextmenü-Eintrag "Drucken NG".

Da habe ich nur "Drucken..." (und der paßt...)

Quote from bananovic

daß die Icons den Text überlagern, wenn ich im Verfassen-Fenster in der Zeile An, Kopie und Blindkopie rechts klicke.

Kann ich nicht bestätigen.

Quote from bananovic

Allerdings sind jetzt bei einigen Untermenüs die Abstände zwischen Icon und Text sehr groß, und zwar bei: Verschieben in, Kopieren in, Schlagwörter, Markieren, Themen

Kann ich bestätigen...

Dann entweder doch jeden Eintrag einzeln ändern, oder die betreffenden Menüs im obigen CSS als Ausnahme definieren.

dharkness21 · August 4, 2024 at 6:20 PM

Quote from bananovic

Allerdings sind jetzt bei einigen Untermenüs die Abstände zwischen Icon und Text sehr groß, und zwar bei: Verschieben in, Kopieren in, Schlagwörter, Markieren, Themen

Teste bitte die ↓ Variante.

CSS

#mailContext menu label,
#mailContext menuitem label {
    padding-left: 26px !important;
}
#mailContext menu menupopup menu label,
#mailContext menu menupopup menuitem label,
#printingtoolsng_cleidigh_kokkini_net-menuitem-_msgCtxMenu_TopId .menu-iconic-text {
    padding-left: 0px !important;
}

Grisu2099 · August 4, 2024 at 6:37 PM

Quote from dharkness21

Teste bitte die ↓ Variante.

Damit passen dann zwar die von bananovic genannten Menüs, aber in den anderen Untermenüs (z.B. bei "Öffnen") stimmt es wieder nicht mehr...

bananovic · August 4, 2024 at 6:57 PM

Danke dharkness21, mit diesem Code sind nun die sehr großen Abstände zwischen Icon und Text bei Verschieben in, Kopieren in, Schlagwörter, Markieren, Themen sowie bei dem letzten Kontextmenü-Eintrag "Drucken NG" auf normales Maß geschrumpft. Dafür überdecken jetzt wieder die Icons den Text in den Untermenüs der Kontextmenü-Einträge Öffnen, Antworten, Weiterleiten und umleiten sowie Organisator in der Threadpane und in der Messagepane.

bananovic · August 5, 2024 at 2:49 PM

Ich habe das Problem jetzt gelöst. Den Code aus Post 17 Zeilen 5-9 konnte ich so allgemein nicht verwenden. Ich habe statt dessen die sehr großen Abstände nur für die betroffenen Kontextmenü-Einträge (Verschieben in, Kopieren in, Schlagwörter, Markieren, Themen) verringert. Dadurch blieben die Abstände in den anderen Untermenü-Einträgen unverändert auf normalem Maß.

Den Code in Zeilen 1-4 habe ich mit Selektoren für andere Kontextmenüs erweitert, insbesondere auch für den Kalender. Dort trat ebenfalls das Überlappungsproblem auf.

Hier zusammengefaßt der Code in meiner Menu-Icons.css:

CSS

/* ABSTÄNDE ICON - TEXT IN EINIGEN KONTEXTMENÜS IN TB 128 */
    
    #mailContext menu label,
    #mailContext menuitem label,
    #textbox-contextmenu menu label,
    #textbox-contextmenu menuitem label,
    #list-calendars-context-menu menu label,
    #list-calendars-context-menu menuitem label,
    #taskitem-context-menu menu label,
    #taskitem-context-menu menuitem label,
    #calendar-view-context-menu menu label,
    #calendar-view-context-menu menuitem label,
    #calendar-item-context-menu menu label,
    #calendar-item-context-menu menuitem label {
	      padding-left: 24px !important; }
	      
	  #mailContext-moveMenu menupopup menu label,
    #mailContext-moveMenu menupopup menuitem label,
    #mailContext-copyMenu menupopup menu label,
    #mailContext-copyMenu menupopup menuitem label,
    #mailContext-tags menupopup menu label,
    #mailContext-tags menupopup menuitem label,
    #mailContext-mark menupopup menu label,
    #mailContext-mark menupopup menuitem label,
    #mailContext-threads menupopup menu label,
    #mailContext-threads menupopup menuitem label,
    #printingtoolsng_cleidigh_kokkini_net-menuitem-_msgCtxMenu_TopId .menu-iconic-text {
        padding-left: 0px !important;}

Display More

Icons in Kontxtmenü überlagern Menütext

Community-Bot August 6, 2025 at 4:30 AM

Thunderbird 153.0.3 veröffentlicht

Thunderbird 153.0.3 ESR veröffentlicht

Thunderbird 140.13.0 ESR veröffentlicht