• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

Sign in to follow this  

Change Firefox bookmark folder icons

Recommended Posts

Jase    130

I like how you can have folders for your bookmarks.. but what I dislike is they are all the same! boring looking folders..

well its time to change that and make your firefox folders look like this:

1423452296_20354cf6b2_o.png

go to:

C:\Documents and Settings\*your username*\Application Data\Mozilla\Firefox\Profiles\*profile name*\chrome

and create A: userChrome.css

enter the following:

[i].bookmark-item[container="true"][label="[b]NAME OF FOLDER[/b]"] {
  list-style-image: url('file:///*[b]LOCATION OF ICON[/b]*) !important;
  -moz-image-region: rect(0px 16px 16px 0px) !important;
}[/i]

here is an example:

.bookmark-item[container=true][label=Dailys] {

list-style-image: url('file:///C:/Documents/Tools/FFI/home.png') !important;

-moz-image-region: rect(0px 16px 16px 0px) !important;

}

.bookmark-item[container=true][label=Favorites] {

list-style-image: url('file:///C:/Documents/Tools/FFI/favorits.png') !important;

-moz-image-region: rect(0px 16px 16px 0px) !important;

}

This will show my first 2 folders: Dailys and Favorites.. remember to repeat the code to change the icons of the folders.. its a quite easy and simple trick that I thought I might share :)

Share this post


Link to post
Share on other sites
Jase    130

42 views and 0 comments?.. come on.. this had to of helped some people :(

Share this post


Link to post
Share on other sites
Harlem39s Finest    0

that looks sexeh !

i'll try it.

Share this post


Link to post
Share on other sites
night_stalker_z    9

Looks good but I dont think most people will bother.

Share this post


Link to post
Share on other sites
Jase    130

why its pretty simple :s

Share this post


Link to post
Share on other sites
lordtinuviel    0

jase

try it it doesnt show :(

edit:

n/m fix it, great trick, thkz

Edited by Daeron Tin

Share this post


Link to post
Share on other sites
Jase    130
jase

try it it doesnt show:((

edit:

n/m fix it, great trick, thkz

You're welcome

Share this post


Link to post
Share on other sites
The_Decryptor    1,105

I'd put the images in the same folder as the userchrome.css file, saves having to fix it up if the folder ever gets moved (and in case you're using portable firefox, keeps working over computers)

Could also use a data: URI.

Anyway, nice and simple (Y)

Share this post


Link to post
Share on other sites
jasondefaoite    357

Ya this looks pretty nice. However if there is an update to firefox, does this get wiped?

Share this post


Link to post
Share on other sites
Corris    42
Ya this looks pretty nice. However if there is an update to firefox, does this get wiped?

It shouldn't do since it is stored in the userChrome.css, which doesn't get touched by updates form what I know.

Nice one though, I will have to try it out when I have some time and have found a nice icon to use.

Share this post


Link to post
Share on other sites
lordtinuviel    0

could someone share some nice icons?

Share this post


Link to post
Share on other sites
Jase    130

Daeron Tin?viel try icandy by foood:))

Share this post


Link to post
Share on other sites
solardog    0

Sweet. I did this once and totally forgot that I did it and how I did it until this thread just jiggled it out of the corner. Thanks.

Share this post


Link to post
Share on other sites
JackTorrance    0

Dear Jase, sorry but that does NOT seem to work at all! :o

First of all, you failed to mention that in order to create a proper userChrome.CSS, you need to keep the @namespace url line! Second, I've tried several times your nice code programing to no avail. Here is a full copy of the css file I created:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

.bookmark-item[container=true][label=XXX | News] {

list-style-image: url('file:///C:\Documents and Settings\XXXX\My documents\drap-it.02.png) !important;

-moz-image-region: rect(0px 16px 16px 0px) !important;

}

This is a cut and paste of the css, so what's wrong? Whenever I open Firefox 2.0, I have my bookmarks folders neatly stacked on the left, and the one I desperately try to change the icon of is style in the same boring, standard style despite the userChrome.css coded as stated above. Help! And thanks for anyone able to figure out what I did wrong! ;)

Edited by JackTorrance

Share this post


Link to post
Share on other sites
kyller    0

Jase,

What windows msstyles u are using?

plz share ?

Share this post


Link to post
Share on other sites
Jase    130

Share this post


Link to post
Share on other sites
Harlem39s Finest    0

after 6 months(i lost all my bookmarks) i finally used this tweak on my FF :D

Share this post


Link to post
Share on other sites
SMELTN    142

I am about to try this now myself. I hope it still works. Also I need to find some nice icons

Share this post


Link to post
Share on other sites
Jase    130

Any Luck?

Share this post


Link to post
Share on other sites
ckempo    2

Or, install the "Favicon Picker 2" extension and be able to adjust icons at will.

Share this post


Link to post
Share on other sites
+longgonebn    74
Or, install the "Favicon Picker 2" extension and be able to adjust icons at will.

does not work with folder icons, only bookmark icons.

Share this post


Link to post
Share on other sites
RicoSuave    0

Thank you, Jase. I have been looking for this folder modifcation for a long time, and FINALLY found it here. It worked perfectly for me, just as you described. And as I am one of those people who nests bookmark folders several layers deep, I am loving Firefox much more now. Thanks again!

:)

-Rene Flores

Austin, TX

Share this post


Link to post
Share on other sites
Jase    130
Thank you, Jase. I have been looking for this folder modifcation for a long time, and FINALLY found it here. It worked perfectly for me, just as you described. And as I am one of those people who nests bookmark folders several layers deep, I am loving Firefox much more now. Thanks again!

:)

-Rene Flores

Austin, TX

you're welcome!

Share this post


Link to post
Share on other sites
ooka    0

Thanks Jase,

First I tried everything to change my folder icons.

I was using just one code,example:

.bookmark-item[container=true][label=dev] {

list-style-image: url('file:///C:/1.ico') !important;

-moz-image-region: rect(0px 16px 16px 0px) !important;

}

Then I thought may be writing "at least 2 codes" is the secret of changing folder icons...(Because Jase wrote 2 codes)

After that I wrote code for 2 folder icon.

.bookmark-item[container=true][label=dev] {

list-style-image: url('file:///C:/1.ico') !important;

-moz-image-region: rect(0px 16px 16px 0px) !important;

}

.bookmark-item[container=true][label=resim] {

list-style-image: url('file:///C:/2.ico') !important;

-moz-image-region: rect(0px 16px 16px 0px) !important;

}

Finally the problem solved :D.Don't know was that luck or right decision.

Try to write code for 2 or more folder icon.

If anyone solves their problem by my method please write it here.Because I want to know if it is right or wrong.

Thanks again Jase :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.