Delicious CSS

And from the quick-weekend-hack department ...

Ever wanted to quickly add a style to a page you were on to make it more usable? If you're a Firefox user with Firebug installed you can do that directly, but it's a temporary and local-only solution. User stylesheets are more permanent, but at least in Firefox (as I've complained before) they're relatively difficult to use, and they're still a single-host solution.

I've wanted a lightweight method of defining and applying user styles on the network for ages now, and this weekend it struck me that a simple and relatively elegant hack would be to just store user styles as delicious tags, applying them to a page via a greasemonkey script.

So here it is: available at userscripts.org is a relatively trivial Delicious CSS greasemonkey script. It looks for delicious bookmarks belonging to a list of specified delicious usernames that are tagged with delicious_css=<current_domain>, and applies any 'style tags' it finds on that bookmark to the current page.

Say if for example you wanted to hide the sidebar on my blog and make the content wider, you might do this in CSS:

div#sidebar { display: none }
div#main    { width: 100% }

To define these rules for Delicious CSS you'd just create a bookmark for www.openfusion.net with the following tags:

delicious_css
delicious_css=www.openfusion.net
div#sidebar=display:none
div#main=width:100%

Note that since delicious tags are space-separated, you have to be careful to avoid spaces.

The general format of the style tags is:

ELT[,ELT...]=STYLE[;STYLE...]

so more complex styles are fine too. Here for example are the styles I'm using for the Sydney Morning Herald:

div.header,div.sidebar,div.aside,div.ad,div.footer=display:none
div#content,div.col1,.span-11=width:100%
body=background:none

which turns this:

SMH Article, unstyled

into this:

SMH Article, restyled

And to setup a new machine, all you need to do is install the Delicious CSS greasemonkey script, adjust the usernames you're trusting, and all your styles are available immediately.

I'll be setting up my userstyles under my 'gavincarr' delicious account, so you should be able to find additional examples at http://delicious.com/gavincarr/delicious_css.

blog comments powered by Disqus