CyberNotes: Auto-hide any Firefox Toolbar

Web Browser Wednesday

Having toolbars in a browser can be both frustrating and convenient. On one hand they can often cram a lot of useful functionality into a small area, but on the other hand they eat up precious space that could be used for viewing websites. After all, we know what your browser can look like when you’ve installed a few too many toolbars.

I’ve managed to find a happy medium by automatically hiding the toolbars so that they only appear when my mouse hovers over any other toolbar (ex. the navigation/address bar), and that’s what we’re going to show you today. First we’ll go ahead and demonstrate how to do this with just the bookmarks toolbar, and then we’ll walk you through the steps needed to apply this to just about any Firefox toolbar such as the Google Toolbar.

–Auto-hide a Toolbar–

1. Make sure you have the Stylish extension installed in Firefox.
2. In the bottom-right corner of the Firefox window you should see the Stylish icon sitting in the Status Bar. Click on the icon, and go to Write Style > Blank Style.
   
3. Provide a description for the toolbar that you’re about to auto-hide, such as “Auto-hide the bookmarks toolbar”. In the code box copy and paste the following:

   #PersonalToolbar{display:none;}
#navigator-toolbox:hover > #PersonalToolbar{display:-moz-box;}

   The “PersonalToolbar” ID refers to the bookmarks toolbar, and when all is said and done your Stylish window should look something like this:
   

4. As soon as you hit Save the changes should take effect immediately. The bookmarks toolbar will be out-of-sight, but it will reappear when you hover over another toolbar (like the address/navigation bar).

–Find the ID of a Toolbar–

Now what about the toolbars who’s ID you don’t know? That’s a little trickier, but it won’t take you long to catch on. The toolbar we’re going to use in this half of the demonstration is the Google Toolbar, and we’ll show you step-by-step how you can find its ID so that you can auto-hide it.

1. If you’re using Firefox 3 you’ll need to go and download the DOM Inspector since it’s no longer included with the browser. It is bundled with versions of Firefox prior to version 3.
2. Once it’s downloaded and installed you need to start it by going to Tools > DOM Inspector. This tool will give us the ability to get the ID of any element in the browser, including toolbars.
3. Go to File > Inspect Chrome Document, and choose the first item in the list (it may say something different than what my screenshot does).
   
4. Now in the DOM Inspector click on the icon in the toolbar that has a mouse cursor pointing to a rounded box. Then switch over to the Firefox window and click on an item on the toolbar you want to auto-hide. You should see a red box appear around it as you’re clicking.
   
5. Now if you switch back to the DOM Inspector it will have highlighted the item that you clicked on. We’re looking for the ID of the toolbar itself, and not the item that you clicked on which was likely a button on the toolbar. If you look a little above the item that you clicked on you should see the ID of the toolbar:
   
6. Now we just need to plug that ID into the Stylish script that we provided above. So auto-hiding the Google Toolbar would look something like this:

   #gtbToolbar{display:none;}
#navigator-toolbox:hover > #gtbToolbar{display:-moz-box;}

That’s all there is to it. It may take a little while for you to get the hang of using the DOM Inspector, but it will be worth it.

–Overview–

Now the power is in your hands to auto-hide as many toolbars as you want. This trick will also work for hiding multiple toolbars simultaneously, and they will all appear at the same time when you hover over the navigation bar.

Also, feel free to leave the ID’s of any toolbars you find in the comments below so that you might save other people a little bit of trouble.

 This is just one of the hundreds of CyberNotes we have done. You can find more of them by visiting our CyberNotes category, or by subscribing to our CyberNotes feed. We also have a full feed available if you want to receive all of our articles in your reader!

Tags: CyberNotes, Firefox, Software, Browser, Firefox Extensions, How To, Screenshots, Tips And Tricks

Related Posts:

• Official AOL Toolbar Beta Released For Firefox
• Download The NewsGator Toolbar For IE And Firefox
• Yahoo! Releases New Toolbar For IE And Firefox — IE Has Tabs!
• Google Releases Firefox Toolbar Version 2
• Google Toolbar 3 Beta For Firefox: Bookmarks, Documents, And More