Getting Started

Setup

Download the latest version of Mozilla, install it (Install the DOM Inspector as well), and select the classic skin. You can use the same version as the one you use to browse the web, but if you mess it up, it is possible that you will be unable to access your browser without uninstalling and reinstalling Mozilla. For this reason we suggest that you install a second copy into a second directory (Make sure that you use a different profile as stated in the release notes)

Extract the chrome

The chrome is stored in \mozilla\chrome and the individual modules are stored in Jar files. Jar files are zip files with a different extension. You can open them up in your zip program the same way you open up zip files.

Mozilla currently comes with two skins, Classic and Modern. Looking in the directory you'll also notice that there are classic.jar and modern.jar files. For this tutorial we are going to use the Classic skin as a base. Extract classic.jar into \classic (\mozilla\chrome\classic), but make sure to keep the directory structure. Remember if at any point you wish to revert back to the original code again, just extract this jar over top of what you've modified.

Now all of the CSS and images are extracted, but if you make some changes and run Mozilla as it is, you will not see them because it's still set to look at the files in the Jar files. To point Mozilla at the correct files we need to open up \mozilla\chrome\installed-chrome.txt in a text editor. You should probably make a backup of this file now, just in case you make a mistake.

In the file you'll see a list. Do a search for classic.jar</cde>. On every line that references <code>classic.jar we need to make some changes (There are about 5 lines). Delete the bolded text:

Original

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

Modified

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

Once you have made these modifications, save them and run mozilla. If mozilla runs fine, that means that it worked. If it doesn't appear as you expected, then go back into the installed-chrome.txt file and double check that you modified the lines correctly.

Changing Borders and Colours

This is the part where knowing CSS comes in handy. To find all of the CSS files that we're going to be modifying, we must first understand the directory structure.

Directories

In \mozilla\chrome\classic\skin\classic there are a number of different directories which contain the skin information for the default packages that come with Mozilla. The most important directory is \global. The default Widgets are defined here, and anything that is modified will change throughout Mozilla. If you want to modify how checkboxes, radio buttons, and scrollbars appear, this is the place.

The next directory is the \communicator directory. This is a catchall directory which holds all of the images and styles for portions of Mozilla that don't merit their own individual directory. You'll be able to change the bookmark manager and the profile migration window here.

The three remaining directories are pretty self-explanatory. They contain the images/styles for the browser, email client, or html editor.

CSS Files

The CSS files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, etc. For this next part, let's modify the standard button.

Go into \mozilla\chrome\classic\skin\classic\global and open button.css in your favourite text editor. Scroll down to button {. This section defines the normal button in its basic state (There is no mouse over it, it's not disabled, and it's not selected).

Change the background-color: to DarkBlue and the color: to White. Save the file and run Mozilla. When the browser pops up, you probably won't be able to see much. Open the preferences dialog box and take a look at all of the buttons in there. They should all be blue with white text.

Changing Images

The images used on buttons in the interface are located in the same directories as the CSS files. To make a change, just replace one of the images with one of your own. It should probably be of the same size, but it doesn't have to be. If you do need to change the size, also make sure to change any CSS that may be affected by that change.

After you've changed the images, launch Mozilla and you should see them.

Creating the Install Script

Getting it ready for the installation

Before we can package everything up for installation, we need to remove all references to Classic. Copy everything in \mozilla\chrome\classic\skin\classic to a directory called \mySkin.

Skin Info

When switching skins in Mozilla, it displays a preview image and some information about the theme. This is what we're going to create now.

Take a screenshot of Mozilla running your theme and create an image that is 438x89 pixels in size. Place it in \mySkin and call it preview.png (If it's a jpg or gif call it preview.jpg or preview.gif).

Make a copy of contents.rdf and place it in \mySkin and open it up in your text editor. This file is a small XML Database which is used to describe the skin.

List all the skins being supplied by this theme
<RDF:Seq about="urn:mozilla:skin:root">
 <RDF:li resource="urn:mozilla:skin:mySkin/1.0" />

In the code search for the part listed above. Change the blue part to whatever you want your theme called and then its version number. Then scroll down to the next section.

 <RDF:Description about="urn:mozilla:skin:mySkin/1.0"
     chrome:displayName="My Skin"
     chrome:accessKey="M"
     chrome:author="Me"
     chrome:description="This is my custom skin for mozilla"
     chrome:name="mySkin/1.0"
     chrome:image="preview.png">

The blue areas are explained below.

• The first line should match the line that you modified in the previous section.
• The Display Name. That is what the user sees in the Preference Panels list of themes.
• The access key is what key you can press to activate the skin in the preferences.
• Replace the author section with your name.
• The description shows up below the preview image.
• Place your theme name and version number on this line
• Point to your preview.png/preview.jpg/preview.gif here

The packages section lists which components of the Browser suit that you are modifying. If we also had skins for Chatzilla, we would have to add another line resembling the other ones and change it to point to Chatzilla. But this list includes everything that we changed, so just modify the blue text to point to match the name/version that you used in the sections before this.

<RDF:li resource="urn:mozilla:skin:mySkin/1.0:communicator"/>
<RDF:li resource="urn:mozilla:skin:mySkin/1.0:editor"/>
<RDF:li resource="urn:mozilla:skin:mySkin/1.0:global"/>
<RDF:li resource="urn:mozilla:skin:mySkin/1.0:messenger"/>
<RDF:li resource="urn:mozilla:skin:mySkin/1.0:navigator"/>

Finally, in the last section of the contents.rdf file we need to tell Mozilla what version this skin is compliant with. This version is set to 1.0, so this skin will only work in versions of Mozilla 1.0. You'll have to increase this version number to match the version of Mozilla that you want it to work on. If you have the wrong number here, after you install the skin and select it in the list, it will give you a message saying that it's out of date. If that happens, just come back to this step and change the number to whatever version of Mozilla you are using.

<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:communicator"/>
<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:editor"/>
<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:global"/>
<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:messenger"/>
<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:navigator"/>

Save the file and exit the text editor.

The Jar File

In the \mySkin directory, you should now have the 5 sub-directories along with the contents.rdf and preview.png files. Select them all and zip them up, making sure to include the paths (Do not include the \mySkin directory inside of the zip, just the files inside of \mySkin). Once the zip is created, rename it to mySkin.jar

Triggering the install from the web

To install your jar file directly from the web, you need to run some JavaScript.

<a href="javascript:InstallTrigger.installChrome(InstallTrigger.SKIN, 
 'myskin.jar', 'My Skin Theme')">install My Skin</a>

If you have jar files on your hard drive and would like to install them, then download/use this form.