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.
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.
Zu 1. habe ich befüchtet
Zu 2. nicht so schlimm
Und trotzdem: vielen Dank für Deine Bemühungen! 
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.
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!
TREFFER!
Der untere kurze Zusatz reicht (den anderen habe ich nicht probiert).
Wiedergabe-Symbol ist weg, keinerlei merkwürdiges Verhalten des Tabs, Favicon sofort sichtbar.
Und das Lautsprecher-Symbol wir bei Wiedergabe eingeblendet, ist ansprechbar par Click zum Muten und verschwindet auch wieder, wenn kein Audio wiedergegeben wird.
Vielen Dank!
Hallo Andreas, willkommen!
Ich bin auch gerade dabei, das Favicon per "opacity: 1" sofort anzeigen zu lassen.
Aber bei mir wie auch bei Deinem Code wird bisher leider auch noch der Tab mit Lautsprecher verändert, das Favicon liegt sichtbar hinter dem Lautsprecher.
Frage ist also: wie kann zusätzlich nur das Favicon des "activemedia-blocked" Tabs angesprochen werden...
Dieser Zusatz z.B. zeigt alle Favicons an, auch beim Lautsprechersymbol:
.tab-icon-image {
opacity: 1 !important;
}Wie kann man den auf Tabs mit .tab-icon-overlay[activemedia-blocked] beschränken?
Beide, ** und ***, zeigen ein identisches Verhalten zu *, keine Änderungen erkennbar.
Ich denke mittlerweile, dass das nur mit einem Script sauber geht.
Die Icons werden scheinbar dynamisch zur Laufzeit verändert.
Das Lautsprecher-Icon ändern sich ja, wenn sich der Medienzustand ändert (es erscheint nur, wenn Audio abgespielt wird).
Und das Wiedergabe-Icon kommt manchmal recht spät, scheinbar analysiert FF die Site im Hintergrund auf wiedergebbare Medien.
Ist also mehr als reine Kosmetik.
Guten Morgen Ralf
Link zum Tab 2 mit diesem Symbol Wiedergabe-Icon 
In den generellen Einstellungen zu "Datenschutz & Sicheheit" habe ich unter "Berechtigungen" zu "Automatische Wiedergabe" "Audio und Video blockieren" eingestellt und keine Ausnahme definiert.
Es sieht immer so aus wie im Beitrag #1 auf Tab 2, obwohl auch in Youtube kein automatisches Abspielen aktiv ist.
Ist das ein Bug? Hinweis: ich verwende den FF 91.x ESR!
Sobald irgendein wiedergebbarer Inhalt erkannt wird, erscheint dieses Symbol, auch z.B. bei ARD und ZDF.
Und dies auch, wenn gar kein Autoplay auf diesen Seiten aktiv ist.
Die Frage ist also aktuell: wie bekommt man speziell nur dieses Icon transparent, ohne gleichzeitig das Lautsprecher-Icon zu verändern...
Mit dem kurzen Code aus #11 kann ich dieses Icon ja gezielt ansprechen und entfernen.
Auch ist die Funktion der Wiedergabe weg, wenn ich da hinein clicke.
Nur beim erstmaligen Laden der Seite beim Browserstart sieht es dann so aus (Tab 2 ohne Favicon):
Das normale Favicon erscheint erst, wenn das Tab durch anclicken "aktualisiert" wird.
Wir reden etwas aneinander vorbei, scheint mir...
Das hier reicht grundsätzlich schon:
/* Wiedergabeymbol entfernt */
.tab-icon-overlay[activemedia-blocked] {
display: none !important;
}Sieht so aus, und so soll das als Ergebnis auch sein.
Tab 2 wie gewollt, und Tab 3 auch wie gewollt (mit aktivem Sound):
Hat nur eine Macke: beim Browserstart ist das ungewollte Symbol auf Tab 2 zuerst noch da.
Es verschwindet erst, zwar nicht mehr da, aber auch das Favicon fehlt.
Es erscheint erst, wenn ich den Tab einmal anclicke.
Klarstellung: nicht das Lautsprechersymbol verändern, es geht mir nur um das Symbol auf dem zweiten Tab.
Mit Deinem Code werden beide, das Wiedergabesymbol (Tab 2) und das Lautsprechersymbol (Tab 3), transparent.
Es soll aber nur das Wiedergabesymbol auf Tab 2 dauerhaft weg.
Mit diesem Zusatz ist das Symbol auf Tab 2 weg:
/* Wiedergabeymbol entfernt */
.tab-icon-overlay[activemedia-blocked] {
list-style-image: unset !important;
}Sieht so aus:
Die Favicons auf Tab 2 und 3 scheinen aber irgendwie nach oben verschoben zu sein...
Aber wie gesagt, das Lautsprechsymbol soll eigentlich unverändert bleiben, nicht transparent werden.
Wenn das nicht gehen sollte, dann als zweite Möglichkeit eben mit Verschieben neben das Favicon...
(BOAH - wir fliegen hier gleich weg... 
)
Noch ein Zusatz:
Bisher ist das nur eine rein optische "Korrektur", denn die Funktion ist leider noch gegeben.
Bei Hover wird die Fläche wie ein Button eingefärbt und kann angeclickt werden, das Video startet...
Hm, etwas seltsam.
So sieht es jetzt mit Deinem Code aus:
Der Code spricht auch wieder das Lautsprechersymbol an. Aber man sieht immerhin schon das Favicon.
Bei meinem Codeschnipsel aus #5 sieht es so aus:
Platz für das Favicon, aber dies ist leider nicht zu sehen. Das Lautsprechersymbol ist unverändert.
Bitte nicht einfach etwas antworten, erst lesen. 
Es geht nicht um das Lautsprechersymbol, daher soll das so nicht sein.
Was ich eben herausgefunden habe: mit
.tabbrowser-tab:not([pinned="true"]) .tab-icon-overlay[activemedia-blocked] {
display: none !important;
}kann das Wiedergabesymbol angesprochen werden.
Hallo Dharkness ,
das funktioniert leider nicht.
Dafür ist jetzt im dritten Tab das Lautsprechersymbol verschoben, was nicht sein soll.
Guten Tag alle
Ich benötige eine kleine Hilfestellung.
Auf einigen Tabs mit abspielbaren Medien erscheint ein Wiedergabe-Icon, das anstelle des Favicons gezeigt wird.
Das hätte ich gerne ausgeblendet bzw. entfernt, und statt dessen immer das ganz normale Favicon angezeigt.
Das Lautsprechersymbol soll erhalten bleiben, das ist OK.
Ist das in den FF-Optionen abstellbar oder per CSS zu erledigen?
Meine Versuche haben bisher nicht gefruchtet.
Falls das schon mal hier angesprochen wurde - ich habe einfach nichts dazu gefunden...
Besten Dank im Voraus!
Ein Hinweis auf das alte OS ist ja richtig und meinetwegen auch wichtig, wird hier aber oft arg übertrieben breitgewalzt, ohne wirklich zu helfen. Das verwirrt nur unnötig, finde ich.
Und hilft beim eigentlichen Problem nicht weiter, sofern dieses nicht durch das OS verursacht wird.
Vielleicht kommt der TO deshalb nicht weiter...
Ich habe noch eine Frage.
Mit Instanz sind ja wahrscheinlich Fenster gemeint.
Dann wäre für mich interessant, ob man auch auf maximal zwei Fenster begrenzen kann.
Aber auch nur dann, wenn du die Hilfen, die du hier bekommst annimmst und umsetzt.
Dazu muss man die angebotene Hilfe zum Problem, gute und gut gemeinte Ratschläge zu Updates sowie überzogene und überflüssige Darstellungen schon gut trennen können. Vielleicht konzentriert ihr euch auch auf die reine Hilfe, es wäre dann auch für andere einfacher, zu folgen, denn hier gibt es wieder viel OT.
Lese hier die Informationen, die Du für die Frage zu den Favicons benötigts.
Bin zwar auch kein Fachmann, aber sollte er nicht einfach mal das neue Zertifikat im FF importieren, also die Fehlermeldung "self signed" damit umgehen? Händische Serverfreigabe.
