O'Reilly Network    
 Published on O'Reilly Network (http://www.oreillynet.com/)
 See this if you're having trouble printing code examples


Tap the Power of Mozilla's User Style Sheets

by Andrew Wooldridge
06/30/2000

You've probably been hearing a lot about "skins" in Mozilla lately. Skins are sets of files that allow you to change the look and feel of the "chrome" in your Mozilla browser. Mozilla uses the same engine to display its UI (buttons, drop-down menus, etc.) that it uses to display web sites like the one you are probably visiting right now.

Mozilla skins use Cascading Style Sheets to define the rules for the appearance of buttons and other UI elements. For instance, you might want your "back" button to be red with a yellow border. In this same way, user style sheets can also control the look and feel of your browser's UI as well as any site you may be visiting. In short, a user style sheet is a CSS file in your user profile that contains style rules controlling how your browser displays visual elements. User style sheets act like an additional layer of style control over your entire browser and can vary depending on which profile you are using for that browser session.

Why does Mozilla have user style sheets?

If you look at this link: (http://www.w3.org/TR/REC-CSS1), you'll find a section that talks about a User Agent. This is another way of referring to your browser. CSS specifies that all User Agents should have a default style sheet that displays elements in some routine manner, which can act as a basis for displaying web content.

Related Articles:

Extending the Mozilla Editor

Building a Game in Mozilla

Mozilla takes this concept of a User Agent a step further and allows a style sheet for each profile you use. You could, for example have two different profiles in Mozilla that could result in two very different looking browsers when you sign on. This would be useful, for instance, if you were sharing a computer with someone who is vision impaired or has some degree of color blindness. Your profile could have certain settings, and his or hers could modify the browser easily to accommodate those special needs.

I can hear you asking me, "OK, so what can I do with this?" I hear and obey; so here's the scoop.

Please tell me what cool things I can do with Mozilla style sheets

Before I go into some detail as to how to set up and use user style sheets, I'd like to take a moment and give you some idea as to what they can do. I hope this will give you some incentive to try them out for yourself and take advantage of this powerful, yet virtually unknown feature in Mozilla. User style sheets give you a centralized way to try out new style rules -- without even knowing where in the world that visual element is stored, or even if it's XUL or HTML that is affected. Here are some examples:

These are just a few of the many kinds of things you might want to try out using this new feature. It's really quite amazing to be able -- from a single file (or set of files) -- to control the look and feel of everything about your browsing experience. And if you combine this with XBL (more about that in a later article), the possibilities are endless.

How to create a user style sheet

Perhaps I've piqued your interest? I hope so. Otherwise you've probably skipped this part and are happily skimming some other news article by now. Still here? Great -- now the fun begins. Let's dive right in and talk about how to get your own Mozilla browser set up to use the user style sheet feature.

There are a few obvious things you need to do to begin with. Download a recent build of Mozilla and fire it up -- to make sure it's up and working OK. Any build around M16 should have this feature working pretty well. If you don't know where to get a recent build, try going to http://www.mozilla.org and clicking the download link. I'd recommend getting the version called M16 itself since it's most likely more stable than any given daily build.

Next, you need to have some idea of profiles and how they work. I won't go into too much detail here except to say that a profile is a set of preferences and IDs that acts as a distinct user. If you have only one profile -- which most people do -- you will automatically be logged in with that profile. If you create more than one manually (through the profile manager), you will be asked later, when Mozilla starts up, which profile you wish to use. I'd recommend that you go ahead and create a second profile now before continuing.

For instance, if you are running Windows, you could look in your Start menu under Program Files --> Mozilla Seamonkey and choose Profile Manager. You will get the dialog asking you to pick or create a new profile. There's one user style sheet for each profile.

It's useful to have more than one profile. I have one for my regular browsing, one for debugging Mozilla, and another for a "minimal" view, which has all the images removed for fast browsing. Having multiple profiles allows you to separate out your work and home life, for example, since all the bookmarks and other settings stay with each profile. If you need additional help with setting up an additional profile, refer to the "Help" option in your browser.

Creating user.css:

After you've created a profile, quit Mozilla and go to the "users50" directory (wherever it might be -- depending on your OS). Inside this directory there will be a subdirectory for every name in your profiles list. Pick the directory that corresponds to the profile you just created for this exercise and create inside that directory a new one called "chrome."

Now, finally, create inside "chrome" a text file called "user.css". That's it! That's all there is to it. Now, before you start styling your browser like crazy, let's test things out a bit.

Testing user.css:

Fire up your favorite text editor (I use super Notetab in Windows, BBEdit on the Mac, Pico on Linux), and place these lines into your fresh blank user.css file:


a {
	border: 4px solid red !important;
}
box {
	border: 1px solid orange !important;
}

Be sure you type this information in carefully. You can probably keep this file open (unless you're in MS Word or something -- shame on you), and you can now re-launch Mozilla. Choose the profile you created the user.css inside and hit OK. Go to http://www.mozilla.org and look at the carnage we've inflicted on that site, as well as the way we've "improved" the browser's look and feel.

Fig. 1 User-inflicted style changes.

If for some reason nothing seems to have changed, and your browser doesn't look something like the image above, then you either edited the wrong file, you have a CSS error, you launched with the wrong profile, you used the wrong users50 directory, or you have a really early version of the browser. Keep trying -- it may seem daunting at first, but once you have it, you will find the control you now have over your browser to be quite empowering.

Let's look at the two rules you added to your user.css. The first causes all links to have a big red border around them. You must include the "!important" because in CSS this allows you to override the other existing style sheet rules which may have some greater precedence. To understand the second rule, you must have some understanding of XUL.

Virtually every UI element in Mozilla has some dependency on a tag called BOX. So what the second rule did was to show you exactly where and how all the "boxes" in XUL are constructed. This is a really fast and simple way for XUL developers to debug their code by seeing a visual hint as to how the XUL is laid out. Let's take a look at some more examples.

Style sheet examples:

The disappearing browser:

Ever heard of the "Invisible Man"? Well you can have your very own "invisible browser." Try out the style setting below:


box {
	opacity:.33!important;
}
body{
	opacity:.33!important;
}

Fig. 2 The invisible browser.

These settings allow you to see what happens when your browser and web sites are viewed at 33% opacity. You are affecting XUL by setting the BOX tag to be transparent, and you're affecting HTML by setting the BODY tag to be transparent. User style sheets apply to both browser chrome and HTML content. You can use a variation of this to make virtually any element in the browser "semi-transparent," such as the drop-down menus. Opacity is still a work-in-progress in Mozilla, so don't be suprised if you eventually crash the browser fiddling with this.

Popping images:

Do you find banner ads annoying? Do you wish you could simply push them out of the way, unless you wanted to see them? The set of CSS rules below will force all browser images to be 20px by 20px by default -- but when you hover over them, they "pop" back to the correct size. This give you the effect of seeing just the textual content, unless you choose to view the images…


img, a > img {
	width:20px!important;
	height:20px!important;
}
img:hover, a:hover > img {
	width:100%!important;
	height:100%!important;
}

Fig. 3 Images orginally load as tiny 20 x 20 pixel graphics ...

Fig. 4 ... then spring to full size when you mouseover.

As I move my mouse over each tiny image, Mozilla causes them to immediately jump back to their normal size. It's an interesting effect, and it hints at the possibility of some creative soul coming up with a really dynamic set of style rules for Mozilla-viewed sites.

Background theme image:

One element of the browser that many people like to change is the background for the panel that contains the navigation (the largest toolbar panel). The rule below allows you to do just that:

#nav-bar {
	background-color:green!important;
	background-image: url("mozilla-banner.gif")!important;
}

Fig. 5 Change the background.

You might comment out the second line if you wanted a solid color. The mozilla-banner.gif is the image from the mozilla.org homepage. I placed that image in the same directory as my user.css file, and it loaded just fine. Note that you just as easily could have placed a browser URL in that field, such as URL("http://www.foobar.com/images/image399.gif") and fetched an image from the Net. One possible use for this may be that you fetch an image from the server that gives you an idea what time of day it is -- a dawn image for morning, a sunny image for midday, stars for night time, etc. It adds a new dimension to the browser experience.

Reversed buttons:

This is not a particularly interesting example, but it illustrates an important point. You can also effect XBL bindings via a user style sheet:


button, button.left {
behavior: url(chrome://global/content/xulBindings.xml#buttonright)!important;
}

Fig. 6 Reverse the button and text position.

This example causes the icons on your personal taskbar (the one that has a "home" button on it) to be moved from the left to the right of the text associated with that button. I'll go further into XBL at a future time, but I mention it here because this type of user style sheet could help XBL developers test out changes or new elements they are working on more rapidly, since instead of searching for the right CSS or XBL file to change, you could prototype it in your chrome directory.

Target practice:

This simple style changes the cursor to a crosshair whenever it is over browser "chrome":

box{
	cursor: crosshair!important;
}

This serves to illustrate that you can also control other elements in the browser -- such as the cursor. Any element that can be selected or controlled is at your mercy. (No screenshot here, you'll need to try this one out yourself.)

Change that throbber!

Another popular element to change is the "throbber," that ubiquitous element displayed at the upper right of most browsers to tell you it's "busy."


#navigator-throbber
{
list-style-image : url("applestill.gif")!important;
}
#navigator-throbber[busy="true"]
{
	list-style-image : url("applespin.gif")!important;
}

Fig. 7 You can customize the throbber in the upper right corner of the browser.

The first CSS rule tells Mozilla which image to display when it's not doing anything -- the static state. The second rule, which uses the CSS2 "attribute selector" feature, changes the image to an animated state. Note something really interesting here: I could just as easily have placed a regular HTTP URL in that URL definition, and this would have allowed you to fetch the throbber dynamically off the web. Perhaps you have a dynamic throbber server which changes every few minutes…

Parting thoughts

User style sheets are incredibly powerful and fun. They allow you to take total style control of your browser. You can modify just about any element that is accessible to the browser either through web pages or through the browser "chrome." This alone makes them more powerful than skins, which typically only affect your chrome. You can use user style sheets to debug your XUL code, change your throbber, or make all your links olive green and blinking, if you like. They tap into the heart of Mozilla -- which allows customizing and empowers the user.

User style sheets allow you to have a central location for the management of your own personal style. You can virtually configure things the precise way you like them and even control how other web sites appear to you. Skins are great for large, sweeping changes that you want to make to your UI, while user style sheets allow you to pick and choose elements for yourself.

Related Articles:

Extending the Mozilla Editor

Building a Game in Mozilla

I've only scratched the surface of this feature in my short time using it. I'm sure there are imaginative souls out there who will take this and really run with it -- perhaps developing another whole class of reusable style sheets. Please feel free to ask me questions or tell me about your experiments with user style sheets! My email address is andreww@netscape.com.

Andrew Wooldridge is a XUL and JS developer at Netscape Communications Corp.


Discuss this article in the O'Reilly Network Browsers Forum.

Return to the O'Reilly Network Hub.

Copyright © 2009 O'Reilly Media, Inc.