Ordnersymbol (Standardicon) in Lesezeichenleiste etc. ändern

  • Firefox-Version
    91.6.0 esr
    Betriebssystem
    win10 21h2

    Hallo alle.

    Ich wollte das Standardsymbol für die Ordner austauschen und einfärben.


    Habe hier im Forum gesucht und auch etwas gefunden, ist aber nicht ganz zielführend.

    Hier das CSS:

    Im ersten Abschnitt habe ich zum Testen eine Änderung eingebracht, einen Verweis auf eine SVG-Grafik.

    Insgesamt funktioniert das schon, aber nicht selektiv genug.

    Alle Ordner werden jetzt anders dargestellt, allerdings auch die "Hauptordner"-Symbole der Sidebar, die nicht geändert werden sollten.

    Ich wollte ja nur die "Unterordner" ändern, die das einfache Standardsymbol haben. Geht das überhaupt, gibt es einen Selektor dafür?

    Der Inspektor hilft mir da nicht weiter...

    Und wenn ich die SVG-Grafik verwende, kann ich diese nicht mehr einfärben, obwohl es eigentlich gehen sollte.

    Was noch nicht stimmt, hier im Bild markiert (graues Symbol und Hauptordner der Sidebar):

    Irgendeine Idee?

    Danke für die Hilfe! :)

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint

  • Zur hilfreichsten Antwort springen
  • Ich wollte ja nur die "Unterordner" ändern, die das einfache Standardsymbol haben.

    Meinst du das so?

    Wenn ja, dann teste bitte mal:

    CSS
    menupopup .bookmark-item[container="true"] {
       list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII=') !important;
    }

    Oder mit einer .svg Grafik:

    CSS
    /* Lesezeichen - Ordnericon stehend gelb */
    @-moz-document url-prefix(chrome://browser/content/browser.xhtml) {
        
    menupopup .bookmark-item[container="true"] {
        list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !important;
        fill: red !important;
    }
    }
  • Hallo Andreas!

    Nee, das ist so nicht gemeint.

    Es sind zwei Probleme.

    1. "Unterordner" nur der der Sidebar, also der Leiste links, in der die Lesezeichen gelistet sind.

    Aus meinem Code oben ist dafür der Abschnitt mit "/* Lesezeichen Sidebar ..." zuständig.

    Dieser verändert alle Ordnersymbole, auch die Symbole für alle vorgegebenen (ich nenne es mal so) Hauptordner wie "Lesezeichen-Symbolleiste", "Lesezeichen-Menü", "...", "Weitere Lesezeichen", was ich nicht wollte.

    Im Bild oben die ovale Markierung.

    Alle Ordner haben hier den stehenden gelben Ordner.

    2. Das nicht mögliche Einfärben einer eigenen SVG-Grafik, die in einem Verzeichnis auf Platte liegt.

    Ich kann die Grafik selbst natürlich farbig vorgeben, aber warum kann ich sie nicht per CSS einfärben?

    Es ist die Standard-Grafik aus FF78, die intern keine Farbvorgaben hat.

    Und eigentlich wie bei der Einbindung per Resourcen-Link "url("chrome://browser/skin/..." verwendet wird, wo sie ja gefärbt werden kann.

    Es geht auch nicht im Inspektor, die CSS-Vorgabe wird ignoriert.

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint

  • Es sind zwei Probleme.

    Ich lasse mich gerne eines Besseren belehren, aber:

    Zu 1:

    Einzelne Ordner lassen sich in der Sidebar und Bibliothek nicht ansprechen.

    Wenn dann nur pauschal, da sie alle mit treechildren bezeichnet sind.

    Zu 2 kann ich dir leider nichts sagen, gedulde dich bitte, evtl. fällt einem anderen User ja etwas dazu ein.

  • In irgendeiner Version hat Mozilla Grafiken gegen solche ausgetauscht, die man nicht mehr verändern kann. Ich glaube mit Einführung des Proton-Designs. Dafür muss man die Grafiken austauschen. Welche Grafiken von Mozilla ausgetauscht wurden, kann ich leider nicht sagen.

    Ü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, LibreOffice Onlinehilfe, WordPress

  • Mit Welchem Code hast du denn versucht, die .svg-Datei einzufärben?

    Dieser Code Ändert die Farben der Standardicons.

    Die Variablen sind unter :root{} definiert.

    Funktioniert immer noch für die vorgegebenen Standardsymbole.

    Die SVG-Grafik, die ich oben verwende, lässt sich in FF78 damit auch einfärben.

    Hier mal der Code-Inhalt der SVG-Grafik:

    Code
    <!-- This Source Code Form is subject to the terms of the Mozilla Public
       - License, v. 2.0. If a copy of the MPL was not distributed with this
       - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
    <svg width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
      <path d="M14.5 3H6.914a.5.5 0 0 1-.354-.146L5.146 1.439A1.491 1.491 0 0 0 4.086 1H1.5A1.5 1.5 0 0 0 0 2.5v11A1.5 1.5 0 0 0 1.5 15h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 3zm.5 10.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V6h14zM1 5V2.5a.5.5 0 0 1 .5-.5h2.586a.5.5 0 0 1 .354.146l1.414 1.415A1.491 1.491 0 0 0 6.914 4H14.5a.5.5 0 0 1 .5.5V5z"/>
      <path d="M15 13.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V6h14z" fill-opacity=".2"/>
      <path d="M1 5V2.5a.5.5 0 0 1 .5-.5h2.586a.5.5 0 0 1 .354.146l1.414 1.415A1.491 1.491 0 0 0 6.914 4H14.5a.5.5 0 0 1 .5.5V5z" fill-opacity=".1"/>
      <path d="M15 13.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V13h14z" fill-opacity=".05"/>
    </svg>

    fill="context-fill" bedeutet, dass die externe Farbvorgabe verwendet wird, die per fill: im CSS angegeben wird.

    Ändere ich das in der Grafik selbst z.B. in fill="red" wird die Grafik rot.

    Wenn die Grafik per url: eingebunden wird (wie oben), geht das Zuordnen einer Farbe per CSS fill: red !important; einfach nicht mehr.

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint

  • Versuch die Bearbeitung mal auf dieser Webseite: .svg-Grafiken bearbeiten

    Darum geht es nicht.

    Wie einfach man die einfärben kann, habe ich doch oben schon gezeigt.

    Der Unterschied ist die Art der Einbindung im CSS.

    Wird die Grafik per url("./icons/folder.svg") eingebunden, kann sie nicht mehr im CSS per fill verändert werden.

    Greift man auf die gleiche Grafik per url("chrome://global/skin/folder.svg") zu, funktioniert es per fill.

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint

    • Hilfreichste Antwort

    Falls ich dich richtig verstanden habe, sollte der schon seit ewigen Zeiten funktionierende Code von Aris das gewünschte Ergebnis bringen:

    'zip'-Datei mit den benötigten Bildern und dem css-Code (ist eine etwas ältere Version):

    Colorized_BM_Icons.zip

    Wenn du keine weiteren Anpassungen an den Quelldateien vornehmen willst, musst die Ordnerstruktur für die neuen Dateien in deinem 'chrome'-Verzeichnis übernehmen. Also beide Verzeichnisse aus der 'zip'-Datei in deinen 'chrome'-Ordner entpacken.

    Die Verzeichnisstruktur sollte dann so aussehen:

    Dann noch folgende Zeile in deine 'userChrome.css' einfügen und zwar in die erste Zeile!

    CSS: userChrome.css
    @import url(./css/bookmark_icons_colorized.css);

    Sieht dann so aus:

  • Mal noch etwas anderes, was eventuell auch Probleme bereiten könnte: Im Code des Eingangsbeitrags steht noch places.xul - das muss places.xhtml heißen. In Beitrag 9 stehen noch bookmarksPanel.xhtml und history-panel.xhtml. Beide gibt es nicht mehr, die erste ist jetzt bookmarksSidebar.xhtml und die zweite historySidebar.xhtml.

    Ü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, LibreOffice Onlinehilfe, WordPress

  • Eine anderweitige Lösung, die ich nutze, aus der CSS-Sammlung von Aris:

    GitHub - Aris-t2/CustomCSSforFx: Custom CSS tweaks for Firefox 57+

    Daraus.

    bookmark_icons_colorized

    mit den entsprechenden Bildern:

    Eigene Bilder nach Belieben.

    Wenn du weinen möchtest, bist du falsch hier. Hier gibt es nur Lösungen!
    Oh Herr, wirf Hirn, oder Steine - Hauptsache, du triffst endlich.
    Zu viele Goofies und Dulleks vom Dienst. Schlabokka!

  • Da hast du wohl recht, ich nahm an, dass dein verlinktes ZIP nicht darauf basiert. Ich verlinke gerne auf die originalen Quellen, was nichts über die jeweilige Qualität sagen soll. Damit wäre zusätzlich sichergestellt, dass man sich auch dort die jeweils aktuelle Version laden kann, die auch Fehlerbereinigung enthält. Nichts für ungut.

    Wenn du weinen möchtest, bist du falsch hier. Hier gibt es nur Lösungen!
    Oh Herr, wirf Hirn, oder Steine - Hauptsache, du triffst endlich.
    Zu viele Goofies und Dulleks vom Dienst. Schlabokka!

  • Mal noch etwas anderes, was eventuell auch Probleme bereiten könnte: Im Code des Eingangsbeitrags steht noch places.xul - das muss places.xhtml heißen. In Beitrag 9 stehen noch bookmarksPanel.xhtml und history-panel.xhtml. Beide gibt es nicht mehr, die erste ist jetzt bookmarksSidebar.xhtml und die zweite historySidebar.xhtml.

    In der Tat, es war der erste Versuch mit einem hier im Forum gefundenen älteren Schnipsel.

    Danke an alle für die Tipps, ich werde das morgen mal in Ruhe ausprobieren.

    Ich würdige durchaus Aris Arbeit, aber mir ist das etwas zu viel Code, wenn ich das einfach alles übernehme.

    Ich benötige das auch nicht zwingend, sondern nur zur verbesserten Lesbarkeit.

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint

  • Ich verlinke gerne auf die originalen Quellen

    Ok, da hast du recht, den Original-Link hätte ich noch mitangegeben können. Da ich aber nicht weiß, wie der Wissensstand des TE ist, habe ich es schon "mundgerecht" zusammengestellt und extra nochmal getestet. Ich habe dafür ziemlich alte Dateien (aus 'custom_css_for_fx_v3.1.8') von mir verwendet, die ja immer noch fehlerfrei funktionieren.


    Ich würdige durchaus Aris Arbeit, aber mir ist das etwas zu viel Code, wenn ich das einfach alles übernehme.

    Na ja den gesamten Code von Aris brauchst du ja nicht übernehmen, sondern nur die beiden Verzeichnisse aus der zip-Datei entpacken und eine! Zeile in deine 'userChrome.css' schreiben. :/

    Einmal editiert, zuletzt von BrokenHeart (2. März 2022 um 19:56) aus folgendem Grund: Ein Beitrag von BrokenHeart mit diesem Beitrag zusammengefügt.

  • Na klar, ich kürze das dann gerne aber noch weiter ein.

    Ich weiss übrigens, wie er das Problem gelöst hat: er selektiert über den "Label", der da heisst ([label="Bookmarks Toolbar"],[label="Lesezeichen-Symbolleiste"]).

    Damit kann man gezielt die Elemente ansprechen.

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint