That’s hacking in the MIT sense of improving via tinkering, not the ZeRo KeWl sense of “hacking the Gibson.” I’ve recently started messing with Firefox’s userchrome.css file, changing what is displayed and how. It turns out this part of Firefox is incredibly powerful if it is less than intuitive/easy to get to. There is an add-on though, ChromEdit Plus, that makes editing the file easy, if it doesn’t make it readily apparent what it can do. On that front, productivity site Lifehacker has a bit of a primer on what editing this file can do for you. Before I start talking about what I do with this thing, I’ll assume you’ve already consolidated Firefox’s chrome. Getting rid of an extra menu bar is always good.
None of this is particularly needed, Firefox is already the best browser out there, and polishing it is nearly the most unnecessary thing you’ll do all day. Its fun though, which is what I’m up to. The first thing we want to do is hide buttons you aren’t using: the back when there is nothing to go back to, the forward when there is nothing forward and stop when nothing is loading. Refresh will stay where it is, there is no need to mess with it. Also ditch the hourglass next to the search bar (you just hit enter by now) and the throbber next to the search box. There’s already a status readout at the bottom of the screen, and it shows more than “A page is loading right now.” You accomplish this by pasting the following lines into your userchrome file.
/* Remove Forward button when there’s nothing to go Forward to */
#forward-button[disabled=”true”] { display: none; }
/* Remove Back button when there’s nothing to go Back to */
#back-button[disabled=”true”] { display: none; }
/* Remove Stop button when there’s nothing to Stop */
#stop-button[disabled=”true”] { display: none; }
/*Remove magnifying glass button from search box*/
.search-go-button-stack { display: none !important; }
/* Eliminate the throbber and its annoying movement: */
#throbber-box { display: none !important; }
Then we get fancy. Lets make the tabs you aren’t using faded out unless you hover over them, then they will be slightly faded. Fancy.
/*:::::::::::::: Inactive & Hovered Tabs Opacity ::::::::::::::*/
#content tab:not([selected=”true”])
{-moz-opacity: 0.5 !important;}
#content tab:not([selected=”true”]):hover
{-moz-opacity: 0.75 !important;}
Now we hide the menu items unless we are hovering over them. Who needs “File” just taking up space?
/*::::::::::::::Invisible Menubar::::::::::::
How to use it: Move all your Navigation Toolbar items (back/forward buttons, address bar, search bar etc. from the navigation toolbar to the Menu Bar, either on the right side or left side of the Menu Items. Now past this code in userChrome.css and restart your browser. You will no longer see the menu items. Now hover at the right/left edge of the menu bar (whichever side the menu items were on) and the menu items will appear. You can now hide the navigation bar and save vertical space
::::::::::::::*/
#menubar-items {
padding-left: 5px !important;
}
#menubar-items > #main-menubar {
margin-left: -9000px !important;
}
#menubar-items:hover > #main-menubar {
margin-left: 0 !important;
}
#menubar-items:hover {background-image: none !important; padding-left:0 !important;}
Finally we get rid of the Edit and Help menus. You use your keys for edit stuff (Copy/paste) and who needs Help, right?
/* Remove the Edit and Help menus
Id’s for all toplevel menus:
file-menu, edit-menu, view-menu, go-menu, bookmarks-menu, tools-menu, helpMenu */
#helpMenu, #edit-menu { display: none !important; }
There is one that I don’t recommend, and that is Auto-hiding your bookmarks. Give it a shot and let me know if it annoys you as much as it annoys me. It would be one thing if it overlapped the page, but whenever your mouse wanders over the bottom of your menu bar, the whole page jumps downward. And it turns out you hover over the hidden bar more often that you might think. I would call it headache inducing that the very best.
At the end of all this, you have one bar with your bookmarks on it, and one bar that is (usually) just your address bar and the search box. This is not recommended for laptops with touchpads or tabletPCs. The Hover mechanic is hard to use with either of those. Honestly I’d love to hide the search box as well, but that might be too much.