XUL Tutorial - 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 behaviours that are applied to a XUL file. By applying a different skin, you can change the look of a window without changing its functionality. The default skin in the June 1st Mozilla build was called modern and it is found in the chrome/skins directory. The following section assumes you are using the modern skin.

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 (or will have) 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 file chrome/skins/modern/global/skin/global.css contains most of the style definitions. By modifying this file you can see some simple changes that you can make. 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 global style sheet (global.css), 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 chrome/skins/modern/messenger/skin/addressbook/addressbook.css:

menuitem {
  border: 1px solid red;
}

If you look in one of the skin directories, 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. By refering to the images with CSS, they are easy to remove. It also removes the reliance on specific image filenames.

You can asign 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://global/skin/check-off.gif");
}

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

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 where this condition is matched.

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