XUL Tutorial - XBL Style

In this section, we'll learn how to add style to XBL elements.

Changing the Style of Anonymous Content

You can change the style of an element placed inside the XBL content element just as you can any other element. The id and class attributes can be used as necessary. From the point of CSS, the content is not really anonymous. You can use the child selector to style the inner content.

You can import style sheets directly in the XBL file as in XUL, although you shouldn't really do so. Instead, if you are creating a custom skin, simply modify the styles in global.css.

The following example creates a button with a triple border:

XBL:

<binding id="triplebox">
  <content>
    <xul:box class="outer-triplebox">
      <xul:box class="inner-triplebox">
        <xul:button class="triplebutton" inherits="value,crop,accesskey"/>
      </xul:box>
    </xul:box>
  </content>
</binding>

CSS:

.outer-triplebox {
  border: 2px solid red;
  margin: 3px;
}

.inner-triplebox {
  border: 2px solid blue;
  margin: 1px;
}

.triplebutton {
  border: 2px solid green;
  margin: 1px;
}

A border has been added around the button and both of the two boxes that surround it. A small margin was added to separate the borders. You can add any style properties that you want. This allows you to create elements that look much more precise than CSS allows. Because of the ability to do this, you can create three-dimensional buttons that are fine-tuned to look like those on a particular platform.

The anonymous content is not treated in a special way when it comes to styling it. Given the XUL below, you could style the inner content easily.

XUL:

<box class="triplebox"/>

CSS:

.triplebox > .outer-triplebox {
  border-top: 2px solid yellow;
  border-left: 2px solid yellow;
  border-right: 2px solid orange;
  border-bottom: 2px solid orange;
}

This style rule will change the border on an element with the class outer-triplebox that is a child of an element with the class triplebox. This matches one of the boxes in the XBL file, even though the outer box is defined in XUL and the inside box is defined in XBL.

(Next) In the next section, we'll see an example XBL widget.