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;}