How To Customise Your Favourite Websites

We all have a few favourite websites, 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 customise 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 Great Pre-Made Site Customisations

There are tons of awesome feature and style customisations you can make to several sites and web apps, 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.

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.

Get Better Facebook

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 web app feel more like a Mac OS X desktop app (or, more specifically, iTunes).

Get Google Reader for Snow Leopard 2

Better Amazon customises Amazon.com product pages so they’re more user-friendly. Most product pages have a ton of information on them

Get Better Amazon

Better Grooveshark removes ads from Grooveshark, provides lyrics for the song that’s currently playing, cross fades between songs, and adds Last.fm scrobbling for those without VIP accounts.

Get Better Grooveshark

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.

Get Blue YouTube

Super Mario Bros Tumblr will turn your Tumblr dashboard into an 8-bit land of power-ups. This is strictly a theme with no extra functionality, but how can you say no to Mario?

Get Super Mario Bros. Tumblr

What if I Want More?
If you want to explore more options, be sure to look around Userscripts.org, Userstyles.org, and our userscripts tag page for plenty of great options.

Installing Userscripts and Userstyles

You’ve got a few sites you want to customise, but how do you apply these customisations? 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.
  • Opera: Userscripts are installable like extensions (similar to Google Chrome), but you’ll want to check Greasemonkey compatibility if you’re using scripts that make use of Greasemonkey-specific features.

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 recognise 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 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.

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

  1. Find the site’s existing CSS stylesheet and save it for reference.
  2. 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.
  3. Add any new styles to the saved stylesheet that aren’t already defined (you won’t need to add !important to these).
  4. 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 pre-made option or create your own, there’s quite a bit of customisation you can accomplish with a little JavaScript and CSS. If you’ve made any awesome userscripts or userstyles, or just have a personal favourite, post them in the comments.


The Cheapest NBN 50 Plans

Here are the cheapest plans available for Australia’s most popular NBN speed tier.

At Lifehacker, we independently select and write about stuff we love and think you'll like too. We have affiliate and advertising partnerships, which means we may collect a share of sales or other compensation from the links on this page. BTW – prices are accurate and items in stock at the time of posting.

Comments


Leave a Reply