Tap the Power of Mozilla's User Style Sheets

by Andrew Wooldridge

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?


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:

  • Change the background color of your Mozilla chrome.

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.

Pages: 1, 2, 3

Next Pagearrow