Hack Firefox to get a minimalist interface for your netbook

Firefox has many advantages over IE: its performance, security, impressive feature list and enormous library of add-ons are just the start.

But one of the biggest plus points is the way you can fundamentally rework the Firefox interface. If you've a netbook, for instance, then you might want to free up screen space, create a cleaner, simpler browser, or just redesign the program to better suit your needs.

And with five minutes work you can do exactly that - it's extremely easy.

The secret lies in editing the key Firefox configuration file, userChrome.css. Most of the browser interface is controlled by its own CSS (cascading style sheets) files, but you can override any of this by adding your own settings to UserChrome.css.

And although a little CSS knowledge will help you figure out how it all works, this isn't really necessary. Most useful tweaks are three or four lines long at best, and it's generally clear what they do even if you've never seen a CSS file in your life.

The process starts with creating a userChrome.css file of your own, as this doesn't exist by default. Go to \Documents and Settings\<username>\ Application Data\Mozilla\Firefox\Profiles\Chrome in Windows XP, \Users\<username>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile_name>\chrome in Vista, and view the default userChrome-example.css file in Notepad for a quick idea of what's possible. Save a copy called userChrome.css and you're ready to try a simple test, just to confirm that everything is working.

If you type an address in the Location bar then Firefox will display an arrow off to the right, the "Go" button, and clicking it will take you to the site. That would be great, if it wasn't for the fact that we always press after typing a URL, and that does exactly the same thing.

So let's make the Go button disappear by closing any browser windows, and entering the following text at the end of the userChrome.css file.

/*Remove the location bar Go button */
#go-button {
display: none !important;
}

Restart Firefox, clear the home page address if there is one, and the button should have gone. (No? Make sure you were editing userChrome.css and not userChrome-example.css, made the changes exactly as shown, and that you closed all Firefox windows before adding the tweak.)

If that's gone well then you can begin to explore what else is on offer. Like hiding the similarly pointless magnifying glass icon in the Search box, for instance.

/*Remove Search box magnifying glass button */
.search-go-button {
display: none !important;
}

And then you can further clean up the Location bar by hiding the Live Feed button, bookmark star (you can always use Ctrl+D instead) and throbber:

/*Remove the location bar Live Feed button */
#feed-button {
display: none !important;
}

/*Remove the location bar Bookmark star */
#star-button {
display: none !important;
}

/*Remove the throbber */
#throbber-box {
display: none !important;
}

Delete one or two of those tips if you don't want to use them all.

There are userChrome.css tweaks that will remove regular toolbar buttons, like Home.

/*Remove the Home button */
#home-button {
display: none;
}

But it's probably easier to remove this by customising the toolbar itself (right-click the toolbar, select Customise). You're better off applying tweaks that are difficult to achieve in any other way. For example, this hides the Back button when there's nothing to go back to.

/*Remove the Back button when it's unnecessary */
#back-button {
display: none !important;
}

You can similarly hide the Forward and Stop buttons when appropriate, rather than greying them out. Just copy the above code into userChrome.css and replace #back with #forward or #stop.

And you can save a few more pixels by removing the forward button's drop-down arrow (right-clicking the button offers the same choice of URLs), and the gap between the URL and Search bars.

/*Remove Forward button's drop down arrow */
#back-forward-dropmarker {
display: none !important;
}

/* Remove splitter between the URL and Search bars */
#urlbar-search-splitter {
display: none !important;
}

Entire menus can be stripped out in a line or two. If you already know all the Edit menu keyboard shortcuts, for instance, then maybe you can do remove it entirely, like this.

/*Remove the Edit menu */
#edit-menu {
display: none !important;
}

You can change the text to hide other menus, so for example replacing #edit with #history will hide the History menu. But beware, this is case-sensitive - use #History-menu, say, and the new command won't work.

It's just as straightforward to strip out individual menu options. Who takes the time to click Tools > Web Search when they can just press Ctrl+K or click in the Search box, for instance? Not us, so we remove it, and the subsequent menu separator, like this.