Recommended Posts

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 :)

Link to comment
https://www.neowin.net/forum/topic/589368-change-firefox-bookmark-folder-icons/
Share on other sites

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)

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.

  • 1 month later...

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
  • 4 months later...
  • 2 weeks later...
  • 2 weeks later...
  • 3 months later...

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

  • 4 weeks later...
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!

  • 5 months later...

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 :)

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Also, Guru3D.com always has some pros and experts lurking in the comments.
    • If anyone is wondering, it's 30fps at 4K
    • This 4K webcam from Acer is now only $59.99 by Taras Buria Those looking for an affordable, high-resolution webcam from a reputable manufacturer can check out the latest deal from Acer, which puts its 4K webcam at a solid price. Thanks to a 14% discount, you can buy this all-metal 4K webcam from Acer for just $59.99. Despite the affordable price tag, the webcam has a pretty large 1/2" CMOS sensor manufactured by Sony. Apart from its size, it supports additional conveniences, such as high dynamic range and phase-detection autofocus (PDAF). Plus, the camera ensures you do not have to buy additional audio equipment, as it comes with two built-in high-sensitivity microphones, a built-in background noise filter, and the ability to pick up your voice from up to 2.5 meters away. Acer is not cheaping out on materials, and the webcam is enclosed in a more premium metal case, which is also good at heat dissipation (high-resolution cameras can get quite hot). And to make sure no one is peeping at you when the camera is in use, there is a magnetic cover also made of metal. Additional conveniences include an LED status indicator and a built-in mount that lets you place a camera on a tripod. Acer 4K Webcam for PC/Mac with All-Metal Unibody Sculpted - $59.99 | 14% off Good to know This Amazon deal is U.S.-specific and not available in other regions unless specified. We only use first-party seller links (at the time of article publishing); ensure that you purchase from a first-party seller link only. Check out Today's Deals on Amazon | or our recent tech deals. Become a Prime member (for Students or SNAP) via Neowin Get Prime Access - Prime for half price (for qualifying Medicaid, EBT, SNAP) Subscribe to Prime Video, Audible Plus, Music Unlimited, or Kindle Unlimited via Neowin As an Amazon Associate, we earn from qualifying purchases.
  • Recent Achievements

    • Conversation Starter
      NovaEdgeX earned a badge
      Conversation Starter
    • One Year In
      Console General earned a badge
      One Year In
    • One Year In
      Twozo Technologies earned a badge
      One Year In
    • One Month Later
      Twozo Technologies earned a badge
      One Month Later
    • Week One Done
      Twozo Technologies earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      519
    2. 2
      +Edouard
      185
    3. 3
      PsYcHoKiLLa
      107
    4. 4
      Steven P.
      87
    5. 5
      ATLien_0
      67
  • Tell a friend

    Love Neowin? Tell a friend!