Staff Client Themes and Skins

Previously, we mentioned CSS (Cascading Style Sheets) and how it allows us to separate presentation from content in our Mozilla-based applications. We have a few screenshots to demonstrate this. Let’s start with some drastic examples:

thumbnail thumbnail
Star Trek Walnut

No, we won’t use either of these as our default theme (but for any Trekkies out there, I can hook you up). 😉

But notice that we do have control over more than just colors and fonts; we can alter the look & feel of an application widget by widget. Or better, we can let someone else do it. The community of people who create skins and themes is huge.

This is the default look for Firefox in Windows:

Windows Default

We can inherit the theme/look from the operating system:

thumbnail thumbnail
XP Silver Large Font Windows Classic Teal

Of course, not all operating systems are created equal. Did I mention that our software will be cross-platform? Here is the default look of Firefox in Mac OS X:

thumbnail thumbnail thumbnail
Edit Bib Record Edit Bib Record 2 Patron Registration

It’s worth emphasizing that I’m not changing or tweaking any XUL code between these snapshots. The same code created each interface, and it’s only the skins (a collection of CSS and images) that have changed.

Here are some pretty ones:

thumbnail thumbnail
Toy Factory Sky Pilot

We have more screenshots (and thumbnails) located here:

We will also add more images as time passes, and for those lucky enough to run Firefox or Mozilla, there will be interactive demos. We’re not really focusing on polish at the moment, and mostly want to make sure the interfaces are correct and logical, but we did want to whet your appetite a bit for what is to come. As always, feel free to post any comments here or send mail to