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. Mozilla provides two skins by default, Classic and Modern, and you may download others. The XUL for both is the same, however the style sheets and images used are different.

For a simple personalized look to a Mozilla window, you can easily change the style sheets associated with it. Larger changes can be done by creating an entirely new skin. Mozilla's preferences window has a panel for changing the default skin.

A skin is described using CSS, allowing you to define the colors, borders and images used to draw elements. The files classic.jar and modern.jar contain the skin definitions. The global directory within these archives contain 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.

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 Mozilla 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.

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 address box window, add the following to addressbook.css in the modern.jar or classic.jar 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.

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