Threaded Comments

It would appear that a few days ago Blogger introduced another new feature to our blogs: threaded comments.

Now while I actually quite like the idea (much like the lightbox fiasco) it has been introduced as the default if you use an embedded comment form and publish full feeds. The other problem (and the one that affected this blog) is that the HTML elements and CSS styles used to display the comments have changed, which (depending on your template) might mean that they look different or even wrong. So while I quite like the idea here are two little tips that might make life easier.

Firstly, let's assume that while they display correctly you just don't like threaded comments and want to turn them off. This is actually easily achievable with following piece of CSS.

.comment-actions {
   display: none;
}

You need to add this to your blog template, either by editing the HTML of your template and adding it anywhere inside a style element, or by going to advanced in the Template Designer where you can add arbitrary CSS. Essentially this just removes the reply link, so to leave a comment everyone is forced to use the main comment form at the bottom of the post. This has, however, the unfortunate side effect of also removing the default delete comment link. Personally I don't think that's too much of an issue as it is easy to moderate comments through the dashboard. If I have the time I'll try and figure out how to reinstate the delete link and then I'll publish another post explaining how.

On this blog I actually don't mind the comments being threaded, but I do mind them not displaying properly, which is exactly what was happening. When I customized the template I use for this blog I added some CSS styles to control how blockquotes appear. I wasn't intending to use them for structure within the template so I styled them to look like an actual quote. You can see the styles in action in this post where I quote part of an e-mail. The problem is that blogger are now using blockquote to layout comments. This meant that each comment was styled in the same way as that e-mail quote, and because the surrounding context was different the comments were actually overlapping one another slightly. All in all it looked pretty horrible. Fortunately there is an easy fix. Because I know that I only want to use my styles within the body of a post I can limit the CSS to only applying within that section of the page by prefixing the style with .post-body as the post is always contained within a div with the class post-body. So my three blockquote styles now look like.

.post-body blockquote {
   font-style: italic;
   width: 500px;
   margin: 0 auto;
   text-align: justify;
}

.post-body blockquote:before {
   display:block;
   content: open-quote;
   font-size: 300%;
   height: 0;
   margin-left: -0.8em;
}

.post-body blockquote:after {
   display: block;
   font-size: 300%;
   content: close-quote;
   margin-top: -0.8em;
   margin-left: 500px;
}

Of course depending on the template you use you may have different problems that show up because of the new comment system so you may need to experiment a little to find exactly what CSS tricks you need to apply to put things back the way they were before Blogger introduced the new feature/bug (delete as you see fit).