Get a cool sliding menu bar in Firefox

Let’s face it, Firefox is way too greedy when it comes to screen real estate – in its default configuration anyway:

With the status bar and Windows task bar at the bottom of the screen, you don’t have a lot of screen space left for actually viewing web pages!

In fact, on a standard 1024 x 768 screen, all these bars take up a quarter of your screen height (197 pixels works out to 25.7%).

Consolidating the chrome

Last week, Gina Trapani over at Lifehacker gave out some great tips about consolidating the chrome (the control area or interface) of your Firefox browser. You should go and read that article now if you haven’t already. I’ll wait. Read Lifehacker article >>

If you’ve implemented some of Gina’s tips, your Firefox chrome might look something like this (now with 7.7% more browsing space).

I also use the All-in-One Sidebar extension which collapses to a very thin gray bar and gives me quick access to my History, Bookmarks, and Scrapbook.

Sliding menu bar

The only menu I use on a semi-regular basis is Tools, but I still need access to the other menus once in a while, so I can’t get just rid of them (Gina at Lifehacker showed us how). But if you consider how little I use them, they’re still taking up too much space on my toolbar.

I could use the Tiny Menu extension, which I also discovered at Lifehacker. But then it would take two clicks to get to any menu, and the Menu text looks a bit strange on the toolbar.

I love my Firefox extensions, but I also love efficiency and I won’t install an extension if I can do the same thing in another way. In my search I found this really cool userChrome.css hack. The menus are replaced with a single icon …

… but they are still easily accessible by simply hovering the cursor over the icon, which temporarily unhides the menus …

The code

This is the code that does the trick – but it’s not quite complete (see below).

/* Sliding menu bar - hidden until mouse hover
from [http://userstyles.org/style/show/993] */
#menubar-items {
background-image: url("ImageData") !important;
background-repeat: no-repeat !important;
background-position: 5px center !important;
padding-left: 24px !important;
}
#menubar-items > #main-menubar {
display: none !important;
}
#menubar-items:hover > #main-menubar {
display: -moz-box !important;
}

Add the above code to your userChrome.css file (what? how?), and then replace ImageData (line 4) this way:

1. Click here (this text file is hosted elsewhere because .txt files cannot be uploaded to wordpress.com)
2. Select the whole string in the text file – you can do this by pressing CTRL+A
3. Press CTRL+C
4. Go back to your userChrome.css file
5. Select ImageData in line 4 (nothing more, nothing less)
6. Press CTRL+V

Save your changes to userChrome.css and restart Firefox. You just replaced ImageData with a base-64 data string (containing 1600 characters) that basically encodes the icon for your new menu within your userChrome.css file.

If you don’t like the Firefox icon in your new chrome, you can upload your preferred icon to The data: URI kitchen (be sure to tick base64) and then insert the generated data string into your userChrome.css file in place of the current string.

The trade-off

Unfortunately, the menus are no longer available via keyboard shortcuts (e.g.. ALT+T for the Tools menu), but that shouldn’t be a great loss if you seldom use them anyway.

from Sliding Menubar by LouCypher [userstyles.org]