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
("http://www.mozilla.org/keymaster/gatekeeper/there.is.
only.xul");
#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.
Next: Register or Not >>
More XML Articles
More By Dan Wellman
