Auto-hide, Favicons only, Multirow Bookmarks Toolbar for Firefox

Bookmarks Toolbar

In Firefox, as well as other browsers, the bookmarks toolbar is very handy and useful when you use bookmarking in your browsers! A drawback of the bookmarks toolbar is that by default, it’s very limited in size and style. In Firefox, the bookmarks toolbar is very much customizable.


The issue arises when you’ve got plenty of bookmarks on your bookmarks toolbar and the toolbar gets filled! Well, you get a small arrow to click-on to view remaining bookmarks, which is basically inconvenient!



First solution is to reduce the bookmarks’ names manually by editing them one by one and using smaller names. For example, instead of “Gibni”, putting simply “G” as your bookmark’s name.


Second solution is to remove the text and make it available on mouse over. This is accomplished with a simple add-on called Smart Bookmarks Bar, but what if we don’t want more install more add-ons on Firefox and keep it light?! I’ll come to this later…


Third solution is to use the Multirow Bookmarks Toolbar add-on for firefox, which splits your bookmarks toolbar into multiple rows, making all of them visible. But now we have two issues, firstly, we are adding and add-on, and secondly we’re loosing page view area, i.e. the firefox’s header becomes bigger! Like the screenshot below:


Fourth solution: Use both Multirow Bookmarks Toolbar add-on and Smart Bookmarks Bar add-on together and keep the toolbar to the minimum size possible. But big issue here, we are adding TWO add-ons!


Fifth solution is to add the Bookmark Autohider add-on which will hide the Bookmarks toolbar and show it on mouse over. Using this great add-on with our two previous ones, the results are great, but we’ve got THREE add-ons here!



Now comes MY solution to this:


Use userChrome.css to customize the Bookmarks Toolbar in Firefox

I’ve gathered techniques used in the three great add-ons mentioned above to make my own userChrome.css and have an “Auto-hide, Favicons only, Multirow Bookmarks Toolbar” for Firefox!


You can download my userChrome.css file from the Downloads Page.

Here’s a snippet of userChrome.css:

/* Pop-up bookmarks toolbar*/
#navigator-toolbox:hover > #PersonalToolbar{
visibility: visible !important;
}

#PersonalToolbar{
visibility: collapse !important;
}

/* FF36 OK Show Only Bookmars Icons in Bookmarks Toolbar
and show text on mouse over */
/* Folder Names Hiding */
#bookmarks-ptf toolbarbutton.bookmark-item[container="true"] .toolbarbutton-text,
#personal-bookmarks toolbarbutton.bookmark-item[container="true"] .toolbarbutton-text,
#personal-bookmarks toolbarbutton.bookmark-item[container="true"] .toolbarbutton-text-shadow{
display: none !important; /*Set "none" to "block" to display Folder Names. */
}
/* Names Hiding */
#bookmarks-ptf toolbarbutton.bookmark-item .toolbarbutton-text,
#personal-bookmarks toolbarbutton.bookmark-item .toolbarbutton-text,
#personal-bookmarks toolbarbutton.bookmark-item .toolbarbutton-text-shadow {
display: none !important;
}

/* Text display */
#bookmarks-ptf toolbarbutton.bookmark-item:hover .toolbarbutton-text,
#bookmarks-ptf toolbarbutton.bookmark-item[image]:not([image=""]):not([container="true"]):hover .toolbarbutton-text,
#bookmarks-ptf toolbarbutton.bookmark-item[container="true"]:hover .toolbarbutton-text,
#bookmarks-ptf toolbarbutton.bookmark-item[image=""]:not([container="true"]):hover .toolbarbutton-text,
#personal-bookmarks toolbarbutton.bookmark-item:hover .toolbarbutton-text,
#personal-bookmarks toolbarbutton.bookmark-item[image]:not([image=""]):not([container="true"]):hover .toolbarbutton-text,
#personal-bookmarks toolbarbutton.bookmark-item[container="true"]:hover .toolbarbutton-text,
#personal-bookmarks toolbarbutton.bookmark-item:not([image]):not([container="true"]):hover .toolbarbutton-text,
#personal-bookmarks toolbarbutton.bookmark-item:hover .toolbarbutton-text-shadow,
#personal-bookmarks toolbarbutton.bookmark-item[image]:not([image=""]):not([container="true"]):hover .toolbarbutton-text-shadow,
#personal-bookmarks toolbarbutton.bookmark-item[container="true"]:hover .toolbarbutton-text-shadow,
#personal-bookmarks toolbarbutton.bookmark-item:not([image]):not([container="true"]):hover .toolbarbutton-text-shadow {
display: block !important;
}
/*Items Spacing*/
#bookmarks-ptf toolbarbutton.bookmark-item,
#personal-bookmarks toolbarbutton.bookmark-item {
padding-left: 1px !important;
padding-right: 1px !important;
}

/* FF 36 OK Bookmarks toolbar color */
#personal-bookmarks {
/* RGBa with 0.6 opacity */
background-color: rgba(255, 255, 255, 0.7);
}

/* FF 36 OK Multirow Bookmarks Toolbar. */
#personal-bookmarks{
display:block;

}

/*Download userChrome.css from http://www.gibni.com/downloads */



You need to place it in your Firefox’s profile folder > chrome folder.


You can customize some options in the userChrome.css file if you need, stuff is easy to understand, and well commented.


A small issue here is the mouse over auto-show is too sensitive and I had to make the Tabs strip a bit taller by increasing its height.

All suggestions and tweaks are welcome!