Home arrow XML arrow Page 2 - 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 - Setting up a Stylesheet
(Page 2 of 4 )

If you created the XUL application from the last series, you'll notice that it's a pretty dull grey at the moment and that the toolbar and menu bar are different shades of grey, making it look, on the whole, a little untidy.  If you create a XUL application without specifying any style information at all, that is what you get:


To correct this, you can set a default stylesheet that gives the application its basic appearance.  The following stylesheet will give an application a standard color of silver and generally tidy things up a little:

@import url("chrome://global/skin/");

@import namespace url

#buttonOpen {

  list-style-image: url("icons/open.gif");


#buttonSave {

  list-style-image: url("icons/save.gif");


#buttonNew {

  list-style-image: url("icons/new.gif");


#buttonToolbar {

  list-style-image: url("icons/menubar.gif");


#formsButton {

  list-style-image: url("icons/forms.gif");


#windowElementButton {

  list-style-image: url("icons/window.gif");


toolbar, menubar, menupopup, menuitem, menu, toolbargrippy {

  background-color: silver;

  font-weight: bold;


menuitem[_moz-menuactive="true"], menu[_moz-menuactive="true"] {

  background-color: navy;

  color: white;


menuseparator {

  border-bottom: 1px solid black;


As you can see, it's pretty standard CSS; mostly just ID and element selectors and style information.  The lines of code encased in square brackets are custom Mozilla style properties that are used to specify different styles for different element states, giving you roll-overs for example.  You can also use class and ID selectors as you can with HTML, and use the list-style-image: property to specify different icons for different skins.  Using element or ID selectors in your CSS file means that the only change you need to make to your XUL file is adding the xml-stylesheet declaration. 

There are a whole host of built-in style properties that you can use when developing for Mozilla; a lot of them relate to Mozilla-specific layouts like the _moz-box-orient property.  Probably the best one is the _moz-border-radius property that is used to round off what would normally be square borders, which is great for panel tabs or box decoration.

Some elements of a XUL application seem styled even when no CSS files are in use; in the XUL Edit application, that some of you may have created before, the menuitems already changed color when the mouse rolled over them.  When you begin to add style information for certain elements, these in-built styles change, which forces you to need further rules to correct this. 

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