Home arrow XML arrow Page 3 - 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 - Register or Not
(Page 3 of 4 )


The great thing about XUL (one of the great things), is that while you can register skins with the chrome and reference them in your XUL file, you can also just use a simple XML stylesheet directive and a file path. This means that you can loosely associate the CSS file while you tweak it and experiment with it, then register it when you feel it is ready for general consumption.  To use a basic stylesheet in this way, just add an xml-stylesheet directive:

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

To register your stylesheet with the chrome, you're going to need a contents.rdf file and a pointer in the installed-chrome file, just like the locale and main content files.  But before you do that, you need to do a spot of organization and create a skin directory structure.

Create a folder in your package directory called skin, then create a folder with the same name as your skin, and finally create a folder with the same name as your application.  Into this folder will go your CSS file(s), the contents.rdf file and any other skin resources such as images used by the skin:


To create the rdf file, open a text editor and add the following code:

<?xml version="1.0"?>

<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"


These statements form the cornerstone of any nutritious RDF document and are mandatory requirements consisting of the XML declaration and the opening RDR container, which holds the required namespace attributes.  Next, we define the skin as a Mozilla resource:

<RDF:Seq about="urn:mozilla:skin:root">

    <RDF:li resource="urn:mozilla:skin:silver/1.7"/>


Now, we can give Mozilla some information about the skin that can be used within Mozilla and the chrome registry. 

<RDF:Description about="urn:mozilla:skin:silver/1.7"


    chrome:author="Dan Wellman"

    chrome:description="A basic silver skin with heavy text."



        <RDF:Seq about="urn:mozilla:skin:silver/1.7:packages">





We also list the package that the skin is to be used with; in this case it's the XUL Edit application from previous articles, but it could be any other XUL based application, including any of the Mozilla suite of applications. If you wanted to design an alternative skin for Mozilla itself, you'd go through very similar steps to do it, except your CSS file would be called navigator.css and it would be probably be packaged into a JAR file.  You would also need to install it correctly.  However, as we aren't restyling Mozilla, we're creating a skin for a standalone application, we don't need to worry about this.  Finally, you just need to state the version of your skin and close off the RDF container:

<RDF:Description about="urn:mozilla:skin:silver/1.7:interface"



Now all you need to do is register the skin with the chrome registry and link the new skin to your application.  To do this, you'll first need to add the following stylesheet directive to your mail application XUL file:

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

You now need to add a pointer to the installed-chrome file, which is in Mozilla's chrome folder, to tell Mozilla where your skin located:


Now save this file, and from the same directory, delete the chrome.rdf file.  Open Mozilla now to recreate the chrome.rdf file and register the skin.  While Mozilla is open, take a moment to open the preferences panel and take a look in the Themes section.  Your skin should be shown alongside any other registered skin packages, and you'll see information from the contents.rdf file such as the Skin name, author and description:


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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials