Give your Favorite Web Applications a Face-Lift
April 27th, 2007 (12:00pm) Judi Sohn 11 Comments
Sites like Gmail, Google Reader and del.icio.us are essential, functional and extensible. We live in them. But aesthetically, they don’t win raves out of the box. Thank goodness a web application’s look & feel is only skin deep. With a few add-ons and tweaks, it’s easy to completely change the browsing experience for popular, yet not-so-easy-on-the-eye sites.
You use Firefox, Safari or Camino as your default browser, right? Of course you do. So read on.
From this:
to this:
How? Start with Greasemonkey, the fantastic add-on that lets you inject JavaScript code to manipulate the functionality of a site. Then add Lifehacker’s Better Gmail (current version 0.5). It’s a single add-on that gives you all sorts of options for fixing and tweaking Gmail, including changing the look & feel. Turn features on and off in a one-stop-shopping menu. No touching messy code required.
From this:
to this:
How? Start with Stylish, a Firefox add-on which lets you change the style sheet for any site. Greasemonkey manipulates the functionality of the site through JavaScript. Stylish is purely for appearances. Then add Jon Hicks’ beautifully designed Google Reader style sheet. Hicks gave similar TLC to Bloglines a while back. His style sheets also work in Camino and Safari (see his post for instructions).
From this:
to this:
How? Start here to download what you need to change the del.icio.us style sheet. Add site thumbnails to your own del.icio.us bookmarks page with the BetterSearch add-on. In addition to del.icio.us, the thumbnails also work in other search engines, including Google.
Don’t like these looks? Browse for other styles or scripts and let us know your favorites.
11 Comments Post your own comment
Andrew says: April 27th, 2007 2:11pm
Could you make those screenshots a little smaller? ;)
Lars Fischer says: April 27th, 2007 2:15pm
Thanks for the article, but it would be really helpful if these thumbnails could be enlarged.
Friday Hot Links of the Week 4-26 at sfp101: Stress-Free Productivity says: April 27th, 2007 3:02pm
[...] Give your Favorite Web Applications a Face-Lift A great site for the productivity driven [...]
Geeky Info » Blog Archive » skin gmail, google reader and del.icio.us says: April 27th, 2007 9:42pm
[...] Read more here [...]
Versatile Ninja says: April 28th, 2007 10:38am
Wow, those screenshots are sexy! I’m gonna have to track this blog now. :)
http://www.versatile1.wordpress.com
adam says: April 28th, 2007 12:13pm
as far as del.icio.us prettyfying, i’ve used http://johnvey.com/features/deliciousdirector/ and it makes it not only pretty, but mure useful.
and since i’m not on a mac, there’s no way i’m using hick’s “design” (if you can call ripping an OS design)
Judi Sohn says: April 28th, 2007 1:15pm
Okay, okay…point taken. :-) I’ve replaced the screen shots with (hopefully) better ones.
pesertaNgaduTrafik says: April 28th, 2007 1:27pm
Good Tutorial…!
Thanks for the article, thanks for your post :)
Best Regards…
ngadutrafik
Cambiando los colores de del.icio.us « Javier Aroche says: April 28th, 2007 4:05pm
[...] Web Worker Daily encontré un CSS para modificar los colores de del.icio.us; también mencionan uno para google [...]
Jess says: April 30th, 2007 4:12am
I actually like Gmail/Google Reader in the original, ugly mode.
Personalizing gmail and del.icio.us interface « View from the 11th floor says: July 23rd, 2007 10:15pm
[...] Speaking of creating applications that people can modify to suit themselves, here’s a way to modify your gmail or del.icio.us interface to be friendlier and lots better looking. Thanks to Web Worker [...]