Adding Custom CSS

It is possible to apply custom CSS rules to DTX elements. There are two attributes that will let you do so: “style” and “class”.

The “style” attribute is used to in-line the CSS rules into the element. For instance:

<vbox style="border: solid 3px black">
</vbox>

This will display a three-pixel wide black border around the box element.

The “class” attribute can point to a CSS class name inside an external file. This is a convinient way to separate the style of your elements from their representation in XML.
First you need to link the CSS file by adding a “link” node to your extension’s XML. For a toolbar it would be like the following:

<toolbar>
<link type="text/css" src="skin/mytoolbar.css" />         
</toolbar>

The “src” attribute points to the CSS file in your chrome folder. CSS, together with images and other resources, is usually placed inside a folder just for skin.
Then you may change the vbox to use the “class” attribute:

<vbox class="testVbox">
</vbox>

The contents of the CSS file would be as follows:

.testVbox  {border: solid 3px black;}

The results should be the same as when using the inline “style” property: the vbox will display the black three-pixel wide border.