Skinning Your Custom XUL Applications
(Page 1 of 4 )
This article will explain how to create a skin for your own XUL applications. There are two ways to do this, both of which will be explained. You will need some knowledge of CSS to get the most out of this article.
One great aspect of XUL is that it can be styled using simple CSS rules. You must have noticed in Mozilla that you can choose either a classic or modern skin following a fresh installation; both of these different skins are controlled via simple CSS documents that are registered with the Chrome and packaged away in Jar archives. Mozilla and other XUL applications are made skinnable by the fact that the skin files can be packaged up almost like a new application and installed by the user. During the installation process, any CSS files, RDF files and images used by the skin are copied to the user's system. Additionally, the installed-chrome file is updated (by the installation script) in order to register the new skin with the chrome registry to make it available for use by Mozilla. Creating a skin for a XUL application you have created yourself is a little different, but can easily be done in one of two ways.
As with HTML, the style of elements can be set in-line, by coding the style rules directly into the main XUL document. Also as with HTML, it is better to keep the style layer separate from the application layer; otherwise, it will be difficult to apply new style information or skins. The stylesheets can be loaded along with the XUL document by either directly referencing them with the full file:// path, or by using a chrome URL which is preferable. To use the chrome URL, though, you have to install the skin by adding a reference to the CSS file to the installed-chrome file (as mentioned above).
In this example, I'll be going back to the application created in the last XUL series. You don't have to; you could apply the principles of this example to any XUL program, provided you set appropriate style rules to match the elements you're using, and change the relative filenames when registering the skin. I want to stress that this is not an article on CSS; you should already have some knowledge of class and element selector creation. While I will be showing you the CSS file I'm using, I won't be going through it or explaining it in very much detail.
Next: Setting up a Stylesheet >>
More XML Articles
More By Dan Wellman
