Change your bookmarks toolbar appearance in Firefox - gHacks Tech News

Change your bookmarks toolbar appearance in Firefox

I have more bookmarks in the bookmarks toolbar than Firefox is able to display which leads to the unfortunate situation that the last ones are not shown in the toolbar anymore. While it is still possible to access the bookmarks using left and right arrows once, it is not an ideal situation and needed to be fixed.

The first thing that came to mind was to change the text of the bookmarks so that they would not take up that much space on the toolbar anymore. The idea made sense but you will eventually run into issues again as space is limited on the bookmarks toolbar.

I knew that Firefox was highly customizable and I began searching for a way to alter the style of the bookmarks toolbar and quickly found it. Now, to change the style, which includes reducing or increasing font sizes, changing the font type, changing colors on that font and much more you need to open userchrome.css which should be in your Firefox profile folder.

To find your Firefox profile folder enter about:support into the Firefox address bar and click on the show folder link on the page that opens up.

firefox bookmarks

Paste the following line of code at the end of this file:

.toolbarbutton-text {
font-size: 9px !important;
}

This changes the default font size to 9px which is what I'm currently using. To increase it just increase the value. Some other settings that you can try:

  • Change the font color of the bookmarks: font-color: blue !important;
  • Change the font itself: font-family: Verdana !important;
  • Change the background color - this example changes it to blue. background-color: blue !important;
  • Creates a border around the bookmarks.  border: 1px solid !important;

Update: Some users have asked me where they can find the Firefox profile folder. The easiest way to locate it is to click on the Firefox button, and select Help > Troubleshooting Information from the context menu there.

show profile folder

Here you find the profile folder listed under Application Basic. Just click on the button to be taken there directly.

Update: There is another option that you have.  Check out our guide on making the most out of Chrome's and Firefox's bookmarks bar. The idea here is to rely solely on icons and no text at all to make use of the space in an optimal fashion.

Another option that you have is to use bookmark folders to sort bookmarks into.

We need your help

Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.

If you like our content, and would like to help, please consider making a contribution:

Comments

  1. Brian Riley said on October 2, 2006 at 6:35 pm
    Reply

    The easiest way to get more bookmarks on the toolbar is to use Folders. To do that just right click a blank spot on the toolbar (I know that is difficult for you :)and select “New Folder”. After you have a folder or two just drag and drop the individual book marks into the folder(s).

  2. Martin said on October 2, 2006 at 6:38 pm
    Reply

    Well, yes that would be an option indeed. Did not know that you could add folders there as well.

    I still like to reach everything with one click :P

  3. Jesse said on October 3, 2006 at 5:15 am
    Reply

    I wish I could have 2 bookmark tool bars. What I am doing now is just not having any text and relying solely on favicons for my bookmarks.

  4. Steph said on October 3, 2006 at 8:26 am
    Reply

    I had the same issue with the toolbar. I erased the text and just used a full row of icons (that is, for the sites that actually *use* icons. Some are still in the dark ages and they have that awful blank white ‘typing paper’ looking thing. Nice way to set themselves apart, eh?).

    Like you, I ran out of room and ended up adding actual folders. Soon I ended up with a row of folders for different purposes (business related, mags and newspapers, multimedia, and so forth).

    Again I ran into an annoyance: in Firefox, your folders will always look alike. There’s no way to, for example, right click and select a different sort of icon to use as a file folder. Sure, the folders on my toolbar are all *named* differently, but it would be more efficient if each folder had a unique visual appearance to make it faster to find the one you want. Plus, you could do the same thing as mentioned previously re: the bookmarks – erase the actual filename and go by the folder’s unique appearance alone.

    Isn’t there a way to somehow change folder appearances in Firefox? Even if there could be a simple color-change option that would help. That kind of ability seems to be a necessary one for those of us who have different files for business use and personal use, as well as files of bookmarks that may belong to another person in the household for instance.

    I hope someone can come up with some customization solutions for the folders and bookmarks thing!

    Long live gHacks! – Steph

  5. Godfrey Daniel said on October 3, 2006 at 10:18 pm
    Reply

    Recently my bookmarks toolbar has completely disappeared and I haven’t been unable to reset or fix it. To be more accurate, the toolbar is there, but blank.

    Anyone else had this problem?

    1. netking said on January 27, 2007 at 2:43 pm
      Reply

      I had that when upgrading from FF1.5 to 2.0.
      The solution was to completely remove Firefax (with Windows Add/Delete programs) and then reinstall 2.0 from scratch.

      This should do no harm to your profile settings but backuping it could be wise tough…

  6. Godfrey Daniel said on October 3, 2006 at 10:20 pm
    Reply

    [edit: *have* been unable]

  7. Martin said on October 3, 2006 at 10:32 pm
    Reply

    Godfrey never heard of that before..

  8. netking said on January 27, 2007 at 2:41 pm
    Reply

    Hi,

    You speak about little text, but, if the icon is sufficiently comprehensible, you can also empty the text field… This gains a lot of space.

    The only problem is for sites that has a standard favicon… A extension to specify a favicon for bookmarks would be great…

  9. Nathan said on June 1, 2009 at 10:51 pm
    Reply

    I’m an organization freak on my toolbar, and I have eight main folders with different categories: Entertainment, News, Shopping, My Stuff, etc.

    Under each (PLAIN AND BORING) folder I have the easy to distinguish icons. I use Favicon Picker 3 to make icons for the rare sites that don’t have their own icons already. It’s very easy to add an icon when one doesn’t exist.

    Eventually I believe that Favicon Picker is going to make the folders customizable. I know that this is a complaint a lot of people have. If I could lose the text next to my folders, everything would be MUCH nicer.

  10. Abhimanyu said on December 20, 2010 at 2:38 am
    Reply

    Was just searching for the same thing. And found something better. Your post is old and maybe u have found this already.

    Anyway, If u havnt you can enable multi-line bookmark’s toolbar by adding the following code to the css

    /* Multi-Row Bookmarks Toolbar */
    #bookmarks-ptf {display:block}
    #bookmarks-ptf toolbarseparator {display:inline}

  11. Dany_Jim said on November 16, 2011 at 1:59 pm
    Reply

    I have two Firefox Bookmarks Toolbar as is but be two independent of each other as possible. :-k :-k :-k ](*,)

    help me

  12. Steve said on August 25, 2012 at 7:10 pm
    Reply

    My bookmarks toolbar is light blue. I tried changing the background color per the blog post to green. Now the bookmark toolbar is still light blue, with the text areas of the bookmarks dark green.

    Since this was not what I wanted, I tried to get rid of it. I have changed the userchrome.css back to default, but the green does not go away. I have been unable to get rid of it. Help will be greatly appreciated.

    Is there a way to change the entire bar color?

    Thanks,
    Steve

    1. Steve said on August 27, 2012 at 2:41 am
      Reply

      I should have said: I’m in Windows 7 and Firefox 14.0.1

      Steve

    2. Steve said on August 27, 2012 at 2:48 pm
      Reply

      Problem fixed. I read above that the userChrome.css file should be in the profile folder, and I put it there. Apparently Firefox then moved it to the chrome folder, so my additional edits had no effect, since I was still editing the .css file in my profile folder.

      Perhaps the text above should be changed. Now it says:
      “open userchrome.css which should be in your Firefox profile folder”
      change to something like:
      “open userchrome.css which should be in the chrome folder under your Firefox profile folder”

      Steve

  13. John said on March 11, 2013 at 11:08 pm
    Reply

    I don’t have a userchrome.css file in my FF profile folder. Any help?

    1. Martin Brinkmann said on March 12, 2013 at 3:53 am
      Reply

      Simply create it.

      1. John said on March 12, 2013 at 6:35 pm
        Reply

        I found another forum that said that. Thanks, though.

  14. Testuser said on November 19, 2014 at 11:38 pm
    Reply

    Thanks a lot! Can you believe how hard it was to find it through Google how to change the (bookmark) toolbar color? As a sidenote for others, something has changed. Instead of “font-color: blue !important;” you need to type “color: blue !important;”. And you can for example enter “color: #d8dcff !important;”

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

Please note that your comment may not appear immediately after you post it.