While the default styles for most websites are nice there may be times when you would love to tweak how things look. See how easy it can be to change how websites look with the Stylish Extension for Firefox.

Note: Scripts from Userstyles.org can also be added to Greasemonkey if you have it installed.

Getting Started

After installing the extension you will be presented with a first run page. You may want to keep it open so that you can browse directly to the Userstyles.org website using the link in the upper left corner.

In the lower right corner you will have a new Status Bar Icon. If you have used Greasemonkey before this icon works a little differently. It will be faded out due to no user style scripts being active at the moment. You can use either a left or right click to access the Context Menu.

The user style script management section is also added into your Add-ons Management Window instead of being separate.

When you reach the user style scripts homepage you can choose to either learn more about the extension & scripts or…

Start hunting for lots of user style script goodness. There will be three convenient categories to get you jump-started if you wish. You could also conduct a search if you have something specific in mind.

Here is some information directly from the website provided for your benefit. Notice the reference to using these scripts with Greasemonkey…

This section shows you how the scripts have been categorized and can give you a better idea of how to search for something more specific.

Finding & Installing Scripts

For our example we decided to look at the Updated Styles Section”first. Based on the page number listing at the bottom there are a lot of scripts available to look through. Time to refine our search a little bit…

Using the drop-down menu we selected site styles and entered Yahoo in the search blank. Needless to say 5 pages was a lot easier to look through than 828.

We decided to install the Yahoo! Result Number Script. When you do find a script (or scripts) that you like simply click on the Install with Stylish Button.

A small window will pop up giving you the opportunity to preview, proceed with the installation, edit the code, or cancel the process.

Note: In our example the Preview Function did not work but it may be something particular to the script or our browser’s settings.

If you decide to do some quick editing the window shown above will switch over to this one. To return to the previous window and install the user style script click on the Switch to Install Button.

After installing the user style the green section in the script’s webpage will actually change to this message…

Opening up the Add-ons Manager Window shows our new script ready to go.

The script worked perfectly when we conducted a search at Yahoo…the Status Bar Icon also changed from faded out to full color (another indicator that everything is running nicely).

Conclusion

If you prefer a custom look for your favorite websites then you can have a lot of fun experimenting with different user style scripts.

Note: See our article here for specialized How-To Geek User Style Scripts that can be added to your browser.

Links

Download the Stylish Extension (Mozilla Add-ons)

Visit the Userstyles.org Website

Install the Yahoo! Result Number User Style