Styling XUL widgets

The library allows a limited capability to style widgets using CSS^[1]

This is a capability of XUL

.

There are two attributes to control style on widgets which have a graphics representation:

• class: the CSS style classes of the element
• style: the CSS style of the element

These attribures work exactly as in standard HTML.

Note that if these attributes are not present for a XUL widget, the widget will have the default representation.

Class attribute

The CSS style classes of the element are defined through the class attribute for each XUL widget. For example:

      <label value="The text" class="red boxed"/>

Style attribute

As in standard HTML, the style attribute allows to define inline style properties which will override those defined through CSS. For example:

      <button label="button" style="background-color: yellow;" />

Specifying a CSS file

The CSS file is specified through the xml-stylesheet processing instruction. For example:

      <?xml version="1.0"?>
      <?xml-stylesheet href="myCSS.css" type="text/css"?>

      <window title="Example" width="200" height ="200"
              xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">  
         ...
      </window>

Supported CSS properties

A limited list of CSS properties are supported. These properties are:

• "background-color": the background color of the widget
• "color": the foreground color of the widget
• "font-size": the size of the font
• "font-family": the font family of the font
• "font-style": the font style of the font. Only normal and italic values are supported
• "font-weight": the font weight of the font. Only normal and bold values are supported
• "text-align": the text alignment of the widget
• "vertical-align": the vertical alignment of the widget
• "border-style": the border style of the widget
• "border-width": the border width of the widget
• "border-color": the border color of the widget
• "border-radius": the radius of the border for the widget
• "inset": the insets of the widget

Colors definition

Colors are defined in standard CSS format. For example:

• color: red;
• color: #DDDDDD;

Inset definition

The insets definition specifies the offsets for an element raltive to the other elements in the following order:

• top
• right
• bottom
• left

Note that this property can also be used with less than 4 values:

• With only one value: specifies both the top, right, bottom and left to this same value
• With 2 values: specifies the top / bottom and right/left values in this order
• With 3 values: specifies the top, right/left, and bottom values in this order

For example:

        .button {
          inset: 10px 10px 10px 10px;
        }     

Borders definition

The "border-style" property support the following values:

• solid: a solid border
• dashed: a dashed border
• dotted: a dotted border
• outset: an outset border
• inset: an inset border

The "border-color" property allows to specify the color of the border.

The "border-width" property allows to specify the thickness of the border.

The "border-radius" property allows to specify the radius of the border.

Examples

Example with StyleClass

Suppose that we want to style a label where:

• The background of the label is yellow
• The size of the font is 24 pt
• The font is bold

We can have the following XUL script:

        <?xml-stylesheet href="myCSS.css" type="text/css"?>
        <window title="Example 3" width="200" height ="200" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
            <label id="mylabel" value="This is some text" class="label" />
            <button label="button" class="button" />
        </window>

And the following myCSS.css CSS file:

        .button {
          font-size: 24px;
          font-weight: bold;
          background-color: yellow;        
        }     

Example with style attribute

In this second use case, we have the same result as for the first example, but the background of the label is defined by a style attribute, rather than with the styleclass:

        <?xml-stylesheet href="myCSS.css" type="text/css"?>
        <window title="Example 3" width="200" height ="200" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
            <label id="mylabel" value="This is some text" class="label" />
            <button label="button" class="button" style="background-color: yellow;" />
        </window>

And the following myCSS.css CSS file:

        .button {
          font-size: 24px;
          font-weight: bold;
        }