Testing Mozilla Skin Switching


First you need a folder for your skin. Create a folder under the chrome directory in your mozilla build, e.g. chrome/testSkin/.

Create Skin Files
Under this folder, create the folder structure for each of the components you plan to skin, e.g.

chrome/testSkin/global
chrome/testSkin/communicator
chrome/testSkin/navigator
etc

and place any CSS/images under those folders

Create a Manifest
Next, create a manifest.rdf file. A sample one follows:

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

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

  <!-- Test Skin Information -->
  <RDF:Description about="urn:mozilla:skin:testSkin/1.0"
        chrome:displayName="Test Skin"
        chrome:author="Ben Goodger"
        chrome:name="testSkin/1.0"
        chrome:previewURL="http://www.mozillazine.org/image/new/blimp.gif">
    <chrome:packages>
      <RDF:Seq about="urn:mozilla:skin:testSkin/1.0:packages">
        <RDF:li resource="urn:mozilla:skin:testSkin/1.0:global"/>
      </RDF:Seq>
    </chrome:packages>
  </RDF:Description>
</RDF:RDF>

Place this file in the skin folder you created under chrome, e.g. chrome/testSkin/manifest.rdf.

Explanation:
For a given skin, there are several attributes that describe the skin, e.g. displayName, author, name, previewURL. These attributes are used by the skin switching UI to present information about the skin, and to load the skin. name is essential because it is the one used by the UI to load the skin, the other attributes merely give information about the skin, and an optional graphic URL. More attributes may be added with refinement of the skin switching UI.

The chrome:packages RDF sequence lists the packages that this particular skin applies to. There is only one entry in the manifest above, one for the global package, meaning this skin applies only to global. You can skin any or all of the components. A high quality skin will skin all supported components.

Test the Skin Switcher
Now load the browser, and go to Preferences->Appearance->Themes.

Click "Install Theme".
Type in the URL pointing to the chrome folder that you placed your skin files, e.g. resource:/chrome/testSkin/ (just like that). and click OK. Your skin should be displayed in the list, the 'displayName' attribute is used for the entry in the tree.
Click the skin entry in the tree.
Click "Apply Theme". Mozilla will now switch skins to your selected skin.

To Revert (in case you screw up!)
Click the skin in the tree again (this will be necessary). You may not get any selection feedback depending on whether or not your skin supplied selection feedback for trees. Clicking it should select it though.
Click "Deselect Skin"
Mozilla should revert (give or take a few bugs).

That's it!

More features will be added to this UI later, and a definitive set of documents on creating skins will become available.

-Ben Goodger (05/09/2000)