Wikidot Design & Development

The ultimate wikidot comments counter

A sophisticated, conditional way to present the number of comments

A couple of weeks ago Timothy Foster presented the singular/plural CSS changer for counting comments. Today, I’d like to build on his idea and take the comments counting to the next level. The aim is for the comments counter to not only be able to add/remove the 's' on the end of comments, but for it to also say 'No comments yet' when the page has not yet been commented. If you’d like to see it in action, I’ve added it to the comments for BMC blog posts… just scroll down to the bottom of the page.

The basics

We’ll start with the basics, building the singular/plural support. For this tutorial, I'm assuming that you're working with the comments module in the live template, but this could just as easily be applied to the ListPages module.

On the live template (category:_template) with the comments module, you will presumably want to say something along the lines of '12 comments'. To remove that pesky 's' when only one comment has been posted, you just need to wrap a span around the 's', and use the %%comments%% variable in the class name.

%%comments%% comment[[span class="sp%%comments"]]s[[/span]]

Streamline your page comments

Leave all but the necessities in your page comments with this quick and easy makeover

comments-streamlined-banner.png

When you use the Comments module to add page-by-page comments to your site, you’re effectively taking a thread from the forum and adding it to each page. While this is a quick and easy way of allowing people to chat about the content of that page, the design itself leaves you with lots of extras that would be fine in the forum, but are a little out of place at the bottom of the page. So we’re going to show you how to give the comments module a makeover, removing all but the bare essentials, so that the focus is back on the comments themselves - Oh, and we’ll make it look nice too!

First, we’ll get rid of all the unnecessary content - you can remove as much or as little as you like, it’s all up to you. Personally, for page comments, all I really want to see is the comment, who posted it and when. That means I’ll remove the post title, the options in the post head, user signatures, their avatar and karma and post changes. To let people fix any mistakes in their post, it’s a good idea to leave the options link at the bottom of the post.

.comments-box .title {
    display: none;
}
.comments-box .head .options {
    display: none;
}
.comments-box .post .signature {
    display: none;
}
.comments-box .head .info .printuser .small {
    display: none;
}
.comments-box .post .changes, .comments-box .post .long .changes {
    display: none;
}

That leaves us with the following:
Comments-post-1.png
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.