We all have a few favorite web sites, even when they're not perfect. You don't necessarily have to live with those imperfections, however, as userscripts and userstyles provide you with the option to customize just about anything. Here's a look at how they work, how to use them, and even how to get started on making your own.

What are userscripts (and userstyles) exactly?Userscripts.org calls them "power-ups for your browser," but more specifically they are pieces of JavaScript that are used to change, add, and alter functionality on a given site. You can think of userscripts as the function and userstyles as the form. We'll take a look at what you'll need to install to get everything working in your specific browser, but first let's take a look at some the cool changes you can make.

A Few of the Best Pre-Made Site Customizations

There are tons of awesome feature and style customizations you can make to several sites and webapps, but here are a few great options that add a lot. While there tons of other options that enhance smaller and more specific things, these examples demonstrate the enormous possibilities.

Advertisement

Better Facebook provides Facebook with several enhancements, such as tabbed news feeds, advanced feed filters, themes, comment tracking, the ability to hide posts you've read, and a bunch more. It's also one of those scripts that comes as a browser extension for virtually every web browser so you don't need to install anything special to get it to work.

Google Reader for Snow Leopard 2 takes the not-terrible-but-boring look of Google Reader and gives it an Apple-style overhaul, making the webapp feel more like a Mac OS X desktop app (or, more specifically, iTunes).

Blue YouTube (or BlueTube, as I'm calling it) applies a slick dark blue theme to YouTube that's a welcome departure from the usual white and red. When you're watching a video, generally you don't want a bunch of white space surrounding it. The darkness tends to make things look better and richer. This theme takes care of that for you.

Installing Userscripts and Userstyles

You've got a few sites you want to customize, but how do you apply these customizations? While some userscripts and userstyles are packaged as browser extensions/add-ons, you can easily apply just about anything with the right tools (if support isn't already built-in to your browser). Here's what you'll need:

Firefox: Greasemonkey for userscripts and Stylish for userstyles. (Note: many userstyles can be installed as userscripts, but Stylish makes managing these styles very simple.)

Chrome: Support for userscripts is built-in to the Chrome browser and userscripts will install like browser extensions (although compatibility with Greasmonkey-specific functionality varies), but you'll still want to download Stylish for userstyles.

Safari (and other WebKit-based browsers): GreaseKit will do the trick for userscripts. Supposedly it can also handle userstyles as well.

Also, if you are creating site-specific browser (SSB) applications with the great Mac app Fluid you have userscript and userstyle support already built-in so you don't have to do anything at all.

Installing new scripts varies based on the browser, but essentially all you have to do to install them is click a link to download the script. Browsers with built-in support or userscript plugins will recognize these scripts because of their names (something.user.js) and request to install them. Generally you'll have an "install script" button when you find one online, but if you end up viewing the source code you'll generally receive a message or alert notifying you that you're viewing a userscript while providing you with an option to install.

Userstyles are installed in a similar fashion, but if you are installing a CSS file you've created yourself (or have on your hard drive for some other reason) you can use Stylish to install it manually. All you have to do is go to Stylish's settings, clicking Add Style, and selecting the script you want to add.

That's all there is to it. Installation is pretty freakin' easy.

Making Your Own Userscripts and Userstyles

If existing userscripts and userstyles aren't quite cutting it, you can always create your own. If you know JavaScript and/or CSS, there's actually a lot you can do. (Of course, if you don't, you can always learn JavaScript and CSS from our night school lessons.) The process of making a userscript is a bit much and outside the scope of this post, but it's not that hard to do. If you'd like to give it a try, the Greasemonkey Wiki has more information on getting started. For all intents and purposes, you're essentially just writing a script that overrides functionality on a given webpage. If you know JavaScript you should have little trouble getting started.

If you've been looking to learn how to code, we can help you get started. Here are 4.5 lessons …
Read more Read more

Userstyles are even easier, as you barely need a working knowledge of CSS to create them. Creating a userstyle involves the following:

Find the site's existing CSS stylesheet and save it for reference.

Find the styles in the stylesheet that you want to override and change them to what you want. For example, if the stylesheet has the body element set to have a font-size of 12px and you want to change it to 14px, then just change it. Since you're overriding an existing style, you will—in most cases—need to add !important after your changed element.

Add any new styles to the saved stylesheet that aren't already defined (you won't need to add !important to these).

Use Stylish to add this userstyle to a given site. Once you've added it, just reload the site and you should see the style changes you made.

So long as you've fooled around with CSS in the past, creating your own userstyle should be pretty easy task.

Whether you use a premade option or create your own, there's quite a bit of customization you can accomplish with a little JavaScript and CSS. If you've made any awesome userscripts or userstyles, or just have a personal favorite, post them in the comments.