Modifying the Default Skin

This section describes how to modify the skin of a window.

Skin Basics

A skin is a set of style sheets, images and behaviors that are applied to a XUL file. By applying a different skin, you can change the look of a window without changing its functionality. Firefox provides a skin by default, and you may download others. The XUL for any skins is the same, however the style sheets and images used are different.

For a simple personalized look to a Firefox window, you can easily change the style sheets associated with it. Larger changes can be done by creating an entirely new skin. Firefox has a Theme Manager for changing the default skin. (Although the underlying code for Mozilla calls them skins and the user interface calls them themes, they're both referring to the same thing).

A skin is described using CSS, allowing you to define the colors, borders and images used to draw elements. The file classic.jar contains the skin definitions. The global directory within this archive contains the main style definitions for how to display the various XUL elements. By changing these files, you can change the look of the XUL applications.

Customize with userChrome.css

If you place a file called 'userChrome.css' in a directory called 'chrome' inside your user profile directory, you can override settings without changing the archives themselves. This directory should be created when you create a profile and some examples placed there. The file 'userContent.css' customizes Web pages, whereas 'userChrome.css' customizes chrome files.

For example, by adding the following to the end of the file, you can change all menubar elements to have a red background.

menubar {
  background-color: red;
}

If you open any Firefox window after making this change, the menu bars will be red. Because this change was made to the user style sheet, it affects all windows. This means that the browser menu bar, the bookmarks menu bar and even the find files menu bar will be red.

Skin Packages

To have the change affect only one window, change the style sheet associated with that XUL file. For example, to add a red border around the menu commands in the bookmarks manager window, add the following to bookmarksManager.css in the classic.jar or your favorite skin archive.

menuitem {
  border: 1px solid red;
}

If you look in one of the skin archives, you will notice that each contain a number of style sheets and a number of images. The style sheets refer to the images. You should avoid putting references to images directly in XUL files if you want your content to be skinnable. This is because a particular skin's design might not use images and it may need some more complex design. By referring to the images with CSS, they are easy to remove. It also removes the reliance on specific image filenames.

You can assign images to a button, checkbox and other elements by using the list-style-image property as in the following:

checkbox {
  list-style-image: url("chrome://findfile/skin/images/check-off.jpg");
}
checkbox[checked="true"] {
  list-style-image: url("chrome://findfile/skin/images/check-on.jpg");
}

This code changes the image associated with a checkbox. The first style sets the image for a normal checkbox and the second style sets the image for a checked checkbox. The modifier 'checked=true' makes the style only apply to elements which have their checked attributes set to true.

See also : creating a skin for Firefox and CSS getting started

In the next section, we will look at creating a new skin.