Creating Themes

At first, creating a theme might seem to be a daunting task, but it is really not that difficult. To create themes, you need to know about a few standards such as CSS, be able to create icons and other graphics images, and know some basics of XML.

I will not try to minimize the amount of work it takes to create a theme. It is not a trivial, do-it-in-an-afternoon type of job. In fact, it could take weeks or months before your theme is complete enough for distribution. But it can be done others do it, and so can you.

I do not recommend creating themes from scratch, especially for your first theme. Instead, you should start with Firefox's existing classic theme. You do the preparation as described previously in "Configuring Firefox for Theme Development," and start by modifying simple aspects of the theme. This will give you some experience in how the parts of the theme relate to each other.

The classic theme has the following folder structure:

• skin The skin folder is the folder that serves as the theme's container. There is one folder in skin, named classic.

• skin\classic This folder contains four subfolders: browser, communicator, global, and mozapps. The most important folder for your theme is browser.

• skin\classic\browser Contained in this folder are the main CSS files, some image files, and two subfolders (bookmarks and pref).

• skin\classic\browser\bookmarks This contains theme elements dealing specifically with bookmarks. You will probably find two CSS files and the bookmark's toolbar button image file.

• skin\classic\browser\pref The pref folder holds style objects for the Tools, Options dialog box, buttons for the major categories (General, Privacy, Web Features, Downloads, and Advanced), and the pref.css file.

• skin\classic\communicator This folder contains a subfolder named cookie and two other files.

• skin\classic\communicator\cookie In cookie are toolbar images for cookie management and a taskbar button image.

• skin\classic\global The global folder is the heart and soul of a Firefox theme. Virtually everything that might be set is done in global. It contains 11 subfolders (listed next) and many image and CSS files.

• skin\classic\global\alerts In this folder is the alert.css file. This CSS file describes the alert box.

• skin\classic\global\arrow This contains up arrows, down arrows, left arrows, right arrows, and arrows of many styles. These are all image files; there are no CSS files in this folder.

• skin\classic\global\checkbox Items (typically menu items) that are checked are marked with the check image files contained in this subfolder.

• skin\classic\global\console These items are used by the JavaScript console. This folder typically has a console.css file and some image files.

• skin\classic\global\icons Contained in this folder are various icons and images that are used for warnings, and general control buttons (such as the Close button).

• skin\classic\global\menu This folder contains menu item related images. There can be toolbar-related items here as well.

• skin\classic\global\radio Radio button (sometimes called option buttons) images for checked and not checked are located here.

• skin\classic\global\scrollbar This has scrollbar images and usually one image for the slider.

• skin\classic\global\throbber Contains throbber images, a minimum of a small throbber image. (The throbber is the image at the right end of the menu bar.)

• skin\classic\global\toolbar This folder might contain several toolbar-related, special-purpose images.

• skin\classic\global\tree Contains images used with tree views, such as in the DOM Inspector's window lists.

• skin\classic\mozapps The mozapps folder holds about eight subfolders, described next. There might also be a contents.rdf file.

• skin\classic\mozapps\downloads Contains images, CSS files, and other files related to downloading and the Download dialog box.

• skin\classic\mozapps\extensions Contains images, CSS files, and other files related to extensions and the Extensions dialog box.

• skin\classic\mozapps\help The Firefox help system styles are contained in this folder, as are a number of CSS files and images.

• skin\classic\mozapps\pref Contains miscellaneous files, check images, dot images, and the pref.css file.

• skin\classic\mozapps\profile The Profile Manager CSS files and images are found in this folder.

• skin\classic\mozapps\shared Contains richview.css and some related images.

• skin\classic\mozapps\update In this folder are images and the update.css file, which is used as part of the Firefox update system.

• skin\classic\mozapps\xpinstall Contains images and the xpinstallconfirm.css file. The XPInstall system is Firefox's cross-platform installation system.

Classic

The Classic folder is the home folder for your theme. It contains files and subfolders. Eventually, you will package this folder into a distributable JAR file.

Usually four files can be found in the root of the theme's JAR folder.

An Easier Way to Use JAR Files?

A new JAR file is needed for the new theme. There are programs that can create JAR files, but the following process might be easier because it enables you to use just the Windows Explorer program.

First, create your theme. You can extract an existing theme, modify it, and use that as the basis for your theme. Virtually all themes are clones of other existing themes.

Next, follow these steps to get started:

1.	Copy any existing theme JAR file, giving it the name of your new theme. You can copy the JAR file of the theme you used to build your theme from.
2.	Rename this JAR file by changing its name to the theme's name and its extension from .jar to .zip. Ignore the warning Explorer gives. Open this Zip-compressed folder in Windows Explorer, and delete all its contents. All you want is an empty Zip-compressed folder at this point.
3.	Create your theme as described in this chapter. Do not forget the RDF files, preview.png, or the icon.png files.
4.	Copy all the theme's folders and files into your new Zip-compressed folder that you created in step 2. You can drag and drop your theme's files (but not the folder itself) into the new Zip-compressed folder.
5.	Rename the newly created compressed folder to have the extension .jar. For example, rename my_theme.zip to my_theme.jar. As before, Windows might display an error message; if so, click OK and ignore it.

Does this work? No, not fully. It is necessary to start with an original JAR file. If you create a new Zip file and change the extension to .jar, it will not work. Instead be sure to copy an existing JAR file to a new name as your starting point.

Each of the four files in the JAR root needs some modification. You can start by modifying the RDF files first. That creates a new theme in name only the actual look and feel will mimic the original theme. After the RDF files are modified the way you want, change the icon.png and preview.png files.

After the root folder files have been updated, it is only necessary to move through the remaining files and subfolders and update the CSS and image files as appropriate. Now, if you work carefully, you should have a theme that reflects what you wanted. Your first try might not be as good as you want, but now you have experience and a much better understanding of what makes up a theme.

The root folder files you need to update are discussed in the next sections.

contents.rdf

contents.rdf describes what the theme consists of, such as a list of folders for the theme and other information.

The contents.rdf file contains a description of the files that make up the theme (see Listing 15.1).

In Listing 15.1, you need to replace all occurrences of THEME-NAME with the name of your theme. Replace YOUR NAME HERE with your name, a nickname, your company name, or whatever name you want to use. It is recommended that you include an email address as well in this space. In the chrome:description line, enter any description you want.

If you do not have all the folders described in the contents.rdf file, edit or delete as necessary. Each of your theme's subfolders must be listed in the contents.rdf file. The contents.rdf file describes what makes up your theme. You should replace text that is in bold and italic in this listing. The text THEME-NAME should be changed to your theme's name.

Listing 15.1. The contents.rdf File

 <?xml version="1.0"?> <RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"           xmlns:chrome="http://www.mozilla.org/rdf/chrome#">        <RDF:Seq about="urn:mozilla:skin:root">     <RDF:li resource="urn:mozilla:skin:THEME-NAME" />   </RDF:Seq>   <RDF:Description about="urn:mozilla:skin:THEME-NAME"          chrome:displayName="THEME-NAME"          chrome:author="YOUR NAME HERE"          chrome:description="THEME-NAME is based on an example from a book on Firefox. It  is compatible with Firefox Versions 1.x and later. There is for basic items, calendar,  downloadstatusbar, tabx, quicknote, offline, rss-reader, sage, and tbx. Tested with  (whatever versions of Firefox you have tested your theme with)."          chrome:name=" THEME-NAME"          chrome:accessKey="l"          chrome:image="preview.png">      <chrome:packages>        <RDF:Seq about="urn:mozilla:skin:THEME-NAME:packages">          <RDF:li resource="urn:mozilla:skin:THEME-NAME:communicator"/>          <RDF:li resource="urn:mozilla:skin:THEME-NAME:global"/>          <RDF:li resource="urn:mozilla:skin:THEME-NAME:browser"/>          <RDF:li resource="urn:mozilla:skin:THEME-NAME:inspector"/>          <RDF:li resource="urn:mozilla:skin:THEME-NAME:mozapps"/>          <RDF:li resource="urn:mozilla:skin:THEME-NAME:help"/>        </RDF:Seq>     </chrome:packages>   </RDF:Description>   <!-- Version Information -->   <RDF:Description about="urn:mozilla:skin:THEME-NAME:communicator" chrome:skinVersion="1.5"/>   <RDF:Description about="urn:mozilla:skin:THEME-NAME:global" chrome:skinVersion="1.5"/>   <RDF:Description about="urn:mozilla:skin:THEME-NAME:browser" chrome:skinVersion="1.5"/>   <RDF:Description about="urn:mozilla:skin:THEME-NAME:inspector" chrome:skinVersion="1.5"/>   <RDF:Description about="urn:mozilla:skin:THEME-NAME:mozapps" chrome:skinVersion="1.5"/>   <RDF:Description about="urn:mozilla:skin:THEME-NAME:help" chrome:skinVersion="1.5"/> </RDF:RDF> 

install.rdf

The install.rdf file describes the installation of your theme. This file has a relatively simple format (see Listing 15.2). You do, however, have to create a globally unique ID (GUID) for your theme. A GUID can be created using the tool at http://kruithof.xs4all.nl/uuid/uuidgen. This is only one of many sites on the Internet to do this. (You can, if you have Microsoft's development platform, generate a GUID on your own computer.)

In Listing 15.2, do not forget the four lines directly below the line:

<doc:InlineComment> The Firefox versions that  your theme will work on</doc:InlineComment>

You must enter both the earliest version of Firefox and the latest version of Firefox that your theme will work with. If you want the latest version of Firefox to be greater or equal to the version specified, add a plus sign (+) after the version as shown in Listing 15.2.

As with the contents.rdf file, you should edit and change any text shown in bold and italic in this listing.

Note

If you feel more comfortable generating your own GUIDs, you can download Microsoft's GUIDGen program at http://www.microsoft.com/downloads/details.aspx?FamilyID=94551f58-484f-4a8c-bb39-adb270833afc&DisplayLang=en. To avoid typing in this complex URI, go to Microsoft's website (http://www.microsoft.com/downloads). When in the Download Center, search for GUIDGen. This will take you to the GUIDGen download page.

Listing 15.2. install.rdf Requires a Unique GUID and Some Minor Customization

 <?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"      xmlns:em="http://www.mozilla.org/2004/em-rdf#">   <Description about="urn:mozilla:install-manifest">     <em:id>{XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX}</em:id>     <doc:InlineComment>           Replace the above xxx's with your theme's GUID.     </doc:InlineComment>     <em:version>1.0.9</em:version>     <em:targetApplication>       <Description>         <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>         <doc:InlineComment> This GUID is for Firefox, so don't change it!         </doc:InlineComment>   <doc:InlineComment> The Firefox versions that your theme will work on</doc:InlineComment>          <em:minVersion>0.8</em:minVersion> <doc:InlineComment> The earliest verson of Firefox that your theme will work on</doc :InlineComment>          <em:maxVersion>1.0+</em:maxVersion> <doc:InlineComment> The newest verson of Firefox that your theme will work on</doc :InlineComment>       </Description>     </em:targetApplication>     <em:name>Bingo</em:name>     <em:description>MY_THEME, my ultra simple theme</em:description>     <em:creator>Your Name Here</em:creator>     <em:contributor>Your name or company name</em:contributor>     <em:homepageURL>Your web site URL</em:homepageURL>     <em:internalName>MY_THEME</em:internalName>   </Description> </RDF> 

icon.png

This is your theme's icon as a PNG file. Convention says name it icon.png. This icon should be 32 x 32 pixels, 72 DPI, and 256 colors.

Note

A complete sample of our theme can be downloaded from http://www.quepublishing.com/title/0789734583. This sample is stored as a JAR file and can be installed into Firefox if you want; however, it won't differ from the default Firefox theme.

Your icon can provide a transparent background using alpha channels. Either edit the existing file or create a new one. I recommend editing the original file for your first theme.

preview.png

This small image in Mozilla's themes web page shows the user what your theme looks like. Most developers usually take a screenshot (cropped and resized) of part of Firefox with the theme loaded. Some theme developers use some form of a logo instead.

The preview.png image can be any size, but a recommendation is that it be between 150 x 75 pixels and 438 x 89 pixels, true color.

If you want, you can use preview.jpg or preview.gif for this file, but I recommend preview.png, which is easily created using a screen capture and Windows XP's Paint program.

Other Folders and Files

All the other theme files can be edited and modified as necessary. Other than the four previously mentioned files, each file that is part of the theme is located in a subfolder.

Many theme developers create the images next and then rewrite the CSS files to reflect these images. Although your sample theme might have images of one size, you are not limited to that size your images can be as small or large as practical.

When I start a theme, I begin with my background images. I like to use real things for backgrounds (such as wood and other textured surfaces). However, there is no reason not to use whatever fits your ideas for the theme. After the background images are installed correctly, I then start working on the button images. There are many of these, so a good idea is to print the existing images (blown up in size to show detail). After they're printed, I can sketch my ideas on top of the printouts and then transfer these ideas to the actual image files.

You do not have to create all the buttons at one time; replace those you want. Later, you can replace other buttons with custom images. For my wood theme, I started with the main default browser toolbar buttons. I created back, forward, refresh, stop, and home buttons. After I situated these buttons, I created the remaining images.

Not all themes are complex. Some Firefox themes are simple, consisting of a few files and only changes in backgrounds, icons, and the like. Other themes are extensive, modifying many aspects of the Firefox user interface. Start simple, learn, and then go for more lofty goals.

Tip

An old programmer's rule is to change only one thing at a time. That way, should things break, you are more likely to know what caused the failure.

At least initially, I recommend you do the same work in small steps, changing one thing at a time and slowly building your theme.