Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Why does this not work to change bookmarks folder icons?

more options

Hello again.I am trying to customize the folder icons in my bookmarks toolbar.I have tried for hours now to use several online tutorials and you tube videos and none of them work.I am tryin to make a folder with the FireFox logo the icon on the folders that hold the bookmarks in my bookmarks toolbar and it never does anything.Below is the line I am trying to use in the "userChrome.css" file and the file is in my default profile folder in a folder named "chrome" all the tutorials say this works but it does not,please help!

/* UI bookmark folder */ .bookmark-item[container] {

       list-style-image: url('../../images/firefox.png') }
Hello again.I am trying to customize the folder icons in my bookmarks toolbar.I have tried for hours now to use several online tutorials and you tube videos and none of them work.I am tryin to make a folder with the FireFox logo the icon on the folders that hold the bookmarks in my bookmarks toolbar and it never does anything.Below is the line I am trying to use in the "userChrome.css" file and the file is in my default profile folder in a folder named "chrome" all the tutorials say this works but it does not,please help! /* UI bookmark folder */ .bookmark-item[container] { list-style-image: url('../../images/firefox.png') }

Modified by user308815331303682500883863760137632126395

Chosen solution

Give this a try:

(1) Set Windows to show all file extensions to make sure your full file names are exactly what you want them to be:

https://www.bleepingcomputer.com/tutorials/how-to-show-file-extensions-in-windows/

(2) Copy the image into the chrome folder, and rename it to BmkFolder.png so its appearance/purpose is clearer

(3) Add this rule to your userChrome.css file:

.bookmark-item[container] {
  list-style-image: url(BmkFolder.png) !important;
}

It should take effect the next time you exit Firefox and start it up again.

Does that work for you?

Read this answer in context 👍 1

All Replies (4)

more options

ongebroken said

/* UI bookmark folder */
.bookmark-item[container] {
    list-style-image: url('../../images/firefox.png')
}

Instead of using .. ("parent folder") in the path, which seems to point Firefox to some place completely outside the current profile folder, have you tried coping the images you want to use into the chrome folder itself?

You also could take a look at the "old icons" example here (scroll down past the example CSS to the ZIP file link):

https://www.userchrome.org/what-is-userchrome-css.html#colorbookmarkfolder

I ended up using very different selectors in my CSS than you're using, but I don't remember why.

more options

jscher2000 said

ongebroken said
/* UI bookmark folder */
.bookmark-item[container] {
    list-style-image: url('../../images/firefox.png')
}

Instead of using .. ("parent folder") in the path, which seems to point Firefox to some place completely outside the current profile folder, have you tried coping the images you want to use into the chrome folder itself?

You also could take a look at the "old icons" example here (scroll down past the example CSS to the ZIP file link):

https://www.userchrome.org/what-is-userchrome-css.html#colorbookmarkfolder

I ended up using very different selectors in my CSS than you're using, but I don't remember why.

Hi,I had tried to put the images in the chrome folder with the css file but that did not work either. I tried a differnet tutorial and used this:

@namespace url(https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

.bookmark-item[container="true"][label="seedbox"] { list-style-image: url('file:///C:\Users\mypc\AppData\Roaming\Mozilla\Firefox\Profiles\vydnbzoa.default\chrome\firefox.ico') !important; -moz-image-region: rect(0px 32px 32px 0px) !important; }

but still have no luck.Would you bbe so kind as to maybe give me a code I can copy and paste and just change the image location in??? I am in no way tech savvy and this is realy frustrating me.I will attach the image I want to use so you can see it.I apologize for being so un-educated in these things.I have just switched from chrome to firefox today and I am much happier with it overall as it doesnt spy on me like chrome does but customizing the interface would be nice.

Thank you for any advice you can share with me,I appreciate it very much :-)

more options

Chosen Solution

Give this a try:

(1) Set Windows to show all file extensions to make sure your full file names are exactly what you want them to be:

https://www.bleepingcomputer.com/tutorials/how-to-show-file-extensions-in-windows/

(2) Copy the image into the chrome folder, and rename it to BmkFolder.png so its appearance/purpose is clearer

(3) Add this rule to your userChrome.css file:

.bookmark-item[container] {
  list-style-image: url(BmkFolder.png) !important;
}

It should take effect the next time you exit Firefox and start it up again.

Does that work for you?

more options

jscher2000 said

Give this a try: (1) Set Windows to show all file extensions to make sure your full file names are exactly what you want them to be: https://www.bleepingcomputer.com/tutorials/how-to-show-file-extensions-in-windows/ (2) Copy the image into the chrome folder, and rename it to BmkFolder.png so its appearance/purpose is clearer (3) Add this rule to your userChrome.css file:
.bookmark-item[container] {
  list-style-image: url(BmkFolder.png) !important;
}

It should take effect the next time you exit Firefox and start it up again.

Does that work for you?

You are the "MAN",it worked like a charm. Thank you so much for all this I really appreciate. Now I can stop banging my head on the wall,LOL. Thank you my friend.I hope you have an awesom night :-)