An Introduction to XUL Part 6 - Customization (
Page 3 of 4 )
One of the things that make Mozilla and many other application great is the fact that they are highly customizable through the use of skins to change the appearance of the application, and locales to change the language. Mozilla manages its skins and locales by packaging them all up into a series of JAR files; look in the application directory of Mozilla and in the chrome directory, you will see these files. JAR files are compressed archives of stylesheets that handle the appearance of the application, or DTDs that contain all of the text strings in the application. Both skin and locale archives contain RDF files describe them to Mozilla and all of the JARs are listed in the installed-chrome text file and chrome.rdf files.
When changing the skin or language of Mozilla, the relevant files are accessed via a chrome URL, and using your skins or locales in this way gives them far more control and flexibility, for example, you can use XBL not just to inherit elements into your XUL files but attributes, properties, methods and event handlers when using chrome URLs in the place of standard path names to reference the XML and CSS files. You can add a stylesheet in your working directory and modify the skin of any of the examples we have worked on, simply linking the XUL file and the stylesheet using just a standard reference.
In order to use a chrome reference, you need to register the relevant files using an RDF file and tell Mozilla where it is by adding details of its location to the installed-chrome.txt file. You could alter the appearance of the menu in the created in the previous article. First of all, create a new folder in the folder you have been working from called mystyle. Now create a very basic stylesheet, something along the following lines:
menubar {
color:white ; background-color:red ;
}
menu {
color:white ; background-color:maroon ; font-weight:bold ;
}
menuitem {
color:white ; background-color:blue ;
}
Save it as mystle.css in the folder you have just created. Go back to the Mozilla chrome directory and open the JAR file called classic (you may need a copy winRAR to do this). In this file will be all of the classic skins for each of the different components of Mozlla; in the location skin\classic\navigator within the JAR file, will be another contents RDF file, copy this to the myskin folder that contains your CSS file. Now open the RDF file. It will contain an RDF description of the skin and component it was describing so you need to change all of the references of classic/1.o to mystyle/1.o and change the references of navigator to openclose. Before you save this file, you’ll also need to change the two RDF:Seq elements to RDF:Bag elements.
Once this is done, go back to the Mozilla chrome directory once again and open the installed-chrome.txt file. At the end of the file, add the following line:
skin,install,url,file:///C|XUL/chrome/myskin/
Remember to hit return after adding this line and then save the file.
/ 9 
