Author: Nathan Willis
Stylish builds on Firefox’s User Styles feature, which lets you override the CSS rules of any or all pages you visit. You can manually add CSS rules to Firefox’s userContent.css file, including assigning specific rules to URLs that match a given pattern. Stylish provides you with a simple point-and-click way to do the same thing, and a nice interface with which to keep track of the styles you have selected.
Stylish is available for Firefox 1.5 and up; you can install it from its addons.mozilla.org page or from the project’s home page. The current release, Stylish 0.4, also works with Mozilla Thunderbird and the Firefox-derived Flock browser.
Once you have installed the extension and restarted Firefox, you will see a small paintbrush-and-paper icon in the status bar. Clicking on it reveals the Stylish menu, with four options: Manage Styles, Write Style, Find Styles for this Page, and Global Styles. Manage Styles brings up the main Stylish configuration dialog, in which you can update, edit, delete, and toggle the active state of your installed styles. Write Style brings up the style editor, preconfigured with a URL matching pattern set for the page you are visiting (optionally either for the exact URL or for the entire domain). Find Styles for this Page will send a search request to userstyles.org to hunt existing community-contributed styles for a match to the current URL. Global Styles lets you apply installed styles to any URL.
Unless you are a CSS maven, it is that library of community-contributed styles that makes Stylish so valuable. Other Stylish users have crafted and uploaded hundreds of site-specific and global CSS styles. One of my few complaints about Stylish is that there are more styles than the site can really hold: the current design lists all site styles on one page, which it has far outgrown.
The majority of the site styles focus on one of three things: ad-blocking, changing the look and color scheme, or streamlining for usability. Web apps like Gmail and Del.icio.us and “social” sites like MySpace and YouTube make up the most popular targets for restyling. Whether you want to reformat Google Reader or just put a black color scheme onto Wikipedia, chances are someone has already devised a style that’s right up your alley.
Blurring the lines between style and function
This extension does more than polish Web pages, though. Because Mozilla applications themselves are skinned with CSS, Stylish can also serve as a way to modify the browser interface itself. The application styles page catalogs hundreds of CSS styles that modify Firefox’s appearance and behavior. Some are purely cosmetic, but others delve deeper, rewriting preference dialog boxes and adding additional toolbar buttons.
Once you start altering the appearance and behavior of the browser application itself, you are wandering outside the realm of style and into function. Consequently, you may wonder what benefits Stylish has compared to more full-featured extensions such as Greasemonkey. The project’s page includes a table comparing Stylish to Greasemonkey and other methods of altering page content, and a discussion of how Stylish compares to other extensions.
According to these resources, the big differences between Stylish and Greasemonkey are that Stylish allows you to preview and apply style changes immediately (instead of on reload), Greasemonkey cannot make changes to the browser application itself, and Greasemonkey’s added power over page content opens it up to potential attack by malicious code.
I have found some flaky styles at userstyles.org, but none that do any harm. On those occasions where the style fails to load properly, the page simply reverts to its unstyled form. That is a distinct contrast to my experience with Greasemonkey, where a badly written script can lock up the browser. Deactivating a bad style is a one-click operation from the Manage Styles window.
Caveats
A few words of warning are in order regarding the userstyles.org site. Finding the right style requires some trial and error. The monster list of styles is alphabetical on the name chosen by the style’s author, as opposed to something impartial like the site URL. Thus if you are looking for a dark Gmail style, it is just as likely to appear as Dark Gmail as it is Gmail:Dark — not to mention something completely arbitrary like Midnight Gmail.
The list is also multiple screens long, and in two columns — meaning you have to scroll all the way back up to the top once you hit the middle of the alphabet. And it seems to be experiencing some growing pains. More and more frequently in recent weeks, searches and direct links return a “Rails application failed to start properly” error.
The site does implement an open, zero- to five-star community rating system on contributed styles, but it needs considerably more input before its ratings reflect a wide range of opinion. And the site allows style authors to upload before and after screenshots, but only a fraction of uploaders do so. Luckily, Stylish features an instantaneous preview button for every style; you do not even need to install a style to see if it will fit your needs.
In spite of the problems with userstyles.org, the Stylish extension itself is a useful tool. It is particularly handy with sites that you traffic heavily — the more you rely on something like Google Reader, the more quirks in its interface grind at you. But with Stylish, you don’t have to wait for the site’s maintainers to get a little style, you can give it to them yourself.
Every week we hope to highlight a different extension, plugin, or add-on. Write an article of less than 1,000 words telling us about one that you use and how it makes your work easier, along with tips for getting the most out of it. If we publish it, we’ll pay you $100. (Send us a query first to be sure we haven’t already published a story on your chosen topic recently or have one in hand.)
