Tutorial Thursday

It was just Monday that Digg v3 launched with a new breath of life. However, some people were not too fond of how Digg changed the layout. The most talked about change was the placement of the sidebar on the left-side.

There are several sites (like this, this, and this) that have come up with new CSS code that will overwrite the code that Digg already has in place. So how do you use this CSS code to redesign Digg?

Digg v3

It is actually amazingly simple for Firefox users (I haven’t tried this on other browsers). To make it as simple as possible you could just download the Stylish extension. You just need to copy the CSS code into the extension. You can then enable and disable different CSS styles as you please.

While Stylish makes it really easy I always try to minimize how many extensions I use to prevent memory leaks. So here is how you do it without using an extension:

  1. Browse to your Firefox Profile. In Windows XP/2000 it should be located at C:\Documents and Settings\[User Name]\Application Data\Mozilla\Firefox\Profiles\XXXXXX.default\. Here is some help on locating your Firefox Profile.
  2. Open the chrome folder.
  3. If you do not have a file called “userContent.css” then copy the file “userContent-example.css” and rename it to userContent.css.
  4. Open up the userContent.css file in a text editor like WordPad.
  5. Add your CSS code to the end of the file. You will find the code that I used below.
  6. Save and close the file.
  7. You will have to restart Firefox in order to see the changes on Digg.

That is it! You should now have a customized version of Digg. Feel free to tweak with any of the CSS code until you have it the way you like it. Here is the code that I ended up using: @-moz-document domain(, domain( { .sub-menu .tool strong { font-size: 11px !important; font-weight: bold !important; padding: 0px !important; margin: 0px !important; background-image: none !important;} .news-summary { margin-bottom: 12px !important; margin-top: 12px !important; } .digg-count { margin-top: 3px !important; } h2 { font-size: 18px !important; } h3 { font-size: 13px !important; font-weight: bold !important; letter-spacing: normal !important; } .toggle a, .view-all a, .side-friends a, ul a { font-weight: normal !important; font-size: 11px !important;} #top_ad, #item_ad, #footer, .copyright, .top_ad_image, .banner_ad, .comments_ad_image {display: none !important;} .digg-count a strong {font-size: 14px !important; font-weight: bold !important; } .sub-menu li .toplinep { width: 138px !important; } .comment {width: 710px !important;} .news-digg img { padding-top: 4px !important; padding-left: 1px !important; } h3 a { border: none !important; background: none !important; font-weight: bold !important; font-size: 11px !important; letter-spacing: normal !important; text-decoration: underline !important; padding-left: 3px !important; } .news-submitted { margin-left: 3px !important; padding-left: 0px !important; } p { margin: 3px !important; } #contents, #sidebar { float: left !important; border: none !important; background: none !important; font-size: 11px !important;} #container {background: none !important; } #sidebar {padding: 20px 0 1em 35px !important;background-position: 0 0; } #footer {background: none !important;} }

So now that you have Digg customized you start to think about how many other sites this technique might work for, right? This technique will work for many sites and already has hundreds of CSS styles that people have developed. These styles will take you to a whole new level of customization!