Preparing Your Theme

To create a theme, you have several tricks of the trade that you can employ to help you get started. Some of these are mandatory, and some are just highly recommended. The next few sections give you the basic setup for a new theme.

One thing you will do is to copy an existing theme. You could copy virtually any theme, but one of the best starting points is the Firefox default theme that is installed with Firefox.

Open your favorite text editor. WordPad works for text editing, but there are better choices. A graphics editor is necessary, as well. The graphics editor must support transparent background graphics (which rules out Windows' Paint program). A visit to http://www.sourceforge.net will lead to many examples of both text and graphics editors.

If you did not install the DOM Inspector when you installed Firefox, do so now (installing Firefox again and selecting the DOM Inspector is the easiest way to do this). It is a useful tool for theme developers.

Creating the Working Theme

First, if you are using a theme other than the default theme, start Firefox and select the Firefox (default) theme. Then close Firefox, restart it, and ensure that the default theme is active.

Themes are contained in JAR files when they are distributed. However, that format is awkward to use while developing and testing your theme. Instead, a theme can be created in a directory structure using folders and files.

To create this working folder, you will need a JAR file unpacker. Three programs that will do the job are TUGZip, Ultimate Zip, and WinZip. Windows XP's built-in Zip file functionality does not seem to work with JAR files.

Firefox's themes are stored in the Firefox installation folder (usually program files\mozilla firefox\chrome). In this folder you will find at least one JAR file, named classic.jar. This is the default theme for Firefox. There might be more JAR files in the chrome folder, especially if you have installed a number of themes already.

After opening the classic.jar file, create a new folder in Firefox's chrome folder. I suggest naming it classic, at least for your first theme.

Now extract all the files in the classic.jar file into the classic folder. Make sure you keep the JAR file's folder/directory structure. This will create a number of files and subfolders under your classic folder.

Tip

If possible, you should start developing themes with a new installation of Firefox and a new profile. Doing this keeps your Firefox installation as simple and uncluttered as possible. After you have more experience developing themes, you can consider using an installation of Firefox that is more customized.

After the theme has been extracted, close your unpacking program (WinZip, TUGZip, or whatever you used). This is important: Copy the classic folder (with all of its contents) to a backup location. I chose the name classic_backup and placed that backup folder in my Firefox chrome folder. This leaves you with a copy of the original files should you irreparably damage any file.

This leaves you with classic.jar, a new folder (with files and subfolders) called classic, and a backup of the classic folder called classic_backup.

Next, make a backup copy of the file named installed-chrome.txt. You will be modifying the original file, and after you want to restore the original settings, you will have a copy for that purpose.

Edit your installed-chrome.txt file using a good text editor. I use WordPad, but if you have a favorite text based editor, use it.

With the installed-chrome.txt file open, search for the string classic.jar. You will find about five occurrences of this filename in the installed-chrome.txt file. Each occurrence needs to be changed. (A safety check is that each of these lines should start with the word skin.)

Originally the line that must be changed was

skin,install,url,jar:resource:/chrome/classic.jar!/skin/classic/browser/

You should change each line to read:

skin,install,url,resource:/chrome/classic/skin/classic/browser/

There are two changes to make in each line. First, locate the characters jar:resource: and change them to read resource:. That means you must delete the jar: part. Next, find classic.jar! and change that to classic (or whatever folder you extracted the files and folders to earlier). In this edit, you are deleting .jar! don't forget to delete that exclamation point, too. This change tells Firefox that the theme won't be packaged in a JAR file.

After you have changed all the lines that contain classic.jar as described, save this file and close your editor.

Finally, test your work. Open Firefox, and it should look exactly like it did before. If you notice differences, you have made an error; close Firefox and find what went wrong.

Configuring Firefox for Theme Development

Firefox is almost ready to develop themes; only a few more changes are necessary. Start Firefox and open about:config. You need to disable the XUL cache so that your changes will become immediately visible without having to restart Firefox. The XUL cache is used to cache the user interface, improving performance because Firefox does not have to deal with the JAR file each time the theme is needed.

The preference you need to set is

nglayout.debug.disable_xul_cache

Set this preference to TRue. (Don't forget to reset it to false when you're finished creating your theme; otherwise, Firefox performance will suffer.)

One final setup is to ensure that there is no userChrome.css file. Anything in userChrome will override the theme's settings. You do not want settings in userChrome.css to affect the results of your theme development!

Tip

Check your user.js file and make sure there is not a setting for nglayout.debug.disable_xul_cache that sets the preference to false. This would override any other settings of this preference.

Graphics Images

Each theme consists of many Cascading Style Sheet settings that control size, color, shape, font, and so forth. Also set in CSS are the theme's background and button images.

Menu, Toolbar, and Dialog Box Backgrounds

Background images generally are one of the following:

• Browser background

• Toolbar/menu background

• Dialog box header background

This list is not exhaustive, and you will probably use the same background for several purposes.

The theme I am working on will give a wooden appearance to Firefox. To start with, I took several pieces of wood and created digital images of them. Using a graphics editor, I resized each image to fit the needs of my theme. When finished, I had created four images. Eventually, I will probably create another four or five wood-based images.

Button Images

Button images need to be created for both small buttons and large buttons. The background needs to be transparent so the toolbar background will show through the button as needed. Buttons that are disabled can be made with a transparent background and a semitransparent face, so that only a ghost of the button image shows.

Initially start with the existing button image files. Each image file usually contains many button images, which are then indexed for display. Figure 15.1 shows a sample button image.

Figure 15.1. Space for four rows of 15 images exist in this image, but the bottom row is not fully utilized.