Adding Style To XUL Interfaces

XUL makes use of the standards of the Web, and it is with cascading style sheets that it defines the presentation of the components of the interfaces that it builds.

Built-in types

XUL have types already defined which apply to most kinds of components.

plain

This class removes borders and margins and any elements of style, and it applies to the majority of the components which are styled with these elements.

outset

Displays an outset border around the component.

groove

Where there is a line, it will be grooved.

There are several other preset types which are given in the table of reference of elements.

Defining a style

A style may be defined at a global level for the interface, or for a given file, or for a single component.

Defining a global theme

That is done with a such line:

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

The definition means that the theme is in a file named global.css, and thus that the components have their style defines in this file with identifiers, id or class.
It is thus easy to change a theme by changing the CSS file.
Without style sheet, the default style of Mozilla's components is used.

Adding a style to a file

To define the appearance of the components in this file. The style sheet will be stored in the same directory as the XUL file:

chrome://mypage/content/mypage.xul
chrome://mypage/content/mypage.css

The CSS file contains the descriptors applying to components or classes of components.

Giving a style to a component

One defines a style specific to a component with the style attribute. The interest to use an attribute is that one can dynamically change the appearance of the component by a script assigning a different value to the attribute.

Example

In this example, a style is defined for the page and also are added specific to the components.
One adds a style to the page by specifying the name of the style sheet file, for example "style.css", with this line:

<?xml-stylesheet href="style.css" type="text/css"?>

Here is the style of the page defined in style.css:

 .red { 
    color:red; 
    font-weight:bold; 
    font-style:italic; 
} 

.blue { 
    color:blue;
    font-weight:bold;
    font-size:150%; 
} 

The "red" class defines a police in red color and in italic, the "blue" class defines a color and a bold text.
Tese classes are used for a button and a field of text:

<button class="red" label="Not clicked" /> 
<description class="blue">The text in bold and 150% size </description>   

Beside these components, one creates also two lists with the listbox tags. The left one in blue color

<listbox style= "color:blue" >

and the right one in green color:

<listbox style= "color:green" >

Moreover a command is added to change the label of the button, as one can see it in the source code:

• Demo code.zip.