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
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.
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.
--------------------------------------------------------
If you like this post please Bookmark it and comment bellow. To recieve new updates and other posts like this please subscribe via RSS or via Email.
Recent Articles:
Posts
