Quicker Flickr Geotagger by Tom Royal on Flickr
Summer Paws by Tom Royal on Flickr
Hi, Robot by Tom Royal on Flickr
The Strip by Tom Royal on Flickr
Public Transportation by Tom Royal on Flickr
Vice City by Tom Royal on Flickr
Show by Tom Royal on Flickr
Bellagio by Tom Royal on Flickr

You're using a very old version of Internet Explorer which can't show the photos that should be in this box. Please consider upgrading to a newer version of IE or an alternative such as Firefox. Thanks.

How to: Remain Calm on Comment Is Free

April 7th, 2012

Comment is free, but reading below the line could cost your sanity. So here's how to remove the temptation.

I've now been asked a few times about a version of Kitten Block to remove below-the-line comments from news websites, and the Guardian's Comment is Free in particular. The good news is that it's generally very easy to zap comment areas out of existence using CSS, although you do have to do it on a per-site basis. As an example, here's how to erase the stupid from CiF:

1) Install Stylish – a clever tool that lets you add or override CSS on websites. Firefox here, Chrome here.

2) Stylish adds a small S icon to the browser (Chrome – top right. Firefox – bottom left). Select it and choose 'Write new style'.

3) Call the style something appropriate ('Don't read below the line..')

4) For Firefox, copy and paste this in:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("guardian.co.uk") {
#discussion-comments{
display:none;
}

5) For Chrome, set the 'Applies to' rule to 'URLs starting with' and enter 'http://www.guardian.co.uk', then paste in this rule:

@namespace url(http://www.w3.org/1999/xhtml);
#discussion-comments{
display:none;
}

6) In both cases, save the style and reload any CiF pages you have open.

.. and that's it. Stlyish applies this CSS when on a Guardian article, overriding the page styles to hide the comment box. It's very easy to create similar rules for other sites – the key is to find the class or ID of the comment container. As this is often added dynamically after initial page load, you'll need to inspect the DOM using a developer tool such as Firebug.

Oh, and by the way – you can also use Stylish for all manner of useful and important internet business..