Replace Folder icon on bookmark toolbar with one of your own

FIREFOX

By ChewySolo Posted April 16, 2008 22:20:07

do you have any folders on your bookmark toolbar? is it boring? are you a complete customization freak like i? THEN LOOK NO MORE, after hours of sorting out how to do it from many sources i have it all in one location!

does that look good to you?

well here is the code:

[code]
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

.bookmark-item[container="true"][label=""] {
list-style-image: url('file:///') !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
}
[/code]

simply download Chrome Edit (http://webdesigns.ms11.net/chromeditp.html) plus add on and get down to work, go tools >Chrome Edit Plus > chrome edit, and on the first tab put in that code...

you only need to repeat the first line "@namespace" once, the .bookmark can be repeated for every bookmark toolbar folder you have.

First find an icon you want (i resized some dock icons i downloaded) and resize it to 16x16 with a PNG file and transparency (if you want). Next place the icon in a folder to keep. Then replace the with the name of the folder on the Toolbar EXACTLY. Then replace the to the location on your HDD that the icon is (ex. F:/Other/icons/firefox/hardware.png).

Once you have done that for all the icons you want, click save on the bottom and then click restart! and next time you boot up firefox check your bookmark toolbar xD

Post results

heres my code for reference:
[code]
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

.bookmark-item[container="true"][label="Computer Hardware/Tech"] {
list-style-image: url('file:///F:/Other/icons/firefox/hardware.png') !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
}

.bookmark-item[container="true"][label="Gaming"] {
list-style-image: url('file:///F:/Other/icons/firefox/gaming.png') !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
}

.bookmark-item[container="true"][label="Photoshop"] {
list-style-image: url('file:///F:/Other/icons/firefox/photoshop.png') !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
}

.bookmark-item[container="true"][label="Utilities/programs etc."] {
list-style-image: url('file:///F:/Other/icons/firefox/programs.png') !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
}

.bookmark-item[container="true"][label="Windows Customization"] {
list-style-image: url('file:///F:/Other/icons/firefox/windows.png') !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
}

.bookmark-item[container="true"][label="Daily"] {
list-style-image: url('file:///F:/Other/icons/firefox/daily.png') !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
}

.bookmark-item[container="true"][label="Random"] {
list-style-image: url('file:///F:/Other/icons/firefox/random.png') !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
[/code]

and i guess [code][/code] isnt workin

0 Karma 4 Replies 8 Referrals

FYI for anyone confuzzled this is for Firefox.

Nice tut didn't know how to do this.

I messed with this myself (same icon for every folder though) and that annoying page jumping thing came back with some wb skins.

I just can't figure out why it does that....stupid ugly XP folder icons.

BTW, you should include a link to that chrome edit addon.

i use an addon to change my bookmarks (url) icons but didn't even know i could change the folders' icon nice

Sign Up or Login and this ad disappears!
There are many great features available to you once you register. Sign Up for a free account and browse the forums without ads.

Hi,
it is not working for me. do i have to specify all bookmark folders or a few will do? and is it different in windows xp sp3 firefox 3.0?