By Adam Dachis How to Customize Your Favorite Web Sites to Your Exact Preferences 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. 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 webapp feel more like a Mac OS X desktop app (or, more specifically, iTunes). Get Google Reader for Snow Leopard 2 Better Amazon customizes 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 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. 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 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. 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. You can follow Adam Dachis, the author of this post, on Twitter and Facebook.  If you'd like to contact him, Twitter is the most effective means of doing so. Share this:

May 10th, 2011 Top Stories How to Customize Your Apartment Without Pissing Off Your Landlord Google Music Streams ALL Your Music From the Cloud What Professional Password Guessers Look for in Your Password Turn a Pallet into a Rainy Day Shoe Rack From the Tips Box: Pandora Limits, UPS Tracking, and Standing Desks More Stories on Lifehacker »

spreadthebobonicplague@gmail.com: Change your e-mail address | Unsubscribe

Gawker Media, 210 Elizabeth Street, Floor 4, New York, NY 10012
Terms of use | Mailing List Policy