Print

Tap the Power of Mozilla's User Style Sheets
Pages: 1, 2, 3

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.

Pages: 1, 2, 3

Next Pagearrow