FF143 - Foldericons in Unterordnern werden nicht mehr zugewiesen

Zitat von Mira_Belle

Horstmann Das mit der Variabel habe ich auch schon ausprobiert,
doch leider gibt es in CSS keine Möglichkeit, Variablen zu verketten oder Pfade dynamisch zu ergänzen.
url(var(--xxx) + "icons/folder_10.png") oder ähnliche Konstruktionen sind in CSS nicht gültig.

Wäre echt gut gewesen.
Bleibt also nur interne Symbole zu verwenden oder halt den absoluten Pfad zu nutzen. Echt doof.
Oder mit Kanonen auf Spatzen ..., aber das würde ja viel zu weit gehen und für User ohne JS ...
Ach was, lassen wir das.

Das Problem hatte ich auch schon, ähnlich wie hier diskutiert.

Zitat von Horstmann

Das Problem hatte ich auch schon, ähnlich wie hier diskutiert.

Danke.

Dann würde so etwas gehen:

:root {
    --uno: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/Neu/chrome/icons/folder-plus.svg") !important;
    --dos: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/Neu/chrome/icons/default-browser-red.svg") !important;
}

treechildren::-moz-tree-image(container),
.bookmark-item[container="true"] {
	list-style-image: url("../icons/folder.svg") !important;
    --bookmark-item-icon: image-set(var(--uno)) !important; 
}

#bookmarksToolbarFolderMenu {
    --menuitem-icon: image-set(var(--dos)) !important;
}

Wobei auch das eben auch kein allgemein gültiges CSS ist!
Auch da muss mit dem absoluten Pfad gearbeitet werden.

Grrrr, das ist doch

Zitat von Mira_Belle

Wobei auch das eben auch kein allgemein gültiges CSS ist!
Auch da muss mit dem absoluten Pfad gearbeitet werden.

Grrrr, das ist doch

Für den spezifischen Zweck könnte man evtl. auch ein background-image oder ::before Element als Ersatz benutzen, oder sogar das img direkt via content angehen; aber mit meinem antiken Fx kann ich momentan dazu nichts anbieten.

Zitat von Horstmann

Für den spezifischen Zweck könnte man evtl. auch ein background-image oder ::before Element als Ersatz benutzen

Habe ich genauso gemacht:

/*+++++Dropdown Lesezeichen: Ordnersymbol neues Icon+++++++++++++*/
menu.bookmark-item[container="true"]::before  {
    background-image: url("../css/image/14folder/14folder03-031-orange.svg") !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
    background-position: left 1px top 0px !important;
    padding-right: 24px !important;
}
menu.bookmark-item[container="true"]:hover::before  {
    background-image: url("../css/image/14folder/14folder13-031-orange.svg") !important;
}
/*Originalicon löschen*/
menu.bookmark-item[container="true"] > img {
    display: none !important;
}

/*+++++Lesezeichenleiste: Ordnersymbol neues Icon+++++++++++++*/
#PlacesToolbarItems > toolbarbutton[container="true"] {
	background-image: url("../css/image/14folder/14folder03-022-gold.svg") !important;
	height: 14px !important;
	background-repeat: no-repeat !important;
	background-size: 28px 16px !important;
	background-position: left -1px top 3.5px !important;
}
#PlacesToolbarItems > toolbarbutton[container="true"]:hover{
	background-image: url("../css/image/14folder/14folder13-022-gold.svg") !important;
}
/*Originalicon löschen*/
#PlacesToolbarItems toolbarbutton[container="true"].bookmark-item:not(.subviewbutton) > .toolbarbutton-icon {
	display: none !important;
}

Sorry Mitleser , aber bei mir funktioniert das so nicht.
Aber Du hast mich auf eine Idee gebracht und so funktioniert es (bei mir).

treechildren::-moz-tree-image(container),
.bookmark-item[container="true"] {
	list-style-image: url("../icons/default-browser-red.svg") !important; 
}
menu.bookmark-item[container="true"]::before  {
    content: url("../icons/folder-plus.svg") !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
    background-position: left 1px top 0px !important;
    padding-right: 24px !important;
}
/*Originalicon löschen*/
menu.bookmark-item[container="true"] > img {
    display: none !important;
}

Zitat von Mira_Belle

aber bei mir funktioniert das so nicht.

Hier auch nicht

Zitat von Mira_Belle

so funktioniert es (bei mir).

Hier auch.

Aber 19 Zeilen statt 4, nur wegen der genauen Pfadangabe

Aber ok...kann ja jeder selber entscheiden

Danke fürs Testen.

Zitat von 2002Andreas

Aber 19 Zeilen statt 4, nur wegen der genauen Pfadangabe

Nein darum geht es mir und wahrscheinlich auch Horstmann eben nicht!
Sondern, dass jeder das einfach so nutzen kann.
Wir hatten es schon einmal, da war es bei zwei JS, dass Nutzer mit den Pfadangaben so gar nicht zurechtkamen.
Daher soll der Code, in diesem Fall das CSS, so einfach wie nur möglich in der Anwendung sein!

Kopieren, einfügen, fertig.

Hier funktionieren beide Versionen:

content: url("../css/image/14folder/14folder03-031-orange.svg") !important;

oder auch

background-image: url("../css/image/14folder/14folder03-031-orange.svg") !important;

wobei content sicherlich die bessere Lsg. ist, da die Background-Attribute gekürzt bzw. gelöscht werden können. Und wenn das Icon 16/16 ist, benötigt es auch keine Größenangabe. Hier funzt diese Kurzform:

/*+++++Dropdown Lesezeichen: Ordnersymbol neues Icon+++++++++++++*/
menu.bookmark-item[container="true"]::before  {
	content: url("../css/image/14folder/14folder03-031-orange.svg") !important;
	padding-right: 24px !important;
	padding-bottom: 2px !important;
}
menu.bookmark-item[container="true"] > img {
	display: none !important;
}

Warum auch immer! ? So bei mir.
Wenn ich noch mehr lösche, zeigt's gar kein Symbol mehr an.

menu.bookmark-item[container="true"]::before  {
    content: url("../icons/folder-plus.svg") !important;
    min-width: 16px !important;
    max-width: 16px !important;
    padding-right: 8px !important;
	padding-top: 2px !important;
}

/*Originalicon löschen*/
menu.bookmark-item[container="true"] > img {
    display: none !important;
}

Aber bei SVG's muss ja irgendwo eine "Größe angegeben sein, die werden doch skaliert!
Oder etwa nicht?
Eventuell greift ja bei Dir ein anderes CSS?

Wenn ich die Größe des Icons von 14/14 (.svg-Größe) auf 12/12 haben möchte (und ich werde das auch so lassen), sieht das bei mir genauso aus wie hier:

/*+++++Dropdown Lesezeichen: Ordnersymbol neues Icon+++++++++++++*/
menu.bookmark-item[container="true"]::before  {
	content: url("../css/image/14folder/14folder03-031-orange.svg") !important;
	width: 12px !important;
	height: 12px !important;
	margin-left: -1px !important;
	padding-right: 29px !important;
	padding-bottom: 7px !important;
}
menu.bookmark-item[container="true"]:hover::before  {
	content: url("../css/image/14folder/14folder13-031-orange.svg") !important;
}
menu.bookmark-item[container="true"] > img {
	display: none !important;
}

Einen Vorschlag hätte ich noch, basierend auf Link, Link, Link.

menu.bookmark-item[container] > img {
	content: url("../css/image/14folder/14folder03-031-orange.svg") !important;
}

Oder:

menu.bookmark-item[container] > [image] {
	content: url("../css/image/14folder/14folder03-031-orange.svg") !important;
}

Dateipfad dann anpassen, und das CSS alleine statt eurem Code probieren.
Ich glaube auch [container="true"] wird nicht mehr verwendet, stattdessen [container].

Zitat von Horstmann

Einen Vorschlag hätte ich noch

Die kürzeste Version ever! Der Preis geht an Horstmann für Version 1!
Vers. 2 funzt nicht.

Zitat von Mitleser

Die kürzeste Version ever! .... Version 1!
Vers. 2 funzt nicht.

Super, danke für's testen!
Das war aber v.a. auch inspiriert durch deine Benutzung von img weiter oben.

Das Prinzip sollte/könnte auch für andere Stellen klappen, die --menuitem-icon als Variable benutzen.

Zitat von Horstmann

Das Prinzip sollte/könnte auch für andere Stellen klappen, die --menuitem-icon als Variable benutzen.

Könnte sein, hier handelt es sich allerdings um --bookmark-item-icon.

.bookmark-item {
 &[container], &[hostContainer] {
   --bookmark-item-icon: url("chrome://global/skin/icons/folder.svg");
 }
}

EDIT: Horstmann, ja das funktioniert auch.

/*original*/
#context-reload {
 --menuitem-icon: url("chrome://global/skin/icons/reload.svg");
}
/*neu*/
#context-reload > .menu-icon {
	content: url("../css/image/16synchronization-3neongreen.svg") !important;
}

Zitat von Mitleser

Könnte sein, hier handelt es sich allerdings um --bookmark-item-icon.

Ausgehend von den Codes in den Links in #31, sieht es für mich so aus als wäre --bookmark-item-icon nur eine via CSS umbenannte --menuitem-icon Variable.

Edit: haben uns überschnitten mit den Antworten.

Horstmann
Zeitgleicher Post, siehe EDIT in #34.

Zitat von Mitleser

Zeitgleicher Post, siehe EDIT in #34.

Hab auch gerade gesehen, dass .DeJaVu das Thema auch schon angegangen hatte, ging wohl nur etwas unter.