FF143 - Foldericons in Unterordnern werden nicht mehr zugewiesen

Horstmann

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.

Mira_Belle

Zitat von Horstmann

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

Danke.

Dann würde so etwas gehen:

CSS

: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;
}

Alles anzeigen

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

Grrrr, das ist doch

Horstmann

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.

Mitleser

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:

CSS

/*+++++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;
}

Alles anzeigen

CSS

/*+++++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;
}

Alles anzeigen

Mira_Belle

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

CSS

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;
}

Alles anzeigen

2002Andreas

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

Mira_Belle

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.

Mitleser

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:

CSS

/*+++++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;
}

Mira_Belle

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

CSS

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;
}

Alles anzeigen

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?

Mitleser

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:

CSS

/*+++++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;
}

Alles anzeigen