Auto-hide a Toolbar & Find the ID of a 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 theGoogle 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.