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 {Enter} 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{disabled="true"} {
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.

/* Remove Web Search from Tools Menu */
menuitem{label="Web Search"} {
display: none;
}

menuitem{label="Web Search"} + menuseparator {
display: none;
}

We also like to remove the minimum width restriction on the sidebar, so you can have it as slim as you like.

/* remove sidebar minimum width restriction */
#sidebar {
min-width: none !important; min-width: 0px !important;
}

Some sites provide a userChrome.css tweak to remove the close button from inactive tabs, but that's another setting that's easier to change in another way. Enter about:config in the Location bar, filter on closebuttons and set browser.tabs.closebuttons to zero, or 3 if you'd prefer a single close button on the right hand side.

UserChrome.css is the perfect way to change how your tabs are displayed, though, and this can be particularly useful. Open a lot of tabs and the active one will almost vanish amongst the crowd, but if you give it a minimum width of, say, 180 pixels then it'll still stand out. Here we've helped out by also hiding the icon for inactive tabs, changing their colour and making them transparent. Remove or alter these additional lines if you don't like the combined effect.

/* Set a minimum width for the currently selected tab */
#content tab{selected="true"} {
min-width: 180px !important;
}

/* Hide favicon for inactive tabs */
tab:not({selected="true"}) .tab-icon {
display: none !important;
}

/* Change the colour of inactive tabs */
tab:not({selected="true"}) {
background-color: rgb(192,192,192) !important;
color: blue !important;
}

/* Make inactive tabs transparent */
#content tab:not({selected="true"}) {
-moz-opacity: 0.66 !important;
}

And you can even move complete interface elements around the screen. How about relocating the sidebar to the right side of the window, for instance, and displaying the tab bar at the bottom? Here's the code you need.

/* Place the sidebar on the right edge of the window */
window > hbox {
direction:rtl; } window > hbox > * {
direction:ltr;
}

/* Display the Tab bar at the bottom */
#content > tabbox
{
-moz-box-direction: reverse !important;
}

Feel free to experiment with these, and other settings (Google for "userchrome.css" and you'll find plenty). If something does ever go wrong, just delete your last change, or rename the userChrome.css file and Firefox will return to its default settings.