Symbole in den Kontextmenüs [ Update ]

    Zitat von Boersenfeger

    Wird aber nicht angezeigt...

    Teste bitte mal:

    2002Andreas: Danke! :)

    Mit diesem Code

    sieht es jetzt so aus:

    Den richtigen Abstand kriege ich nicht hin. Der Wert bei margin-top bringt offenbar nix.. :(

    Zitat von 2002Andreas

    Und ändere mal den 2ten Wert in Zeile 11.

    PS: da passen aber einige Abstände nicht bei dir :/

    Dann geht nur das Icon runter nicht aber der Eintrag und ja, auch die anderen Einträge haben nicht mehr den korrekten Abstand... :huh:

    Angehängt der ganze Code, weil zu groß fürs Forum (ohne Änderung in Zeile 6047)

    Bin erst mal unterwegs...

    Es gibt etwas Neues von mir.

    Ich habe den CSS-Code der Sympole.css nun in ein JavaScript "überführt", da bei mir nur

    absolute Pfadangaben funktionierten.

    Z.B. sahen die Einträge so aus

    CSS
        /* Datei  */
    #file-menu::before { background: url("file:///C:/Users/Miras/AppData/Roaming/Mozilla/Firefox/Profiles/iff60u96.default-release/chrome/icons/mail-inbox-all.svg")!important; }

    Nun wird daraus:

    JavaScript
         var css =`

     /* Datei  */
     #file-menu::before { background: url("${ProfilePath}/mail-inbox-all.svg") !important; }
   `;

    Mit dem JavaScript wird es nun viel einfacher, dieses auch in einem anderen Profil zu nutzen!

    Es müssen lediglich die Symbole in den entsprechenden Ordner kopiert werden.

    Hier also die neue Version:

    icons.zip

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (6. Januar 2023 um 08:26)

    • Hilfreichste Antwort

    Wenn es funktioniert, ist alles gut, aber:

    Zitat von Mira_Belle

    Ich habe den CSS-Code der Sympole.css nun in ein JavaScript "überführt", da bei mir nur absolute Pfadangaben funktionierten.

    Sympole.css? 8o

    Relative Pfade sind möglich, dann aber ohne file:///, siehe in url() - CSS (MDN). Man sieht übrigens auch, dass man sogar die Anführungszeichen weglassen darf (was ich nicht mag).


    Lass mich das mal anhand Deines Beispiels veranschaulichen:

    Zitat von Mira_Belle

    url("file:///C:/Users/Miras/AppData/Roaming/Mozilla/Firefox/Profiles/iff60u96.default-release/chrome/icons/mail-inbox-all.svg")

    Du hast im Chrome-Verzeichnis also einen Unterordner icons, aber natürlich auch die userChrome.css. Ich weiß es nicht, aber lass mich annehmen, dass Du Stile, die Du in der userChrome.css importierst, in einem Unterordner CSS ablegst, darunter eine contextMenu.css:

    Code
    chrome
  |
  |-CSS
  |  |-contextMenu.css
  |
  |-icons
  |  |-mail-inbox.all.svg
  |
  |-userChrome.css

    Dann hättest Du in contextMenu.css das einzutragen:

    CSS
    /* Datei  */
#file-menu::before { background: url("../icons/mail-inbox-all.svg") !important; }

    Der Pfad ist also relativ zu dieser Stildatei anzugeben! Solltest Du unter CSS weitere Unterordner haben, dann wäre in einer darin liegenden Stildatei ein weiteres ../ vorn anzufügen.

    Würdest Du die Regel direkt in die userChrome.css einfügen, wäre

    CSS
    #file-menu::before { background: url("icons/mail-inbox-all.svg") !important; }

/* oder: */

#file-menu::before { background: url("./icons/mail-inbox-all.svg") !important; }

    zu schreiben. Letzteres soll in einigen Linux-Versionen besser funktionieren oder geschieht dort aus Gewohnheit.

    Nebenbemerkung: Wenn ich nur ein Hintergrundbild einfüge oder ändere, dann bevorzuge ich, die dafür vorgesehene Eigenschaft background-image zu nutzen, denn mit background werden implizit alle nicht aufgeführten Eigenschaften auf ihren Initialwert gesetzt, was ich vielleicht nicht will.

    :/

    Der Pfad zum Userprofil schaut wie folgt aus.

    C:/Users/Miras/AppData/Roaming/Mozilla/Firefox/Profiles/iff60u96.default-release

    Dort gibt es den Ordner chrome

    In diesem liegen direkt alle *.css und *.us.js :!:

    Die Symbole sind alle in dem Ordner icons

    Der komplette Pfad: C:/Users/Miras/AppData/Roaming/Mozilla/Firefox/Profiles/iff60u96.default-release/chrome/icons/

    Wenn ich die Pfade so angebe, wie Du vorgeschlagen hast, funktioniert es bei mir nicht!

    Also wenn ich aus

    CSS
        /* Datei  */
    #file-menu::before { background: url("file:///C:/Users/Miras/AppData/Roaming/Mozilla/Firefox/Profiles/iff60u96.default-release/chrome/icons/mail-inbox-all.svg")!important; }
    CSS
        /* Datei  */
    #file-menu::before { background: url("./icons/mail-inbox-all.svg")!important; }

    funktioniert es nicht.

    Ich teste!

    AH :!:

    Neuen Ordner css angelegt.

    Die Symbole.css dorthin verschoben.

    Den import in der userChrome.css von @import url("Symbole.css"); in @import url("./css/Symbole.css"); geändert

    C:/Users/Miras/AppData/Roaming/Mozilla/Firefox/Profiles/iff60u96.default-release/chrome/css/

    In der Symbole.css testweise einige Pfade geändert!

    Z.B. von ...

    ... zu ...

    Funktioniert :thumbup:

    Danke.

    Mit <3lichem Gruß

    Mira

    2 Mal editiert, zuletzt von Mira_Belle (7. Januar 2023 um 14:36) aus folgendem Grund: Ein Beitrag von Mira_Belle mit diesem Beitrag zusammengefügt. Fehlerkorrektur

    Zitat von Mira_Belle

    Wenn ich die Pfade so angebe, wie Du vorgeschlagen hast, funktioniert es bei mir nicht!

    Was mich wundert. Entsprechend Deiner Beschreibung hätte das

    CSS
        /* Datei  */
    #file-menu::before { background: url("./icons/mail-inbox-all.svg")!important; }

    funktionieren müssen. Hmmm, mysteriös.

  • Mira_Belle 8. Januar 2023 um 21:02

    Hat einen Beitrag als hilfreichste Antwort ausgewählt.

    Hallo ihr lieben, es gibt mal wieder was Neues.

    Ich habe hier und da ein paar Symbole ersetzt und ein neues Eingefügt!

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

    1.

    oder

    2.

    In jedem Fall werden natürlich auch die passenden Symbole gebrauch. ;)

    icons.zip

    Mit <3lichem Gruß

    Mira

    Zitat von 2002Andreas

    Wo wäre der Vorteil mit einem Skript?

    Nun ein kleiner wäre, dass der Pfad zu allen Symbolen einfacher zu ändern ist.

    Auch lassen sich, wenn man denn will, weitere gemeinsame Eigenschaften zu Variablen zusammenfassen.

    Farben, Schrift, Schriftgröße, usw.

    Würde dann aber zu einem Monster mutieren.

    Aber jetzt Firefox nur wegen diesem Javascript Scripttauglich zu machen?

    Wessen Firefox kein Javascript unterstützt, sollte besser mit CSS arbeiten.

    Mit <3lichem Gruß

    Mira

    Zitat von Mira_Belle

    dass der Pfad zu allen Symbolen einfacher zu ändern ist.

    :/

    Im Skript:

    /* Neuer Tab */

    #appMenu-new-tab-button2 { list-style-image: url("${ProfilePath}/new-window.svg"); }

    Per CSS:

    #appMenu-new-tab-button2 { list-style-image:url("..//Icons/new-window.svg") !important; }

    Der Aufwand wäre der gleiche.

    Geändert werden müsste jeweils:

    new-window.svg

    Im Script:

    let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));

    Per CSS für jeden Eintrag separat:

        #context-savepage { background-image: url("../icons/save.svg"); }

        #context-pocket { background-image: url("../icons/pocket-outline.svg"); }

        #context-selectall { background-image: url("../icons/select-all-on.svg"); }

        #context-take-screenshot { background-image: url("../icons/screenshot.svg"); }

        #context-viewsource { background-image: url("../icons/document-search.svg"); }

        #context-inspect-a11y { background-image: url("../icons/tool-accessibility.svg"); }

        #context-inspect { background-image: url("../icons/command-pick.svg"); }

        #context-copy { background-image: url("../icons/edit-copy.svg"); }

        #context-searchselect { background-image: url("../icons/find.svg"); }

        #context-viewpartialsource-selection { background-image: url("../icons/document-search.svg"); }

        #context-openlinkincurrent { background-image: url("../icons/link-square.svg"); }

        #context-openlinkintab { background-image: url("../icons/new-window.svg"); }

        #context-openlink { background-image: url("../icons/popup.svg"); }

        #context-openlinkprivate { background-image: url("../icons/privateBrowsing.svg"); }

        #context-bookmarklink { background-image: url("chrome://browser/skin/save.svg"); }

        #context-savelink { background-image: url("../icons/image-add.svg"); }

        #context-print-selection { background-image: url("../icons/printer.svg"); }

        #context-savelinktopocket { background-image: url("../icons/image.svg"); }

        #context-copylink { background-image: url("../icons/link.svg"); }

        #context-reloadimage { background-image: url("../icons/reload_2.svg"); }

        #context-viewimage { background-image: url("../icons/image-add.svg"); }

        #context-saveimage { background-image: url("../icons/image.svg"); }

        #context-copyimage-contents { background-image: url("../icons/image-copy.svg"); }

        #context-copyimage { background-image: url("../icons/resize-image.svg"); }

        #context-sendimage { background-image: url("../icons/link.svg"); }

        #context-setDesktopBackground { background-image: url("../icons/resize-image.svg"); }


    Sehe ich als kleinen Vorteil, und da ich eh Scripte benutze, ...

    Aber kann ja jede(r) machen wie er/sie will,

    und für mich ist diese Diskussion unnütz, da es ja jede(r) selber entscheiden kann,

    wie er/sie es denn umsetzen möchte, wenn er/sie Symbole denn haben möchte.

    Außerdem finde ich es gut, dass es zwei Alternativen gibt.

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (26. Januar 2023 um 15:51)

    Zitat von Mira_Belle

    Per CSS für jeden Eintrag separat:

    #context-savepage { background-image: url("../icons/save.svg"); }

    #context-pocket { background-image: url("../icons/pocket-outline.svg"); }

    #context-selectall { background-image: url("../icons/select-all-on.svg"); }

    Und im Skript sieht es doch nicht anders aus :/

    Jeder Eintrag hat ein eigenes Icon.

    Und das ist dann in beiden Dateien so.

    Zitat von Mira_Belle

    Was hat das mit den Pfaden zu tun?

    Zitat von Mira_Belle

    dass der Pfad zu allen Symbolen einfacher zu ändern ist.

    Und das ist eben nicht so.


    Zitat von Mira_Belle

    sonst ..... grrrr.

    Ich hatte nur gefragt, wo genau der Vorteil von einem Skript ist :/

    Denn wenn ich ab Zeile 16 - 640 den Inhalt von deinem Skript in eine CSS Datei kopieren, dann habe ich das gleiche Ergebnis.

    Ergo sehe ich keinen Vorteil durch das Skript.

    Zeile 16 -640 des Scripts sind nahe zu identisch zu dem CSS.

    Du müsstest halt nur url("${ProfilePath}/*svg")

    für jedes einzelne Symbol in z.B. url("../icons/*.svg") ändern.

    Und Du hast ja recht, wenn man nur einzelne Symbole austauschen und/oder testen will,

    ist der Änderungsaufwand bei beiden Varianten gleich.

    Ich teste aber hin und wieder den Austausch fast aller Symbole,

    und da ist es einfacher mit dem Script, da ich ja nur die Variable

    und somit den Pfad zu allen zu testeten Symbolen, ändern muss.

    Mit <3lichem Gruß

    Mira

    Zitat von 2002Andreas

    Ich hatte nur gefragt, wo genau der Vorteil von einem Skript ist :/

    ....

    Ergo sehe ich keinen Vorteil durch das Skript.

    In dem Zusammenhang, eine Frage .

    Selber werfe ich alles was in CSS gelöst werden kann, aus den Skripten die ich benutze raus .

    V.a. deshalb, weil ich als kompletter Laie CSS viel einfacher und flexibler manipulieren kann .

    Allein die Skript Syntax mit den ganzen Klammern und Satzzeichen kräuselt mir schon die Fussnägel . ;)

    Aber, gibt es im Sinne von Browser-Leistung einen Vorteil/Nachteil zwischen (CSS bezogenen) Skripteinträgen versus CSS - falls sich das so pauschal überhaupt sagen lässt ?