XUL Tutorial - Adding Style Sheets

We have hardly modified the look of the elements we have created so far. XUL uses CSS (Cascading Style Sheets) to customize elements.

Style Sheets

A style sheet is a file which contains style information for elements. It was originally designed for HTML elements but can be applied to XUL elements also, or to any XML for that matter. The style sheet contains information such as the fonts, colors, borders, and size of elements.

Mozilla applies a default style sheet to each XUL window. In many cases, it will suffice to leave the defaults as is. Other times, however, you will want to provide a custom style sheet. In general, you will associate a single style sheet with each XUL file.

You can place a style sheet anywhere you wish. If your XUL file is stored remotely and accessed via an HTTP URL, you can do the same for the style sheet. If you are creating a XUL package to be installed as part of the chrome system, you have two choices. First, you could store the style sheet in the same directory as the XUL file. This method has the disadvantage that in means your application will not be skinnable. The second method involves placing your files as part of a skin.

Let's assume that we are building the find files dialog for skinability. Our find files dialog can be refered to with the URL chrome://findfile/content/findfile.xul so the style sheet file will stored in chrome://findfile/skin/filefile.css. The only difference is the skin directory instead of content.

All the XUL examples so far have actually been using a style sheet already. The second line has always been:

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

This line indicates that we want to use the style provided by chrome://global/skin. In Mozilla, this will be translated as the file global.css, which contains default style information for XUL elements. You could leave the line out and the elements will still work, however they will look fairly plain. The style sheet applies various fonts, colors and borders to make the elements look more suitable.

Changing the Styles

However, there will be times when the default look of elements will not give the look that is desired. For this, we will need to add a style sheet of our own. So far, we have applying styles using the style attribute on elements. Although this works, it is not really the best thing to do. It is much better to create a separate style sheet. The reason is so that different looks, or skins, can be applied easily.

There may certain cases where the style attribute is acceptable. An example would be when a script changes the style, or where a difference in layout might change the meaning of the element. However you should avoid this as much as possible.

For installed files, you'll have to create or modify a manifest file and install the skin.

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="findfile.css" type="text/css"?>
  ...
<spring class="titlespace"/>
  <titledbox orient="horizontal">
    <title>lt;text value="Search Criteria"/></title>

      <menulist id="searchtype">
        <menupopup>
          <menuitem value="Name"/>
          <menuitem value="Size"/>
          <menuitem value="Date Modified"/>
        </menupopup>
      </menulist>
      <spring class="springspace"/>
      <menulist id="searchmode">
        <menupopup>
          <menuitem value="Is"/>
          <menuitem value="Is Not"/>
        </menupopup>
      </menulist>

      <spring class="springspace"/>
      <box context="editpopup" flex="1">
        <textfield id="find-text" flex="1" context="editpopup"/>
      </box>
  ...
<progressmeter id="progmeter" value="50%" style="display:none;"/>
  ...
<button id="find-button" class="dialog" value="Find" default="true"
   onclick="doFind();"/>
<button id="cancel-button" class="dialog" value="Cancel" onclick="window.close();"/>

The new xml-stylesheet line is used to import the style sheet. It will contain the styles instead of having them directly in the XUL file. You can include any number of style sheets in a similar way. Here the style sheet is placed in the same directory as findfile.xul.

Some of the styles in the code above have been removed. One that wasn't was the display property on the progressmeter. This will be changed by a script so it was left in, as it doesn't really make sense to have the progress bar visible initially. You could still put this in a separate style sheet if you really wanted to. A class was added to the springs so that they can be refered to.

#find-text {
  min-width: 15em;
}

#progmeter {
  margin: 4px;
}

#find-button {
  width: 8ex;
}

#cancel-button {
  width: 8ex;
}

.springspace {
  width: 10px;
}

.titlespace {
  height: 10px;
}

<?xml-stylesheet href="chrome://bookmarks/skin/" type="text/css"?>

Style import from XUL:
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

Style import from CSS:
@import url(chrome://global/skin/);