How to Change Your Look With Mozilla Skins
Pages: 1, 2, 3, 4, 5

An Introduction to Creating and Editing Skins

You can use CSS to apply styles to XUL widgets for creating skins. Here's an example of how to do that.

To start creating a XUL skin:

1. Add a style sheet processing instruction to the top of your XUL file.

   <?xml-style sheet href="sample.css" type="text/css"?>
   

2. Create a new text file called sample.css.
3. Add the following lines to the file:

   @import url(chrome://global/skin/)
   box#bbox { background-color: lightgrey; } 
   titledbutton#rd {background-color: red; color: white;}

4. Save it in the same directory as your XUL file.

When you reload the XUL file you have been working on, the box element you have used to create the navigation area in the XUL file appears as follows:

No Style sheet.

Just the Global Skin.

Sample.CSS Importing Global Skin.

The example is not much to look at right now -- and you may note that this basic skin has transgressed upon some of the skinning guidelines because it overrides color information -- but you can get a sense of how to create basic style statements in CSS.

To read more about creating skins in CSS, see Skinning XUL Files By Hand, on the Mozilla web site.

Pages: 1, 2, 3, 4, 5

Next Page