Craigslist meets Greasemonkey

November 10th, 2007
Filed Under Design | 2 Comments

Craigslist Front Page

I’ve really grown to like Greasemonkey, a Firefox add-on that lets you customize the way webpages look and feel. I’ve installed a few of the scripts for various websites from Userscripts.org. Some I’ve found useful, some I’ve not and later uninstalled them. However, I never could find one I liked for Craigslist. I love craigslist. I found my apartment there. I found the job that got me moved to Chicago there. I’ve found freelance work there. However, let’s face it: Craigslist is visually ugly. Thanks to Greasemonkey, I changed that to something a bit more visually pleasant, while not changing the functionality of the site.

Craigslist Table of Contents Page

It was easy to do, really. I dowloaded the Craigslist CSS file, and edited it to my liking (with the help of Dreamweaver to visually aide me). I then created a Greasemonkey script to simply @import that style sheet. Now one distinction: I have a Linux box running a private in-home-only webserver where I’ve placed this CSS file. If you don’t have a setup like this, and most of you won’t, you could always embed this CSS file directly into your Greasemonkey script. Just remember to condense the CSS file by removing all line breaks and tabs, and just make the entire CSS one long line of text.

Craigslist Listing Page

Luckily, Craigslist has made this whole process much easier than I expected. They use one single CSS file for the entire site, so I could make all the changes in one file, and not have to worry about loading different CSS files for different parts of the site. Other sites out there aren’t as accommodating, making this whole process much more difficult.

It didn’t really take much to transform Craigslist into something a little more visually pleasing. I tweaked some of the colors, box shading, and fonts, and I was good to go. For the more design geek oriented out there, I used Segoe UI (from Vista) for the front page in place of Arial, and Georgia (from XP) for the text, in place of Times New Roman. I have a standard setup in Dreamweaver, that cascades the fonts as follows: Segoe UI, Lucida Grande, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif; and Georgia, Times, Times New Roman, serif. There are some ambitious re-designs out there, the most noteable being from The Design Eye team. While I could have gone further, I decided that just a few minor tweaks were all that was needed to bring Craigslist up to my liking.

Feedback time. Do you think I should set up a greasemonkey script for download that would accomplish this minor re-design so that others can enjoy it, too? Would it be useful? Or should I shut my trap and just keep it to myself?