How to create your own Firefox theme

Simple ways to personalise your browser

Repack the file back into a zip file but change the extension to '.jar'. Install it like any other skin and you should see your modified toolbar. If you want to, you can now rework the other toolbar buttons. Colour changes are fast, simple and rewarding. Because button design is difficult if you're not artistic, another quick cheat is to download a selection of skins and assemble a custom collection of other people's button designs into a unique toolbar of your own. This is fine as long as you don't distribute the toolbar.

Article continues below

But what about the CSS? There's a lot of it, but a quick way to find the links between the various image files and the CSS placeholders that define where they appear in the browser frame is to do a global search. If you edit the 'browser.css' file, it's easy to see where the toolbar graphics fit in, and it's also easy to change the size and position.

You can take the CSS much further by changing background colours and other basics, but this is where updates can become more complicated. To create a coherent look you'd need to change all of the elements, which would take a while. It's easier to use a supporting add-on like AnyColor to work out a colour scheme and then work on the detailed graphics later.

Customising the code

So what about customising the code? Nothing matches the satisfaction of getting your hands dirty, but there are good reasons not to – not least of which is that the build process isn't straightforward. For Windows developers, the instructions on the Simple Build page don't work. The build system uses an awkward combination of Gnu Make and MS compiler tools, and both of these environments have severe dependency issues.

The Windows dependencies at least seem to have been listed properly, so Visual Studio Express should give you all the libraries you need, but on the Gnu side you'll need a full version of Gnu for Windows that includes MinGW and MSYS and extra libraries such as GTK+ before the Configure tool will spit out a working collection of Make files.

If you look at the Linux Build prerequisites, the list of extras you need for Windows is similar. You can find most of the extra DLLs here.

Copy the binaries either to your Windows System32 folder or the main Binfolder in the Mozilla Build directory. The rest will need to be installed by hand. Where Windows binaries aren't available, build them from scratch.

A far easier alternative is to use Greasemonkey, an extension that adds customisable scripts to specific web pages. If you wanted to, you could mash up Google's services so that your Mail and Calendar are on the same page. A good Greasemonkey script can add features to a site long before its original creators get round to it, and integrate them so well that onlookers won't realise that there's anything extra going on.

To learn Greasemonkey scripting, take a look at the code for the free scripts available here. Platypus is a WYSIWYG front end (for an up-to-date version install it from the Firefox add-on pages) that lets you selectively remove or modify elements from pages through a point-click menu full of options. It's easy to remove specific ads and logos, and more skilful coding would make it possible to killfile posts from certain posters in an online forum. It's a good idea to use Platypus for crude selection as a front-end processor, and then combine it with more detailed Greasemonkey coding for more sophisticated effects.


First published in PC Plus issue 278

Now read 8 hacks to make Firefox ridiculously fast

Sign up for the free weekly TechRadar newsletter
Get tech news delivered straight to your inbox. Register for the free TechRadar newsletter and stay on top of the week's biggest stories and product releases. Sign up at

Follow TechRadar on Twitter