How to Change Your Look With Mozilla Skins
Pages: 1, 2, 3, 4, 5
Packaging and Installing New Skins
New skins are easy to install, and they don't need to reside within the chrome directory structure of Mozilla or any Gecko-based application. The chrome registry, described below, enables the user to download and apply a skin to the browser by clicking a hyperlink. Mozilla XPInstall technology handles the actual download and installation, and the chrome registry manages the skins and the skinning of the browser.
The UI for installing skins is not yet in place in Mozilla. However, the services that handle the installation and application of skins have been checked in recently and can be called from JavaScript. The following sections describe the creation and installation of a skin archive, respectively.
Creating a Skin Installation
The skin's organization within a single zip file makes it easy to manage on the distribution end. To create a skin installation, place all of your chrome files in a zip archive. The structure under the zip file should reflect the structure in the Mozilla chrome hierarchy:
chrome/
skins/
modern/
[component dirs, e.g., navigator, editor, global, etc.]
skin/
[files for a particular component's skin]
classic/
[component dirs, e.g., navigator, editor, global, etc.]
skin/
...other skins...
packages/
...
Note that the skins directory is a peer of the packages directory, which means that skins can be registered, edited, and selected independent of the packages to which they apply. Like the "modern" and "classic" skins above, a new skin must have subdirectories that name the components to which it applies -- and in those subdirectories, the applicable CSS and image files.
For example, if you are creating a new global skin called "myskin" for the Mozilla application, all the files would be organized under myskin/skin in a zip file. At the top level of this zip file, you must also place a file called manifest.rdf that describes the skin. The format of this RDF file is discussed in the chrome registry section below. The zip file should contain a single skin only.
Launching a UI Install Package from JavaScript
To install a skin that you have packaged as described above, use the following JavaScript function:
InstallTrigger.installChrome(InstallTrigger.SKIN, <url>, <name>);
where <url> is a relative url or a special chrome:// url that points to the zip archive, and <name> is the string denoting the name of the skin. For example, to install the skin mentioned above, newmoz.zip, you could write an oncommand menu event handler in XUL like the following:
<menuitem value="Skin Swap"
oncommand="InstallTrigger.installChrome(InstallTrigger.SKIN,
file://Projects/Skins/newmoz.zip,
'Acid Rain')" />This function provides a directive for Gecko to treat references to the global skin in XUL as references to the new, zipped-up global skin file you have installed.
<?xml-style sheet href="chrome://global/skin" type="text/css"?>Provided that the hierarchy within the zip file is the same as that of the already-installed skin files, the menu item in the example above installs the new skins and registers them in the chrome registry.
