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.
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).
Better Amazon customises Amazon.com product pages so they're more user-friendly. Most product pages have a ton of information on them
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.
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.
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?
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
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
- 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.