Multiple row toolbar in Firefox

I had been trying to turn my single-row bookmarks toolbar in Firefox into a multiple row. I wanted to basically expand the toolbar vertically. Thanks to lifehacker, I found out how.

You need to create userChrome.css by copying the userChrome.css under your profiles directory.

/* Multi-row bookmarks toolbar */
#bookmarks-ptf {display:block}
#bookmarks-ptf toolbarseparator { display:inline }

Voila, your bookmarks folder now has multiple rows!

I did have some minor glitches, though. It didn’t work with any other theme other than the default theme. Also, the first entry on a new row had to be a bookmark and not a bookmark folder. If I tried to add a bookmark folder at the beginning of the row, it went back to its old style of single row and “>>” which would conceal the rest of the folders.

Update:

Chris has posted the code which works with Firefox 2.0.

/* Multi-row bookmarks toolbar */
#bookmarks-ptf {display:block !important; }
#bookmarks-ptf toolbarseparator {display:inline !important; }
#bookmarks-ptf .bookmark-item { visibility: visible !important;}
#overflow-padder { width: auto !important; } /* this controls the
length of the bookmarks */
#bookmarks-chevron { display: none !important; }

Update 2:

John tells us how to control the maximum height of the toolbar.

#PersonalToolbar {max-height:999px !important;}

Replace 999 with the desired height and you are all set.

Update 3:

Some people found Meri’s code really helpful. See if this works for you.


#bookmarks-ptf {display:block; line-height:25px; }
#bookmarks-ptf toolbarbutton { font-family: Verdana !important; font-size: 11px !important; color: #5D6469 !important; margin: 0 1px !important; }
#bookmarks-ptf toolbarbutton:hover {height:15px; color: maroon !important; }
#bookmarks-ptf toolbarseparator { display:inline }

Update 4:

My multiple row toolbar broke after I installed Firefox 3.0. None of the above tricks worked. Finally I found the below code on this site. The code sets the toolbar height to 35px which gave me a scrollbar. I changed it to 50px and I like this better without the scrollbar.


/* Multi-row bookmarks toolbar for Fx3b5pre*/
#bookmarksBarContent
{display:block !important;}
.places-toolbar-items
{display:block !important;
height: 35px !important; /* I changed this to 50px */
overflow-y:auto !important;}
#bookmarksBarContent toolbarseparator
{display:inline !important;}
#bookmarksBarContent .bookmark-item
{visibility: visible !important;}
.chevron {height: 0px !important;}

Advertisements

56 thoughts on “Multiple row toolbar in Firefox

  1. maria teresa says:

    It doesn’t work!

  2. generally says:

    You mean you can’t see multiple toolbars? Can you give me more details?

  3. Carsten Dreesbach says:

    It works for me when Firefox 2.0 first starts up, but then it reverts to the single line again after other plugins and toolbars are loaded. I think I’ll try disabling some so I can see whether it’s any of the other extensions doing it.

  4. Kris says:

    doesn’t work for me either, same result as carsten ^

  5. generally says:

    Carsten and Kris,

    I too had the same problem initially. I could see the multiple row for a fraction of a second and then it would disappear. Try these and let me know if it works:

    1. If the last entry on the first row is a bookmark folder, replace it with a bookmark. Drag and drop any page on the toolbar directly instead of dropping it on a folder.

    2. If the first entry of the second row (and later rows) is a folder, replace that with a bookmark. Same rule as above. Drag and drop a bookmark on the toolbar directly and then move it around to wherever you want.

    I am sure this will work. Let me know how it goes. You can mail me: ivy.andrews at gmail.com. Replace at with @

  6. Kris says:

    i found out my problem was the default firefox skin, i downloaded a custom skin/theme and all is well….

  7. Icestorm says:

    The Carsten and Kris’ problem can be solved deleting bookmarks folder 😀

  8. generally says:

    Kris: That’s funny. Mine wouldn’t work with any other theme but the default one!

    Icestorm: What do you mean deleting bookmarks folder? I didn’t understand.

  9. h0mi says:

    I have the same issue; when I closed tabs or moved/added book marks, the # of rows displayed would shift from 1 row to multiple, to not quite all of them and back, depending on the specific action & how many were on display at the moment. Right now I have 10 tabs open and only 1 row is showing. If I delete a bookmark, it will show all the rows but revert to 1 row (and I’m using the defailt skin for 2.0)

  10. Will says:

    I don’t have a userChrome.css.
    Should I create it? Where?

  11. Will says:

    Oh right. Under the “Documents and Settings” directory by copying the userChrome-example.css.
    Done it — it works!!
    Thanks.

  12. Mark says:

    I couldn’t get this to work either. I placed it in my userChrome.css file and restarted; made sure there were no bookmark folders; disabled all other extensions. Any other ideas?

  13. metal321 says:

    This hack stopped working for me with the Orbit Blue theme. I switched to the Orbit Yellow theme and now it is working again.

  14. DooMMasteR says:

    this tweak works just fine 😉

  15. Kandah says:

    Doesnt work for me either even though I dont have any folders of any kind.

  16. Meri says:

    I’ve worked a little bit on the code to fit it to my needs. Originall look was a bit messy so I added few lines. Take a look

    #bookmarks-ptf {display:block; line-height:25px; }
    #bookmarks-ptf toolbarbutton { font-family: Verdana !important; font-size: 11px !important; color: #5D6469 !important; margin: 0 1px !important; }
    #bookmarks-ptf toolbarbutton:hover {height:15px; color: maroon !important; }
    #bookmarks-ptf toolbarseparator { display:inline }

    it’s just some basic changes, when I find some time I’ll try and optimize it even more. I dont like these containers that show on hover. They’ll be the first ones to cancel

  17. Will says:

    I have had this working for some time, but if I rearrange links, it (sometimes) jumps back to only displaying a single row 😦

    Aren’t there any add-ons that can do this properly?

  18. Chris says:

    For people with FF 2.0.0.4 This code should work if the other doesnt:

    /* Multi-row bookmarks toolbar */
    #bookmarks-ptf {display:block !important; }
    #bookmarks-ptf toolbarseparator {display:inline !important; }
    #bookmarks-ptf .bookmark-item { visibility: visible !important;}
    #overflow-padder { width: auto !important; } /* this controls the
    length of the bookmarks */
    #bookmarks-chevron { display: none !important; }

  19. generally says:

    Thanks for the help, Chris. I will update the post with this.

  20. John says:

    an important line nobody’s mentioned yet is to control the max height of the PersonalToolbar

    #PersonalToolbar {max-height:999px !important;}

    in this case ‘999’ is just an example, setting this value to whatever you need will assist in the bookmarks toolbar showing multiple rows.

    My screen is 1600×1200, i have aabout 1000 bookmarks in the bookmarks toolbar sorted into directories & sub-directories, it’s 3 rows high and provides for an excellent navigation system…

  21. generally says:

    Thanks for the comment, John. I will update the post with your inputs.

  22. Frico says:

    Really good job, but just one things to do …!
    What about view this rows whit full screen (F11).
    Thanks a lot for suggest.

  23. […] dir das eventuell weiter? Wusste bisher garnicht dass das geht, mal direkt selber probieren […]

  24. Amanda says:

    This definitely goes in and out for me, too, and I can’t live without two rows!! I don’t have any bookmark folders in my toolbar. It seems to happen when I delete bookmarks from the toolbar (instead of the Organize Bookmarks). And then I never know how to get it back, but it usually comes back. Eventually.

    It’s gone now again 😦 but I will put new code in and see what happens.

    I’m running Firefox 2.0.0.6 on a Mac and I have the Pimpzilla theme installed and enabled.

  25. Amanda says:

    Ooh, Meri’s code is awesome — it brought my two rows back, and I love the look. I took a pixel off the row height and removed the colors and now I’m happy as a clam in cream cheese.

  26. anaamica says:

    Good to know you found what you wanted, Amanda.

  27. Serena says:

    The first one works best for me. I don’t know if you all have noticed but when I minimize my screen it cuts off the scroll bar and a bunch of other things because of the two rows. If someone could figure out how to fix that that would be awesome.

    The first one is the only one that doesn’t cut off the screen when minimized but the double toolbar does disapear if you make it too small.

  28. […] /* Multi-row bookmarks toolbar */ #bookmarks-ptf {display:block !important; } #bookmarks-ptf toolbarseparator {display:inline !important; } #bookmarks-ptf .bookmark-item { visibility: visible !important;} #overflow-padder { width: auto !important; } /* this controls the length of the bookmarks */ #bookmarks-chevron { display: none !important; } Multiple row toolbar in Firefox Codelicious […]

  29. debugman says:

    Great, man! thanx 🙂

  30. […] Multi-Row Bookmarks Toolbar […]

  31. smileylich says:

    I couldn’t get it to work in Vista, until I realized the userChrome.css doesn’t go in the same place as XP (by default):

    (In Vista:)
    C:\users\[username]\AppData\Roaming\Mozilla\Firefox\profiles\[profilecode].default\chrome

    Note that “AppData” and “Roaming” are different than XP’s location.

  32. Hugh says:

    I’m having the same problem Will had. Firefox opens with my bookmarks in the second row, but as soon as I resize the window it reverts back to it’s normal chevron ways.

    I tried the Tweak3D “without glitching” fix and when reducing the width of the window, my scrollbar disappears and the contents of the site I’m visiting won’t auto fit.

  33. inky says:

    I was having the overflow (aka chevron) problem too. Chris’ update (first “Update”) solved it. Working great now!

  34. gamma-y says:

    I actually prefer to use the Google Bookmarks. Makes my bookmarks totally portable and accessible from anywhere. The Google Toolbar on Firefox and IE makes it very easy to add bookmarks. The tagging feature is very useful and easy to find. Have you tried using Google Bookmarks?

  35. anaamica says:

    No, I haven’t used Google Bookmarks. I tried del.icio.us, but prefer my ‘local’ bookmarks better. I use only one machine for serious browsing and never felt the need to have a ‘global’ bookmarks.

    But, yeah, for people who browse multiple machines, I am sure Google Bookmarks will be very useful.

  36. adin says:

    Anyone tweak this for FF3 yet? I’ve tried the basic mods to the script (substituting “personal-toolbar”), but I have yet to get it to work.

  37. […] remember quite where the instructions where but this may be a good starting point : generally.wordpress.com/2006/08/31/multiple-row-toolbar-i… Share and Enjoy: These icons link to social bookmarking sites where readers can share and […]

  38. Mikemur says:

    I use the absolutetoolbar from http://www.absolutetoolbar.com. It does show bookmarks on multiple lines and also let you do direct search on them.

  39. Anaamica says:

    Thanks for the link Mike. I will check it out.

  40. Nathon Gunn says:

    I had the appearing/disappearing issue – went through the code with a fine-tooth comb and found a missing }

    Just something to check.

  41. Micke Nilsson says:

    Install “stylish” extension and load this http://userstyles.org/styles/5687 into it and it will work in ff b4

  42. Matevz Oman says:

    I used Micke Nilsson’s “stylish” extension and loaded the code from the link, but it didn’t work (all the bookmarks simply disappeared).

    then I tried manually inputing Chris’s code via “stylish” extension and it works like a charm.

    I am using Firefox version 2.0.0.13.

    Thank you all

  43. Fayah says:

    for me only works Chris’s code, also via stylish ext., and I am using Firefox/2.0.0.14. Thanks a lot! 🙂

  44. DaVe says:

    It works fine @Firefox 3.0 but all my Seperators are gone and I can’t get them back…

    But that’s not very bad… Although it would be fine if someone would make it work!

    Thx for this nice codes

    mfG

  45. abhay says:

    I cannot get it working in firefox 3.0. What am I doing wrong? I had two files under chrome. 1) userChrome-example 2) userContent-example.

    I copied the fiel 1) and renamed it to userChrome. I then added the above two lines of code at the end of the file. Restarted my firefox and I dont see extended toolbar.

  46. Anaamica says:

    Abhay, just to confirm, you are talking about the chrome folder under C:\Documents and Settings\[username]\Application Data\Mozilla\Firefox\Profiles\[profile]\ correct?

    Did you try the code under Update 4? That worked for me.

  47. sai srikanth says:

    Can I place two toolbars for example google toolbar and roboform toolbar in the same row? so that my viewable area on a webpage increases. Please help

  48. God-Zilla says:

    the code worked fine for me in Firefox 3, i used height 45 pixels and it looks perfect! now i’m just wondering if instead of having the scroll bar, is it possible to have the arrows like it had before? To clarify how it used to be, when you click on the arrow, a popup box opens showing the rest of your bookmarks.

  49. […] Credit goes to generally.wordpress.com […]

  50. Super-Buddhi says:

    Update 4 worked for me!!! Windows XP, Firefox 3.0.5.
    Thanks!!!!

  51. […] Multiple row toolbar in Firefox « Codelicious.After seeing this, I decided I’d write some simpler instructions for doing this in FireFox for OSX.  This is kindof a rehash of the content, but I think it was more geared towards a more computer-savvy user (it didn’t include the path to the default chrome template, it doesn’t indicate what to open it in, etc). […]

  52. Hey, you have a great blog here! I’m definitely going to bookmark you! Thank you for your info.And this is bookmarkth.com site. It pretty much covers DoFollow Social Bookmark related stuff.

    Thank.

  53. Fossilla says:

    Neat thing!
    Though: if I customize toolbars by dragging bookmark toolbar next to menu, this script unhides what was the old place for the bookmarks toolbar! 🙂

  54. Step Machine says:

    Be not angry that you cannot create others as you wish them to be, since you cannot make tracks yourself as you hope to be

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: