How to create your own Firefox theme

With a seemingly endless collection of add-ons, extensions and extras, Firefox is one of the most customisable browsers. But you can take your customisations even further by changing the graphics and adding your own add-ons and extensions.

We'll start by customising the graphics of a typical Firefox skin. Because there are hundreds of graphics files in a typical skin, a complete makeover can take a day or two. Smaller tweaks are much simpler, however, and we'll explore a couple of simple ways to create good-looking graphics.

Themes are supplied as '.jar' files, which are really renamed zip files. You'll find several directories inside: Browser, Communicator, Global, Help and Mozapps. There may also be a directory called Aero that duplicates some of these; effectively it's a separate collection of files and directories that's only used by themes running on Vista. Elsewhere, Browser is the most important directory for customisation because it includes the most obvious graphics and some of the CSS. The Global directory includes CSS files that define the layout of the different browser windows, and Mozapps and Help define the look and feel of the Help dialog and the browser extras, including the Extension Manager and Update Wizard. Customised themes also contain extra files, including 'preview.png' – a preview of the skin.

It's essential to update the two manifest files – 'contents.rdf' and 'install.rdf' – in our new theme, even though we haven't changed anything else. These files pass essential information to Firefox about the contents of the theme, including the name, compatible version numbers, author details and so on. There's a template for contents.rdf here. Copy this to a text editor and then do a global search and replace to change 'My_Theme' to a name that you've chosen yourself.

Similarly, you can find a template for install.rdf here. You can add additional author information here and also define the versions of Firefox that your new theme works with. The one minor complication is that you'll need to fill in a custom UUID in the <em:id> field. Use the UUID generator to generate this and paste it into your edited version of install.rdf.

Customise the theme

Now that you know how to put together the bare bones of a skin, we can start making some creative changes. Look in the browser directory for the files 'toolbar.png' and 'toolbar-small.png'. These include all of the main toolbar buttons arranged in a grid. The reason why there are so many copies is to show the buttons in different states – normal, pressed, disabled, hover and active.

The easiest way to create replacements is by using layers. Photoshop is ideal for this, but tools like GIMP will work too. On one layer, you create the basic shapes. Higher layers can alter their colours: lighting up a button when the user moves their mouse over it or desaturating it if it's disabled, for example. This means that you only have to draw your icons once, and it's much easier to ensure consistency between buttons. Other effects that can work well include giving the buttons a plastic look with a sweep of translucent white around the top and a darker sweep around the base, or boosting the outlines to make them look set into the interface instead of just floating over it.

For now, just do something obvious but simple to see it in action: alter the buttons' hue in your art package of choice. For the time being, resist the urge to change any of the icon sizes. These are controlled by the CSS files packaged with each theme, and strange things will happen if you don't update them properly.

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.

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.