Monday, September 21, 2009 "Paint it Blue!" Userstyle

I haven't posted in a while, and I thought I should write something, so here I go... (changes and links at end of post)

A while back (a year or two ago, I guess) I created a Userstyle called " - Paint it Blue!" for the Firefox extension, Stylish (see also the link at the end of this post). The style simply changes a few images for ones that I colored blue, and changes some text to better match the blue color. It was a pretty good style (at least in my opinion), but I hadn't been maintaining it for a while and had since changed their site design--effectively breaking my style. I have recently resurrected it from the dead, modifying it to again work with the site.

Basically, they changed from using one image per element and a couple images in the header, to one image for many (or all) of the main elements (header, login button, etc.). This helped make the CSS a lot cleaner, but also broke my style in some parts, so I had to scrap a large portion of my code. Luckily, Webkit (a Web browser engine/project), has a very nice page inspector (or simply "Inspector", I believe) which shows the styles applied to an element, as well as all the other elements that style applies to. That allowed me to quickly find all the elements that used the sprite--which I modified to a blue color--and create a single rule which makes all those elements use my modified image instead. And because they had the black and red versions of all the elements in the same image, it allows you to choose one or the other (red or black), and have a different appearance depending on your choice.


  • 06/27/08 - Changed color of user/language dropdown menu.
  • 06/30/08 - Fixed #header at (originally had no background-image).
  • 06/31/08 - Last fix somehow ended up not being applied. It should be fixed now.
  • 08/20/08 - Colored the nav links(Active/current) on the left blue, and the links at the top/right(login/help/language) to white. Suggested by user runwithvampires.
  • 08/21/08 - Added comment to allow option of removing globe image left of language selection.
  • 12/01/08 - Removed some header images, as removed and resized some of their headers.
    Simplified Scrobble Counter and colored it blue.
  • 12/13/08 - Centered the numbers in the Scrobble Counter a little more; made it more unified. Changed colors to "named colors"(eg: "white") or "rgb"(eg: "rgb(225, 255, 225)")
  • 09/20/09 - Major changes to fit new site design.
    • Old code: (may be used to create a new style if you wish)


The Userstyle: - Paint it Blue!
Companion Greasemonkey script: (may not be relevant anymore)
Stylish website (Userstyles/Firefox extension):