Styling 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 attributes 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 of the Look and Feel used for the ScriptManager.

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"/>              

Pseudo-Class

The following CSS pseudo-class attributes are supported:

• ":checked": select a checked element
• ":disable": select a disabled element
• ":default": represents the default state

Note that as in HTML, the default state (without pseudo-class attribute) will be used for a state which is not specified in the rules.

For example:

        .button:checked {
          background-color: green;
          color: black;       
        }     
        .button {
          background-color: gray;
          color: white;       
        }            

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
• "background-image": the background image 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 , italic and oblique 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 thickness 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;
        }