Problem solve Get help with specific problems with your technologies, process and projects.

Re-branding Mozilla

The Web browsers made by the Mozilla Foundation are highly customizable, either on Linux, Unix or Windows. In this tip, Nigel McFarlane shows you how to do some customization.

The Web browsers made by the Mozilla Foundation are highly customizable, either on Linux, Unix or Windows. In this tip I'll show you how to change the animated waiting for download icon, officially known as a throbber. It's the icon in the top right corner of either the Firefox browser or the Mozilla Application Suite browser.

All Mozilla technology has the same core technology, and that includes a chrome directory in the install area. Chrome is a set of human-readable, plain text, interpreted files that are used to specify the user interface of the application. Most differences between Mozilla's Firefox browser and the Application Suite's browser are differences in chrome. Think of the chrome as Mozilla's variation on Perl's CPAN archive, PHP's PEAR archive, or Java's JAR system.

If your Mozilla is installed in /local/mozilla, then the chrome directory is in /local/mozilla/chrome. In the case of Firefox, there's a file in there called "classic.jar." This is the look and feel for the Firefox browser when viewed with the standard Firefox theme. There's an equivalent file called "modern.jar," which aims to support the modern theme, but stick with classic.jar for now. The classic.jar file is in ZIP format, so its contents can be viewed with a tool like "unzip" (try the -l option to avoid expanding the file in-place) or the more graphical "file-roller." Work on a copy of the file, not the original.

To change the throbber, just note that this JAR file contains files named Throbber.gif and Throbber-small.gif (beware that these names might change for the final Firefox release). These are animated GIF files, just like the ones you might create for the Web with a tool like JDraw or the GIMP. The equivalent .png files are the static, non-animated versions. They're used when nothing is being downloaded. All you have to do to change the throbber icon is replace these .gif files in the JAR file with new ones of your own design, put the file back, and restart the browser.

In the case of the Mozilla Application Suite, the throbber files are still in classic.jar, but they're called throbber-anim.gif and throbber16-anim.gif. Otherwise it's all the same.

If you want to go further, then you can. For example, Firefox raises an "About Firefox" dialog box if the "About" option is chosen from the Help menu. You can change the content of this dialog as well. In the Firefox chrome directory, there's a file called browser.jar. Unzip a copy of that, and you'll be able to see the aboutDialog.xul file. That file's content is written in Mozilla's XUL language, and specifies the whole of the dialog box. Just modify it (carefully) and put it back. There's plenty of information about XUL on the Web and in books.

In fact, Mozilla applications are highly customizable in this way. This is exactly how different themes are developed for browsers, and it is how different browsers are developed. Once you open the chrome, the world of custom GUI design is yours to enjoy.

Nigel McFarlane is an open source software analyst and technologist with a broad background in technology and software engineering. He has an extensive programming background and degrees in computer science and physics. His latest book is Rapid Application Development with Mozilla from Prentice Hall PTR.

Dig Deeper on Linux servers

Start the conversation

Send me notifications when other members comment.

Please create a username to comment.