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.

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

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

nglayout.debug.disable_xul_cache

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.

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:

<?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>

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

<?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>

Many of the button image files in Firefox have multiple button images. This reduces the number of files that must be opened, improving Firefox’s performance.

The image portion to be used is specified as shown in the following code snippet:

menuitem.bookmark-item {
  list-style-image: url("chrome://global/skin/icons/folder-item.png")
!important;
  -moz-image-region: rect(0px, 16px, 16px, 0px)
}

In this code, the image comes from the graphic file named folder-item.png. This image is 32 × 48 pixels in size. The part you want is defined by the –moz-image-region, specifically the rect() part. In rect() there are four parameters. In order (left to right) they are top, right, bottom, left. Think of a box and follow the perimeter in a clockwise manner, and you should remember which parameter is which.

Now, for this example you see that

top = 0

right = 16

bottom = 16

left = 0

So, the top and left are 0,0, or the upper-left corner of the image. (All images have an origin of 0,0 at their upper-left corner.) You also see that the right and bottom are both 16 pixels. You are taking a piece of this image starting at 0, 0 to 16, 16 to use as your button image (see Figure 15.2). The image is 16 pixels square, starting at pixel 0 and ending at pixel 15. The pixel at 16 is not included in this image.

Figure 15.2. The icon will be the one in the upper-left corner of the image.

After you have created your button images, you need some background images for the menu and toolbars.

You need to have images for backgrounds. In my example, I used wood that I’d digitally scanned into the computer. (Using a scanner creates better-quality images if the source is reasonably flat.)

I started with three scans. I had two samples of wood (one was not real wood, but a laminate product) that I scanned. The scans I liked best were the scans of some teak I had. I adjusted the color balance to bring out the grain some, but otherwise the scans were usable without serious editing.

My theme has seven general wood images:

It was necessary to work with about 16 CSS files, adding the background-image attribute lines.

There is no way to show all the modifications that went into generating my sample theme, wood. Instead I will concentrate on the global.css file, which was modified as needed.

In the global.css which I started with, was the following section:

/* ::::: root elements ::::: */

window,
page,
dialog,
wizard {
  -moz-appearance: window;
  background-color: -moz-Dialog;
  color: -moz-DialogText;
  font: message-box;
}

This piece of code defines the look of windows, pages, dialog boxes, and wizards. All four are defined with the same attributes (the attributes are enclosed in braces).

Originally the background color was defined as –moz-Dialog (a predefined color constant that varies with the background color of the user’s operating system dialog box).

The text color was defined as –moz-DialogText. Again, this color will be the same as the operating system’s dialog box text color.

The font for these four is message-box, a predefined font used as the default in message boxes. This is also based on the user’s operating system dialog box font.

Now, let’s split the four objects into two groups. The first group will have window, dialog, and wizard. The second group will be page:

/* ::::: root elements ::::: */
window,
dialog,
wizard {
  -moz-appearance: window;
  background-color: -moz-Dialog;
  color: -moz-DialogText;
  font: message-box;
  background-image: url(vertical_wood.gif);
}

For window, dialog, and wizard, you will use the image named vertical_wood.gif. This image is shown in Figure 15.3.

Figure 15.3. Vertical wood is a tall and not very wide (70 × 1020 image).

For page, a different image is used:

page {
   -moz-appearance: window;
/*  background-color: -moz-Dialog; */
  color: -moz-DialogText;
  font: message-box;
  background-image: url(Page_wood.gif);
}

page is set to the image page_wood.gif. This image is one of the largest images used in the theme (see Figure 15.4). It also has some graphics on it.

Figure 15.4. The page_wood.gif image has the theme name on it.

In global.css, I also added images to the following:

After I made my changes, I saved the global.css file and moved to the next CSS file until I had checked, and possibly modified, every CSS in the theme.

In creating my wood theme, I did the minimum necessary to show what can be done. Figure 15.5 shows Firefox before I created and installed my theme.

Figure 15.5. This is Firefox with the default theme installed.

After I created my wooden theme, I created a JAR file and installed it in Firefox. Once installed, I then made it the active theme by clicking Use Theme at the bottom of the Themes dialog box (see Figure 15.6).

Figure 15.6. Firefox’s Themes dialog box shows both my theme (selected, but not yet in use) and the default theme.

After I made wood the current theme, I needed to restart Firefox. Once restarted, I was using my new wood theme (see Figure 15.7).

Figure 15.7. This is Firefox with the new wood theme installed.

You have now completed your theme. Like any good wood product, it will need sanding, polishing, updating, and additions before it is ready to publish.

Here are a few ideas from the experts: