This article was written on November 12, 2008 by CyberNet.
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–
- Make sure you have the Stylish extension installed in Firefox.
- 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.
- 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:
- 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.
- 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.
- 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.
- Go to File > Inspect Chrome Document, and choose the first item in the list (it may say something different than what my screenshot does).
- 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.
- 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:
- 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.
Copyright © 2010 CyberNet | CyberNet Forum | Learn Firefox
Related Posts:
Though the HTC Droid Eris soldiers on in user pockets in a variety of guises, Verizon has unsurprisingly decided to disavow future updates for the canceled device. Carrier spokespersons told Computerworld that the Eris won’t see Android 2.2. “We have other options in Android devices, so this is part of the normal evolution of our portfolio,” a spokeswoman reportedly said. While we didn’t really expect Verizon to pull a T-Mobile and support phones that died even before the original G1, we have to imagine there’ll be a few ruffled feathers at that particular choice of words. No one likes to be told to buy a new device in order to get a software update. On the plus side, we expect XDA-developers will get a few new members this week, the better to unleash the potential of future neglected devices for us all.
