Home arrow XML arrow Skinning Your Custom XUL Applications

Skinning Your Custom XUL Applications

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.

Author Info:
By: Dan Wellman
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
May 01, 2006
  1. · Skinning Your Custom XUL Applications
  2. · Setting up a Stylesheet
  3. · Register or Not
  4. · The Moment of Truth

print this article

Skinning Your Custom XUL Applications
(Page 1 of 4 )

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.

blog comments powered by Disqus

- Open XML Finally Supported by MS Office
- XML Features Added to Two Systems
- Using Regions with XSL Formatting Objects
- Using XSL Formatting Objects
- More Schematron Features
- Schematron Patterns and Validation
- Using Schematron
- Datatypes and More in RELAX NG
- Providing Options in RELAX NG
- An Introduction to RELAX NG
- Path, Predicates, and XQuery
- Using Predicates with XQuery
- Navigating Input Documents Using Paths
- XML Basics
- Introduction to XPath

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials