Ordnersymbol (Standardicon) in Lesezeichenleiste etc. ändern

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:

/* Lesezeichen - Ordnericon stehend gelb */
@-moz-document url-prefix(chrome://browser/content/browser.xhtml),
url("chrome://browser/content/places/places.xul") {
    .bookmark-item[container="true"]{
        list-style-image: url("./icons/folder.svg") !important;
    }
} 

/* Lesezeichen verwalten - Ordnericon stehend gelb */
@-moz-document url("chrome://browser/content/places/places.xhtml") {
    treechildren::-moz-tree-image(container) {
    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;
    }
    }

/* Lesezeichen Sidebar - Ordnericon stehend gelb */
@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xhtml") {
    treechildren::-moz-tree-image(container) {
    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;
    }

    .menuitem-iconic .folder-icon {
    -moz-context-properties: fill !important;
    fill: yellow !important;
    fill-opacity: 1 !important;
    }

}

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!

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.

Zu 1. habe ich befüchtet

Zu 2. nicht so schlimm

Und trotzdem: vielen Dank für Deine Bemühungen!

Zitat von grisu2099

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.

/* ################################################################## */
/*                       FARBE der ICONS ändern                       */
/* ################################################################## */

/* Lesezeichen Sidebar - Farbe der Standardicons */
@-moz-document url("chrome://browser/content/bookmarks/bookmarksPanel.xhtml"),
    url("chrome://browser/content/history/history-panel.xhtml"),
    url-prefix("chrome://browser/content/places/bookmarksSidebar.xhtml"){
        treechildren::-moz-tree-image(container) {fill:var(--FolderColor) !important;
    }
}

/* Lesezeichen verwalten - Farbe der Standardicons */
@-moz-document url-prefix("chrome://browser/content/places/places.xhtml") {treechildren::-moz-tree-image(container) {
    fill:var(--FolderColor) !important;
    }
}
/* Lesezeichen - Farbe der Standardicons */
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
    .bookmark-item[container="true"] {
    fill:var(--FolderColor) !important;
    }
}

/* Farbe der Weltkugel */
#cookiesChildren::-moz-tree-image(domainCol, leaf),
.alltabs-item > .menu-iconic-left > .menu-iconic-icon,
#page-proxy-favicon:not([src]),
treechildren::-moz-tree-image(title, leaf),
.bookmark-item:not([container]),
#PlacesToolbarItems > toolbarbutton[class="bookmark-item"][scheme="javascript"]:not([src]),
.sidebar-placesTreechildren::-moz-tree-image(leaf){
    fill:var(--WorldColor) !important;
}

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

Hier mal der Code-Inhalt der SVG-Grafik:

<!-- 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.

Zitat von grisu2099

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.

Zitat von milupo

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.

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.