Einträge im Tab Kontextmenü mit Icon versehen

Du benötigst Hilfe bezüglich Firefox? Bitte stelle deine Frage im öffentlichen Bereich des Forums und nicht per Konversation an wahllos ausgesuchte Benutzer. Wähle dazu einen passenden Forenbereich, zum Beispiel „Probleme auf Websites“ oder „Erweiterungen und Themes“ und klicke dann rechts oben auf die Schaltfläche „Neues Thema“.
  • Firefox-Version
    83
    Betriebssystem
    Win10

    Ich habe mich zwar schon durchs Forum gewühlt aber bin nicht wirklich fündig geworden.

    Möchte wissen ob und wenn ja wie es möglich ist das Tab Kontextmenü (Rechtsklick auf Tab) mit einem Icon (möglichst an die freie Stelle vor dem Text) zu versehen

    Also zb für "Tab neu laden" ein Icon (evtl. Base64 Code) davor zu machen.

    Das würde mir schon reichen, dann versuche ich danach den Code für die anderen Einträge selbst heraus zu finden.

    Danke schon mal im Voraus. ;)

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden
    ;)

  • Ja, das geht.

    CSS
    #context_reloadTab {
        appearance: none !important;
        background: url("../Icons/refresh.png") no-repeat 5px 3px !important;
        }
    #context_reloadTab:hover {
        appearance: none !important;
        background: green url("../Icons/refresh.png") no-repeat 5px 3px !important;
        }

    Das Icon habe ich im Unterordner "Icons" im Chrome-Ordner liegen.

  • Hier findest du alle möglichen Kontextmenüeinträge in einem Code, auch die für die Tabs, ohne und mit Hover:


    https://github.com/Endor8/CSS/…ntextmenu-Rechtsklick.css


    Endor pflegt den Code.


    Im allgemeinen geht das so wie oben grisu2099 angegeben hat, er hat jedoch eigene Pfade statt Base64-Grafiken verwendet.


    Der generelle Thread dazu ist:


    Hintergrundfarbe der Menüs/Lesezeichen/Kontextmenü - mit Hover-Effekt

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, WordPress und Facebook

  • Danke, also beim hovern wird es zwar grün (was ich allerdings nicht brauche aber erstmal so gelassen habe), aber das Icon wird nicht geladen

    Habe es auch im Ordner "icon" im Ordner chrome und den Pfad entsprechend angepasst in

    url("../icon/reload.png")

    und dieses Icon verwendet

    Was mache ich falsch? :/

    Bilder

    • reload.png

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden
    ;)

  • aber das Icon wird nicht geladen

    Bei der Verwendung von Pfaden ist es oft besser, den vollständigen Pfad anzugeben, mit vorgesetztem file:///. Mit relativen Pfaden klappt es öfter nicht.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, WordPress und Facebook

  • Ja, er heißt "icon"

    Aber mit vollständiger Pfadangabe klappt es. Allerdings gefällt mir das noch nicht so gut, da das Icon auch etwas abgeschnitten ist. Mal gucken was ich da noch basteln muss.

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden
    ;)

  • Mal gucken was ich da noch basteln muss.

    Teste bitte mal:


    CSS
    #context_reloadTab {
        appearance: none !important;
        background: url("chrome://browser/skin/reload.svg") no-repeat 5px 3px !important;
        }
    #context_reloadTab:hover {
        appearance: none !important;
        background: lightgrey url("chrome://browser/skin/reload.svg") no-repeat 5px 3px !important;
        }


    Die Farbe für hover musst du dir dann anpassen.

  • Danke, gefällt mir schon besser. Ist bei mir aber auch abgeschnitten.

    mit 1px geht es aber gerade so.

    Schade dass der Original Hover Effekt wohl flöten geht und man ihn extra setzen muss. Denn er ist grundsätzlich dünner als im Original. Die Farbe habe ich mit #91c9f7 angespasst.

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden
    ;)

  • Ist bei mir aber auch abgeschnitten.

    Die Angaben 5px und 3px betzeichen die Postion des Symbols (background-position). Du kannst damit etwas experimentieren. Der erste Wert bezeichnet die horizontale Position, der zweite Wert die vertikale Position. Du kannst auch mirt Schlüsselwörtern arbeiten:


    horizontal: left, center, right

    vertikal: top, center, bottom

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, WordPress und Facebook

  • Schade dass der Original Hover Effekt wohl flöten geht und man ihn extra setzen muss.


    Logisch, denn mit appearance: none sagst du ja explizit, dass die native Darstellung keine Anwendung finden soll. Ohne es getestet zu haben, ich habe jetzt nur deinen Code, wie er ist, genommen und so verändert, dass er dieses Problem nicht hat. Finetuning (d.h. vor allem die Positionierung) müsstest du selbst vornehmen, da ich gleich weg bin:


    CSS
    #context_reloadTab::before {
      content: '' !important;
      display: block !important;
      width: 10px !important;
      height: 10px !important;
      background-image: url('chrome://browser/skin/reload.svg') !important;
      background-size: 10px 10px !important;
    }


    PS: Es ist recht sinnlos, in :hover nochmal neu zu definieren, was im regulären Zustand bereits definiert ist. Das erschwert nur die Lesbarkeit des Codes. Ich bin auch weg vom Shorthand für background, weil das alle anderen background-Angaben überschreibt. Ich bevorzuge, explizit nur das zu überschreiben, was man auch überschreiben will.

  • So sind die Regeln bei Endor:


    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, WordPress und Facebook

  • Danke ihr Alle.

    Mir gefällt bisher am besten der Code von Sören wegen der Aussage

    Ich bevorzuge, explizit nur das zu überschreiben, was man auch überschreiben will

    Allerdings scheitere ich gerade am Feintuning 8)

    PS: Sören Hentzschel hast du deinen Code verändert? wenn ich mich nicht täusche war vorhin noch eine Zeile mehr drin

    background-repeat: no-repeat !important;


    Aber ich denke ich mache morgen weiter. Ich hab noch keine Idee wie man den Button zentriert an die freie Stelle bekommt (wahrscheinlich ist sie nur sichtbar frei, aber nicht vom Code her) ohne dass der Text nach rechts verschoben wird. :/

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden
    ;)

  • wie man den Button zentriert an die freie Stelle bekommt

    center center statt wie oben bei Andreas 5px 3px - das zentriert sowohl horizontal als auch vertikal. Background ist eine Sammeleigenschaft von mehreren Teileigenschaften. Zu diesen Teileigenschaften gehört background-position.


    background-repeat: no-repeat !important;

    Die Eigenschaft background ist - im Unterschied zu list-style-image - für den Hintergrund. Das könnte dazu führen, dass das Symbolfläche gekachelt wird, daher der Wert no-repeat (nicht wiederholen, nicht kacheln). Das entspricht der Teileigenschaft background-repeat.


    Hier etwas zum Lesen:


    https://wiki.selfhtml.org/wiki…round#background-position

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, WordPress und Facebook

  • ich hab jetzt doch bissel rumgespielt mit, ändert aber gar nix (außer die Größe ist so okay)

    Der Text "Tab neu laden" ist leider nach rechts gerückt und ich bekomme es absolut nicht hin dass das nicht passiert.?(

    rum probiert mit dem Code (ausgehend von Sörens Code)

    CSS
    #context_reloadTab::before {
      content: '' !important;
      display: block !important;
      width: 15px !important;
      height: 15px !important;
      background-image: url('chrome://browser/skin/reload.svg') !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      background-size: 15px 15px !important;
    }

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden
    ;)

  • ist leider nach rechts gerückt

    Du könntest es so anpassen:



    Oder nur den Text verschieben:


    CSS
    #context_reloadTab > .menu-text{
      margin-left: -12px !important;
    }

    Die Werte musst du für dich evtl. noch etwas anpassen.

  • hast du deinen Code verändert? wenn ich mich nicht täusche war vorhin noch eine Zeile mehr drin

    background-repeat: no-repeat !important;


    Ja, ich hatte die Zeile zunächst auch mit drin stehen, weil sie im vorherigen Code auch vorhanden war und ich das nur umgeschrieben hatte. Da width / height und background-size in meinem Beispiel aber exakt übereinstimmten, gab es so oder so nichts, was sich hätte wiederholen können. Die Zeile war in meinem Code also in jedem Fall überflüssig, darum hatte ich sie wieder entfernt.

  • Wow cool :thumbup:

    Hab die Werte noch etwas angepasst und noch einen Eintrag gemacht wenn mehrere Tabs ausgewählt sind

    Jetzt sieht es meiner Meinung nach perfekt aus.

    Die anderen Anpassungen bekomme ich hoffentlich von alleine hin.

    Vielen lieben Dank

    Trotzdem gerne weitere Anmekungen, wenn es was zu verbessern gibt. Insbesondere, da ich spacemir ausgesucht habe bei mehreren Tabs. Es zeigt zwar das gewünschte Ergebnis, aber ich weiß nicht ob das so trotzdem korrekt und sinnvoll ist.

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden
    ;)

    Einmal editiert, zuletzt von Zitronella ()