Skinning Delicious in Firefox

8 July 07

I’ll admit, I am quite slow when it comes to joining new services such as Del.icio.us, or Twitter, partly because I rarely find them of use, but mostly because I do not want to spend my time once again entering details into a new service (then later finding I rarely use it).

Following my bookmarks section in Firefox growing to an uncontrollable size however, I eventually decided to join Del.icio.us, as a more manageable way of organizing my links. Despite my reluctance to join such a service, I find del.icio.us to be simple and intuitive to use, and is of increasing use with the addition of a Del.icio.us icon in Firefox. However, one aspect of del.icio.us that I find less appealing is the design.

You can understand the reluctance (and difficulty) of designing a service such as Del.icio.us; not only will it be used by numerous audiences and demographics, but it will also be used for a varying number of task (dependant on the user). But whenever I look at my Del.icio.us account, I get the overwhelming sense of an application designed by a programmer, with less thought design. I am by no means against this design, it just appears to me that the user experience of del.icio.us could have been further enhanced if more thought was given to design.

Happy Cog has shown how to make a social bookmarking application an attractive design in its design of Ma.gnolia, but I personally preferred the way the information was structured in Del.icio.us, hence my reason for joining this, opposed to Ma.gnolia. As an avid Firefox user, I recently decided to create a new skin for my Del.icio.us account that could be implemented using the “Edit CSS” function found in the Web Developer Toolbar and, after an hour or so, I had created my new theme for Del.icio.us, which can now be used on anyone’s account page.

I am not trying to belittle the design of Del.icio.us in any way, as it serves its purpose very well, but I personally wished to try something new and so quickly put together a new design using only CSS (and one faux background image). The design can be used by any Firefox user who wishes to, and the CSS is available at the end of this article. Whilst this skin is by no means complete, it is a dark and simplified version of Del.icious that I am personally using at present.

This is a personal project made in my spare time, and so has not been tested as rigorously as my professional projects. Being away from the office, I am currently operating on a Windows based system and so have not tested the skin on a Mac, so if anyone finds any issues with this skin then feel free to contact me.

The CSS for the skin is in the below document and can simply be used in Firefox, by editing the CSS in the Web Developer Toolbar (or the Edit CSS addon). The one image used in this skin is linked to in the CSS so no editing should be needed:

CSS Document for Delicious Skin

This was just my personal take on playing around with Del.icio.us; a quick web search found no other experiments, so I thought I would document this here, in the hope that others may develop this experiment, or might point me in the direction of similar projects.

If anyone does decide to use this skin, then please let me know how you find it.