XUL Tutorial - Creating a New Skin

This section describes how to create a simple skin. For simplicity, we'll only apply it to the find files dialog. (This section assumes that the M14 build of Mozilla is used.)

A Simple Skin

The image below shows the current find files dialog. Let's create a skin that we can apply to it. Normally, a skin would apply to the enitre application, but we'll focus on just the find files dialog to make it easier. For this reason, we'll modify only the file findfile.css rather than the global.css file.

You can modify the existing findfile.css directly to see what it looks like, however, a new skin would be placed in a different directory. If you look at the skin directories in Mozilla, they currently contain only a directory called 'default', plus any directories for additional skins you might have installed. To create a new skin, simply add an additional directory inside 'skin'. For example, your skin directory might look like this:

Create a sub-directory of findfile/skin such as those above for the new skin. Copy the original findfile.css into this directory. We'll use this as a basis for the new skin. First, let's decide what kind of changes we want to make. We'll make some simple color changes, modify the button borders, and modify the check box images. Let's start with the menus, toolbars and the overall tab pabel.

The following style rules added to findfile.css will cause the changes shown in the accompanying image.

window > box {
  background-color: #CCCCCC;
}
  
menubar,toolbar,tabpanel {
  background-color: lightblue;
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
}

[Image of find files dialog with a bit of blue]

The inner box of the window (which actually surrounds all the window content) has been changed to have a light grey color. You can see this grey along the tabs and the bottom of the window. Three elements, the menubar, the toolbar and the tabpanel appear in light blue. The border around these three elements has been changed to give a slightly 3D appearance. You can see this if you look closely.

The first rule above (for 'window > box') specifies that the child box of the window has a different color. This probably isn't the best way to do this. We should really change this to use a style class. Let's do this. That way, we can modify the XUL without needing to keep the box as the first child of the window.

box.findfilesbox {
  background-color: #CCCCCC;
}

XUL:

<box class="findfilesbox" orient="vertical" flex="100%">
<toolbox>

Next, let's modify the tabs. Currently, they look just like regular buttons. It also isn't clear which tab is the current one as it's only indicated by bold text which isn't all that noticeable.

tab {
  background-color: lightblue;
  -moz-border-radius: 8px 8px 0px 0px;
}
  
tab[selected="true"] {
  background-color: #CCCCCC;
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: 1px solid white;
}

Two rules change the normal tab appearance, the first sets the color to light blue. The second is a special Mozilla style rule, -moz-border-radius that creates rounded border corners. Here the top and bottom borders have a round corner of eight pixels and the other corners have a round corner of zero pixels, which is equivalent to no rounding. This makes the tabs look more like tabs.

The second set of rules only applies to tabs that have their selected attribute set to true. The rules make the selected tab appear light grey (instead of light blue like the other tabs) and change the border so that it appears recessed.

The two buttons on the toolbar also don't look much like buttons either, although they do when you move the mouse over them. The style rules below will make the toolbar buttons more like buttons. A padding has been added to make the buttons a bit bigger. Without it the text would be squished up against the border. A margin has also been added for a similar reason so that the buttons aren't squished up against the toolbar border.

toolbar > button.borderless {
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
  margin: 2px;
  padding: 2px;
}

Next, the two buttons along the bottom will be modified. The buttons will be given a round appearance and we'll also change the image on the default button.

button.dialog {
  background-color: #bfbfbf;
  -moz-border-radius: 8px 8px 8px 8px;
}

button.dialog[default] {
  font-weight: bold;
  list-style-image: url("chrome://findfile/skin/defbutton.gif");
  padding-right: 0px;
}

The first rule changes the background color of the buttons to grey (slightly darker than the window background). The border radius has been changed so that the button is drawn rounded. Increase the values here for more rounding and decrease them for a more rectangular look.

The second set of rules is used for the default button, which here is the Find button. Here only a simple change of the image is made. The padding-right rule is used to override a setting in the default global.css which applies a padding to buttons.

While we're changing images, let's also change the images used for drawing the check boxes on the second tab page.

checkbox {
  list-style-image: url("chrome://findfile/skin/check-off.gif");
  padding-bottom: 2px;
}
  
checkbox[checked="true"] {
  list-style-image: url("chrome://findfile/skin/check-on.gif");
  margin-bottom: 2px;
}

[Image of find files dialog with adjusted check boxes] The result of changing the images are more colorful check boxes. A margin has been applied so the check boxes are separated from each other.

Finally, some minor changes to the color of the splitter and to make a small margin appear around the tab panel.

tabcontrol {
  margin: 4px;
}

splitter {
  background-color: #6699CC;
} 

grippy {
  min-width: 60px;
}

After those changes, the find files dialog now looks like the following:

[Image of find files dialog with custom skin]

As you can see, some simple changes to the style rules has resulted in quite a different appearance to the find files dialog. We could continue by changing the menus, the grippies on the toolbar and the input elements on the first tab.

Creating a Global Skin

The skin created above is simple and only applies to the find files dialog. Some of the changes made to the skin could be placed in the global style sheet (global.css) to be applied to all applications. For example, having different images for the check boxes in the find files dialog as other windows looks a little odd. This change should really be moved into the global style sheet.

Try moving the CSS styles from findfile.css into global.css and then look at some of the dialogs in Mozilla. (The cookie viewer is a good example.) You will notice that it has adopted the rules that we have added. For example, the tabs are rounded and the selected tab appears depressed. The buttons in dialogs are also rounded. Some of the rules conflict with those already in global.css. For example, rules are already defined for 'button.dialog' and we defined additional rules for it. When changing the global skin, you would need to merge the changes into the existing rules.

For the best skinnability, it is best to declare appearance related style rules in global.css rather than in individual style files. This includes colors, fonts and general widget appearances. If you change the color of something in a local skin file (such as findfile.css), the dialog may look odd if the user changes their global skin. Don't expect the user to be using the default one.

(Next) In the next section, we will look at XBL, which can be used to define the behaviour of an element.