Farbige Ordnersymbole

2002Andreas

Der Code aus Beitrag Nr. 11 gilt pauschal für alle Ordner Icons.

Wenn du also für dich Ordner speziell ansprechen willst musst du einen meiner Codes einfach zusätzlich unten drunter einfügen.
Dann bleiben alle anderen Ordner mit dem gelben Icon, und nur diese 3 aus meinem Beispiel haben ein anderes eigenes Icon.

CSS

/* This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to override default settings.
 */
/* Do not remove the @namespace line -- it's required for correct functioning */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 
/* set default namespace to XUL */


/**********************************************************
 ******* Ordnerfarbe der Lesezeichen wieder in gelb *******


 **********************************************************/
 
 /* Lesezeichen Sidebar - Ordnericon liegend gelb */
@-moz-document url("chrome://browser/content/bookmarks/bookmarksPanel.xul"), 
url("chrome://browser/content/history/history-panel.xul") {


treechildren::-moz-tree-image(container) {
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAB3RJTUUH1wcREBAg9OD7NAAAAAlwSFlzAAAewQAAHsEBw2lUUwAAAARnQU1BAACxjwv8YQUAAAH6SURBVHjaxVNBaxNBFP4mGRNp06bSaGu9qXhRLOSQX6Dg0d48SMWC4Mmbv8AfYA7Sgp6UgteCF29CKahBsKKWglgam4rRxGxiks3u7Mz6zZIlSVHRk7N8vLcz7/vemzczwP8eorSCgtLJJeXpUGtMBQHgK5RptxbuYJUx5o8CL5bx+OzCkyuZ2cLIwtPihbVW9a1GiCyFQyusFD4S2zfv4x5DtI2TAphOZk8zbXFE4NKt5ctInDmY8OLd6zNrtI+IlhURG0Xs55dezZXXF9Gq7CA9NQvNbAH19W/wo+6gWXeaN1aQkybEXLv2Bb36Z+SvfUAynYLgB9Y+GLEv6Sl4HTdcvX0yy4kZqdkit1nFWC4Pme4ydvMXxNiOwwTfIVP5OCBlK0Cv8Y4C5xnXYM+bB0ixTwjWHwpUdzbh+ijZSWlYQefrcxwrLJJcIZxRAWM33qP1KTCOwJ9ErbyLno8trvqRgOrsITV5ik6pT2IXvbZdINmjVr8CmYMx09h7/8wKMBtUtIWgu4/DE8e5lxob4pLsDkhhvxJrjYfE2Am065/Et1ZUQRAJTBxJIDQJZrgKZDiRwYA03AlxCF1Ho92oYGM7ElCS5/qmVjXzLx+cg71tMex5D/8Pw+ng4etd2GYpER0ucJRI26v9l2/Ivg82CI2YIP+BPCyifwI91AzKs/qQkQAAAABJRU5ErkJggg==") !important;}
}


/* Lesezeichen verwalten - Ordnericon liegend gelb */
@-moz-document url-prefix("chrome://browser/content/places/places.xul") {


treechildren::-moz-tree-image(container) {
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAB3RJTUUH1wcREBAg9OD7NAAAAAlwSFlzAAAewQAAHsEBw2lUUwAAAARnQU1BAACxjwv8YQUAAAH6SURBVHjaxVNBaxNBFP4mGRNp06bSaGu9qXhRLOSQX6Dg0d48SMWC4Mmbv8AfYA7Sgp6UgteCF29CKahBsKKWglgam4rRxGxiks3u7Mz6zZIlSVHRk7N8vLcz7/vemzczwP8eorSCgtLJJeXpUGtMBQHgK5RptxbuYJUx5o8CL5bx+OzCkyuZ2cLIwtPihbVW9a1GiCyFQyusFD4S2zfv4x5DtI2TAphOZk8zbXFE4NKt5ctInDmY8OLd6zNrtI+IlhURG0Xs55dezZXXF9Gq7CA9NQvNbAH19W/wo+6gWXeaN1aQkybEXLv2Bb36Z+SvfUAynYLgB9Y+GLEv6Sl4HTdcvX0yy4kZqdkit1nFWC4Pme4ydvMXxNiOwwTfIVP5OCBlK0Cv8Y4C5xnXYM+bB0ixTwjWHwpUdzbh+ijZSWlYQefrcxwrLJJcIZxRAWM33qP1KTCOwJ9ErbyLno8trvqRgOrsITV5ik6pT2IXvbZdINmjVr8CmYMx09h7/8wKMBtUtIWgu4/DE8e5lxob4pLsDkhhvxJrjYfE2Am065/Et1ZUQRAJTBxJIDQJZrgKZDiRwYA03AlxCF1Ho92oYGM7ElCS5/qmVjXzLx+cg71tMex5D/8Pw+ng4etd2GYpER0ucJRI26v9l2/Ivg82CI2YIP+BPCyifwI91AzKs/qQkQAAAABJRU5ErkJggg==") !important;}
}


/* Lesezeichen - Ordnericon liegend gelb */
@-moz-document url-prefix("chrome://browser/content/browser.xul") {


.bookmark-item[container="true"] {
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAB3RJTUUH1wcREBAg9OD7NAAAAAlwSFlzAAAewQAAHsEBw2lUUwAAAARnQU1BAACxjwv8YQUAAAH6SURBVHjaxVNBaxNBFP4mGRNp06bSaGu9qXhRLOSQX6Dg0d48SMWC4Mmbv8AfYA7Sgp6UgteCF29CKahBsKKWglgam4rRxGxiks3u7Mz6zZIlSVHRk7N8vLcz7/vemzczwP8eorSCgtLJJeXpUGtMBQHgK5RptxbuYJUx5o8CL5bx+OzCkyuZ2cLIwtPihbVW9a1GiCyFQyusFD4S2zfv4x5DtI2TAphOZk8zbXFE4NKt5ctInDmY8OLd6zNrtI+IlhURG0Xs55dezZXXF9Gq7CA9NQvNbAH19W/wo+6gWXeaN1aQkybEXLv2Bb36Z+SvfUAynYLgB9Y+GLEv6Sl4HTdcvX0yy4kZqdkit1nFWC4Pme4ydvMXxNiOwwTfIVP5OCBlK0Cv8Y4C5xnXYM+bB0ixTwjWHwpUdzbh+ijZSWlYQefrcxwrLJJcIZxRAWM33qP1KTCOwJ9ErbyLno8trvqRgOrsITV5ik6pT2IXvbZdINmjVr8CmYMx09h7/8wKMBtUtIWgu4/DE8e5lxob4pLsDkhhvxJrjYfE2Am065/Et1ZUQRAJTBxJIDQJZrgKZDiRwYA03AlxCF1Ho92oYGM7ElCS5/qmVjXzLx+cg71tMex5D/8Pw+ng4etd2GYpER0ucJRI26v9l2/Ivg82CI2YIP+BPCyifwI91AzKs/qQkQAAAABJRU5ErkJggg==") !important;}




toolbarbutton[class="bookmark-item"][label="Banken"][type="menu"][container="true"]{
 list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABc0lEQVR42mNkoBAwUmxAw7LHC/nYfsWhS2zYfIDp0MLk/wQNKJtz639ptArDmSc/4IJ//vxluH31FU5NZy7dZV/W5PYLboCyujjDj5+sKIrEhRHs33+gBv9lYHj69CPD7eu3pBbW2D+3i5/Lylg6++Z/cRl+hm9f/jF8fPeOoJ+ZWVkZzp04nfjr58/HQO4toAE3/guKcDG8f/cdrKAmVo3h2MPvRAVge8tyP8aSWTf+MzH/ZPj7h5lBV1+B4c17guEGBh/fv//15OEjU6AB1////PmRQUtTieHLT3aGf8TpZ3jy4OHxyTl6VowlM6////jxBYOltRHDi9f/iNL888cPhqePHqXPKTOfxVg889p/GSkeht8MvMCYIM761y+evZqcoyMOjkaQAfr6UgzPXvxjYGVjIqj5/79/DLdv3Fs1s8QkHGyAd9rEWH0rjwUfP/0iyvY/v3//3bmgxPLB5X1nwQYAsQVxwYYBTsAMoAhQbAAAAjCiCL9JqqgAAAAASUVORK5CYII=") !important;}
 


toolbarbutton[class="bookmark-item"][label="Bücher"][type="menu"][container="true"]{
 list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAB3RJTUUH1wcREBAg9OD7NAAAAAlwSFlzAAAewQAAHsEBw2lUUwAAAARnQU1BAACxjwv8YQUAAAH6SURBVHjaxVNBaxNBFP4mGRNp06bSaGu9qXhRLOSQX6Dg0d48SMWC4Mmbv8AfYA7Sgp6UgteCF29CKahBsKKWglgam4rRxGxiks3u7Mz6zZIlSVHRk7N8vLcz7/vemzczwP8eorSCgtLJJeXpUGtMBQHgK5RptxbuYJUx5o8CL5bx+OzCkyuZ2cLIwtPihbVW9a1GiCyFQyusFD4S2zfv4x5DtI2TAphOZk8zbXFE4NKt5ctInDmY8OLd6zNrtI+IlhURG0Xs55dezZXXF9Gq7CA9NQvNbAH19W/wo+6gWXeaN1aQkybEXLv2Bb36Z+SvfUAynYLgB9Y+GLEv6Sl4HTdcvX0yy4kZqdkit1nFWC4Pme4ydvMXxNiOwwTfIVP5OCBlK0Cv8Y4C5xnXYM+bB0ixTwjWHwpUdzbh+ijZSWlYQefrcxwrLJJcIZxRAWM33qP1KTCOwJ9ErbyLno8trvqRgOrsITV5ik6pT2IXvbZdINmjVr8CmYMx09h7/8wKMBtUtIWgu4/DE8e5lxob4pLsDkhhvxJrjYfE2Am065/Et1ZUQRAJTBxJIDQJZrgKZDiRwYA03AlxCF1Ho92oYGM7ElCS5/qmVjXzLx+cg71tMex5D/8Pw+ng4etd2GYpER0ucJRI26v9l2/Ivg82CI2YIP+BPCyifwI91AzKs/qQkQAAAABJRU5ErkJggg==") !important;}




toolbarbutton[class="bookmark-item"][label="Haus"][type="menu"][container="true"]{
 list-style-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5Ojf/2wBDAQoKCg0MDRoPDxo3JR8lNzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzf/wAARCAAQABADASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABQQG/8QAIxAAAQQCAgEFAQAAAAAAAAAAAQIDBBEFIQYxABITFjJBcf/EABUBAQEAAAAAAAAAAAAAAAAAAAUH/8QAIREAAQMBCQAAAAAAAAAAAAAAAQIREgADITFBYXKBscH/2gAMAwEAAhEDEQA/AM49A5DnnV5RcDIzlSVFRkIjrWlZGtECqFVQ0Kr88TXxjkPGIEXkIdaiPop1LIcp9tNhPqUgiiLUkEb+4BHfhOVk5mGx8fya3W2obmoqwKQoFZsf33FGwdgjsAVRHy/Is3Ci8aYkvyWCoJajJAs1sAq7KR3s0AB1QogRe939qiKFsUiJTDPb1hxrX//Z") !important;}


}

Alles anzeigen

Zitat von hwww

für die Mühe die du dir machst

Alles ist gut, ich bin doch zum helfen hier :wink:

hwww

Hallo 2002Andreas

Wieder mal tausend Dank.Habe es jetzt so hinbekommen.Habe den base64 Code durch den Pfad meiner Icons ersetzt und es funktioniert.Jeder Ordner hat nun sein eigenes Icon.

Recht vielen Dank und ein schönes Wochenende hwww

2002Andreas

Zitat von hwww

Recht vielen Dank und ein schönes Wochenende

Gerne doch, und danke, das wünsche ich dir auch

Zitronella

Ich klemm mich mal hier ran an den Thread, hoffe das ist ok.
Ich habe auch allgemein die Ordnersymbole in orange, aber mit dem fill-Attribut und einen Ordner blau
Der Code sieht bei mir so aus:

CSS

/*Lesezeichen Sidebar Ordnerfarbe ändern */
treechildren::-moz-tree-image(container) {
fill:orange !important;}


/*Lesezeichen Ordnerfarbe ändern */
.bookmark-item[container="true"]{
fill:orange !important;}


/* Ordner BM in blauer Farbe */	
toolbarbutton[class="bookmark-item"][label="BM"][type="menu"][container="true"]{
fill:blue !important;}

Alles anzeigen

Wie bekomme ich es hin, dass auch der Ordner namens BM in der Lesezeichen-Sidebar blau wird?

foto59

Zitat von d_mann
Hallo,
also ich habs so (für einzelne Ordner) in der userChrome.css gelöst:
CSS
.bookmark-item[label="Filme"] {list-style-image: url('./icons/DVD.png') !important;}
Icons liegen also im Unterordner "/icons" des chrome-Ordners
geht prima.
Grüße

Danke, das genügt mir vollkommen um drei Ordner etwas zu personalisieren :klasse:

bluetdi

Mit dem obigen code wird ja ein anderes Symbol eingefügt, das brauche ich gar nicht, sondern nur eine andere Farbe. Mir gelingt aber das Einfärben spezieller Ordner nicht. Momentan sind alle in der sidebar grün:

CSS

/* Lesezeichen Sidebar - Ordnericon liegend grün */
@-moz-document url("chrome://browser/content/bookmarks/bookmarksPanel.xul"), 
url("chrome://browser/content/history/history-panel.xul") {
	treechildren::-moz-tree-image(container) {
		fill:green !important; }		
}

Nun möchte ich 2-3 anders einfärben. Wie?

AngelOfDarkness

Würde mich auch interessieren, wie ich den vorhandenen Ordnern (allen, nicht einzeln) der Lesezeichen-Symbolleiste einfach nur eine andere Farbe geben kann sowie dem Text dazu. Also ohne den Ordnern eine neue Grafik zuzuweisen.

UliBär

Zitat von AngelOfDarkness

Würde mich auch interessieren, wie ich den vorhandenen Ordnern (allen, nicht einzeln) der Lesezeichen-Symbolleiste einfach nur eine andere Farbe geben kann sowie dem Text dazu. Also ohne den Ordnern eine neue Grafik zuzuweisen.

Das steht doch dort: https://www.camp-firefox.de/forum/viewtopi…065999#p1065999

Wenn alle die gleiche Farbe haben sollen, einfach das label weglassen:

CSS

toolbarbutton[class="bookmark-item"][type="menu"][container="true"] {
   filter:none !important;
   fill:orange !important;
   color:blue !important;
}

[edit]
Vielleicht noch besser, weil's weiter wirkt:

CSS

.bookmark-item[container="true"] {
   fill:orange !important;
   color:blue !important;
}

Son Goku

hier nochmal alles zusammen gefasst

betrifft nur die Lesezeichenleiste (LZ)
[attachment=2]Unbenannt-1.png[/attachment]

CSS

/* icon Rot mit Grüner Schrift */
toolbarbutton[class="bookmark-item"][label="Sims 3"][type="menu"][container="true"]{
 fill:red!important;
 color:green; }
 
/* icon Blau mit Roter Schrift */
toolbarbutton[class="bookmark-item"][label="Sims 4"][type="menu"][container="true"]{
 fill:blue!important;
 color:red; }


/* icon Grün mit Blauer Schrift */
toolbarbutton[class="bookmark-item"][label="meine Frage"][type="menu"][container="true"]{
 fill:green!important;
 color:blue; }

Alles anzeigen

oder so, und im Menü bei "Lesezeichen -> Lesezeichen-Symbolleiste "
[attachment=1]Unbenannt-4.png[/attachment]

CSS

/* icon Rot mit Grüner Schrift */
.bookmark-item[container="true"][label="Sims 3"] {
 fill:red!important;
 color:green !important; }
 
/* icon Blau mit Roter Schrift */
.bookmark-item[container="true"][label="Sims 4"] {
 fill:blue!important;
 color:red !important; }


/* icon Grün mit Blauer Schrift */
.bookmark-item[container="true"][label="meine Frage"] {
 fill:green!important;
 color:blue !important; }

Alles anzeigen

worin der Unterschhied genau besteht, weis ich leider auch nicht.

Code

/* icon Test */
.bookmark-item[container="true"][label="Test"] {
... }

den Namen des Ordner muß bei z.B [label="Test"] geändert werden in eueren eigenen Ordnername

und hier noch als base64 das Orignale Ordnersymbol mal anderes rum
[attachment=0]Unbenannt-6.png[/attachment]

für base64

CSS

.bookmark-item[container="true"][label="Test"] {
   -moz-appearance:none!important;
     list-style-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTY3NUY3MjNFNDQwMTFFN0JCNTZFNDUwN0RDQjdBNDIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTY3NUY3MjRFNDQwMTFFN0JCNTZFNDUwN0RDQjdBNDIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFNjc1RjcyMUU0NDAxMUU3QkI1NkU0NTA3RENCN0E0MiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFNjc1RjcyMkU0NDAxMUU3QkI1NkU0NTA3RENCN0E0MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsI7/MYAAACeSURBVHjaYvz//z8DMeDGjZv/6+vrGL58+QoXCw8PZ2AAGUAIX79+439CQsL/Y8eO/79//wEYgwz08vL+z7Jo0eL/K1euxGs7NzcXQ2FhEYOkpCRcjJ2dHUyzgDT39fXBBUgFjCBnMFAAWEBEbW0tWZqbm5sZmBgoBKMGUMEAcDR++vSJgYWFhSSNf/78gSSkhQsXEUzKuAAoMwEEGAC4mFeEiMjWbwAAAABJRU5ErkJggg==') !important;
	-moz-image-region: rect(0px 16px 16px 0px) !important;
	margin-top: 1px!important;
	color: red !important; 
	 }

für die Punkte kann dein base64 Code verwendet werden.

CSS

list-style-image:  url('............') !important;

UliBär

Zitat von Son Goku

...
worin der Unterschhied genau besteht, weis ich leider auch nicht.
...

Der Code

Code

.bookmark-item[container="true"]...

"wirkt" weiter, z. B. auch in Untermenüs. Der andere Code wirkt ausschließlich in der Lesezeichenleiste.

Son Goku

Screenshot hinzugefügt

@ UliBär
Danke für die Info

AngelOfDarkness

UliBär

danke funktioniert :klasse:

Son Goku

ein wenig rumgespielt :mrgreen:
[attachment=0]00.png[/attachment]

und jetzt gehe ich schlafen.

Zitronella

für meine Frage gibts wohl keine Lösung, oder?

2002Andreas

Hallo Zitronella...

für die Sidebar konnte ich das noch nie ändern, früher gab es eine Erweiterung dazu die das wohl per JavaScript gemacht hat :-??

Zitronella

ok, nicht so tragisch. Hauptsache der eine Ordner "BM" ist in der Lesezeichen-Symbolleiste blau. Wäre halt nett gewesen, wenn er auch in der Bibliothek und Sidebar auch blau wäre, ist aber wie gesagt nicht so schlimm. Danke

bluetdi

Damit hat sich auch meine Frage erledigt. Trotzdem danke.

cazador

Ich habe hier jetzt alle zur Verfügung stehenden Codes getestet.
Leiter ist der Passende nicht dabei.
Ich möchte gern das nachfolgende Bild anstelle aller Ordnersymbole dargestellt bekommen.
Das Bild ist aus #16. Geschlossene Ordnersymbol allerdings gespiegelt.

[attachment=0]Bild Ordner.jpg[/attachment]

universum123

hi

es gibt 2 Wege

1. Bild in 16.16 *.png machen (vorsichtshalber) den Link zum *.png im "code" gegen das Base64 austauschen

oder

2. das Bild zu Base64 machen im Netz ein Base64 Editor suchen und wandeln lassen und den dann gegen das "alte" base64 tauschen

https://www.base64-image.de/

oder auf Andreas ... oder oder oder warten

tschö

cazador

Danke für deinen Tip. Jetzt habe ich das mit dem Base64 Editor kapiert.
Habe mich schon gefragt wo man den her bekommt.

Leider habe ich das Ortnerbild nicht in einer guten Qualität und Farbe.