Replace Folder icon on bookmark toolbar with one of your own
FIREFOX
Wednesday, April 16, 2008 by ChewySolo | Discussion: Tutorials
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
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
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:///
-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
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
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
Bebi Bulma
Reply #2 Thursday, April 17, 2008 12:23 AM
Reply #2 Thursday, April 17, 2008 12:23 AM
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 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.
ArileenDesign
Reply #3 Thursday, April 17, 2008 12:51 AM
Reply #3 Thursday, April 17, 2008 12:51 AM
i use an addon to change my bookmarks (url) icons but didn't even know i could change the folders' icon nice
amit0009
Reply #4 Tuesday, June 17, 2008 9:46 PM
Reply #4 Tuesday, June 17, 2008 9:46 PM
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?
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?
Vgolfmaster
Reply #5 Tuesday, June 2, 2009 6:13 PM
Reply #5 Tuesday, June 2, 2009 6:13 PM
Hi,
I have used this method in the past and it worked, but now for some reason it removes the standard windows folder icons, and does not replace them with my designated icons. So now I have the text withblank spaces where the icons should be, any ideas? Here is my code:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
.
Code: css
- bookmark-item[container="true"][label="Home"] { list-style-image: url('file:///C:\Documents and Settings\Mark\Application Data\Mozilla\Firefox\Profiles\w7djnfcc.default\chrome\Bookmarks Icons\home.png') !important; -moz-image-region: rect(0px 16px 16px 0px) !important; } .bookmark-item[container="true"][label="Marks"] { list-style-image: url('file:///C:\Documents and Settings\Mark\Application Data\Mozilla\Firefox\Profiles\w7djnfcc.default\chrome\Bookmarks Icons\Marks.png') !important; -moz-image-region: rect(0px 16px 16px 0px) !important; } .bookmark-item[container="true"][label="Build(Micro)"] { list-style-image: url('file:///C:\Documents and Settings\Mark\Application Data\Mozilla\Firefox\Profiles\w7djnfcc.default\chrome\Bookmarks Icons\Build.png') !important; -moz-image-region: rect(0px 16px 16px 0px) !important; } .bookmark-item[container="true"][label="Bills"] { list-style-image: url('file:///C:\Documents and Settings\Mark\Application Data\Mozilla\Firefox\Profiles\w7djnfcc.default\chrome\Bookmarks Icons\Bills.png') !important; -moz-image-region: rect(0px 16px 16px 0px) !important; } .bookmark-item[container="true"][label="Financial"] { list-style-image: url('file:///C:\Documents and Settings\Mark\Application Data\Mozilla\Firefox\Profiles\w7djnfcc.default\chrome\Bookmarks Icons\Financial.png') !important; -moz-image-region: rect(0px 16px 16px 0px) !important; } .bookmark-item[container="true"][label="Boards"] { list-style-image: url('file:///C:\Documents and Settings\Mark\Application Data\Mozilla\Firefox\Profiles\w7djnfcc.default\chrome\Bookmarks Icons\Boards.png') !important; -moz-image-region: rect(0px 16px 16px 0px) !important; } .bookmark-item[container="true"][label="NWTC"] { list-style-image: url('file:///C:\Documents and Settings\Mark\Application Data\Mozilla\Firefox\Profiles\w7djnfcc.default\chrome\Bookmarks Icons\NWTC.png') !important; -moz-image-region: rect(0px 16px 16px 0px) !important; } .bookmark-item[container="true"][label="Security"] { list-style-image: url('file:///C:\Documents and Settings\Mark\Application Data\Mozilla\Firefox\Profiles\w7djnfcc.default\chrome\Bookmarks Icons\Security.png') !important; -moz-image-region: rect(0px 16px 16px 0px) !important; } .bookmark-item[container="true"][label="Tech"] { list-style-image: url('file:///C:\Documents and Settings\Mark\Application Data\Mozilla\Firefox\Profiles\w7djnfcc.default\chrome\Bookmarks Icons\Tech.png') !important; -moz-image-region: rect(0px 16px 16px 0px) !important; } .bookmark-item[container="true"][label="WDPSD"] { list-style-image: url('file:///C:\Documents and Settings\Mark\Application Data\Mozilla\Firefox\Profiles\w7djnfcc.default\chrome\Bookmarks Icons\WDPSD.png') !important; -moz-image-region: rect(0px 16px 16px 0px) !important; } .bookmark-item[container="true"][label="F@H"] { list-style-image: url('file:///C:\Documents and Settings\Mark\Application Data\Mozilla\Firefox\Profiles\w7djnfcc.default\chrome\Bookmarks Icons\[email protected]') !important; -moz-image-region: rect(0px 16px 16px 0px) !important; } .bookmark-item[container="true"][label="Radio"] { list-style-image: url('file:///C:\Documents and Settings\Mark\Application Data\Mozilla\Firefox\Profiles\w7djnfcc.default\chrome\Bookmarks Icons\Radio.png') !important; -moz-image-region: rect(0px 16px 16px 0px) !important; } .bookmark-item[container="true"][label="Careers"] { list-style-image: url('file:///C:\Documents and Settings\Mark\Application Data\Mozilla\Firefox\Profiles\w7djnfcc.default\chrome\Bookmarks Icons\Careers.png') !important; -moz-image-region: rect(0px 16px 16px 0px) !important; } .bookmark-item[container="true"][label="Script Help"] { list-style-image: url('file:///C:\Documents and Settings\Mark\Application Data\Mozilla\Firefox\Profiles\w7djnfcc.default\chrome\Bookmarks Icons\Script.png') !important; -moz-image-region: rect(0px 16px 16px 0px) !important; } .bookmark-item[container="true"][label="Games"] { list-style-image: url('file:///C:\Documents and Settings\Mark\Application Data\Mozilla\Firefox\Profiles\w7djnfcc.default\chrome\Bookmarks Icons\Games.png') !important; -moz-image-region: rect(0px 16px 16px 0px) !important; }
Vgolfmaster
Reply #6 Tuesday, June 2, 2009 6:50 PM
Reply #6 Tuesday, June 2, 2009 6:50 PM
Disreguard last mssg, just realized that
c:\documents.......
is a lot dofferent than
c:/documents.......
got it working.
Please login to comment and/or vote for this skin.
Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:
- Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
- Access to a great community, with a massive database of many, many areas of interest.
- Access to contests & subscription offers like exclusive emails.
- It's simple, and FREE!
Reply #1 Wednesday, April 16, 2008 10:22 PM
Nice tut didn't know how to do this.