Streamline your page comments

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

Next we’ll start to construct the container for the comments. It’s simply a border radius to give them curved corners, and a gradient in the background to make it more pleasant on the eye. When you change the colour of the gradient to match your site, remember to change the hex (colour) codes for both of the gradient declarations (-webkit- and -moz-). We’ll also add a 1px border, define 5px of padding and define the width at 700px.

.comments-box .post {
    border: 1px solid #ddd;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 5px;
    background: #fefefe;
    background-image: -webkit-gradient(linear, 100% 0%, 100% 100%, from(#fff), to(#f6fcfe));
    background-image: -moz-linear-gradient(top,#fff,#f6fcfe);
    width: 700px;
}

Now it’s starting to take shape…
Comments-post-2.png

We’ll now fix up the header of the post by making the background transparent, floating the date to the right and making the user’s name more defined.

.comments-box .post .head {
    background: transparent;
}
.comments-box .head .info .odate {
    color: #7c7e7e;
    float: right;
    font-size: 0.9em;
}
.comments-box .head .info .printuser a {
    font-size: 1.1em;
    color: #a3bb2a;
    font-weight: bold;
}

We’re nearly there now…
Comments-post-3.png

We just need to make the options button at the bottom match the theme, and we’ll give each post a margin of 10px so they don’t sit right on top of each other.

.comments-box .post .options {
    font-size: 0.9em;
}
.comments-box .post .options a {
    color: #3198dd;
}
.comments-box .post-container {
    margin: 10px;
}
Comments-post-4.png

And that’s just about it - your page comments are now extra streamlined and super cool. There are some other changes you can make; for example, if you’ve removed the post title then it’s a good idea to remove the input section for it as well (using the following code):

.comments-box #new-post-form #np-title {
    display: none;
}

Depending on the type of user visiting your site, you may also decide to remove the wikidot editor panel (all the buttons) to make it look even cleaner. This can be achieved with the following code:

.comments-box #new-post-form #np-editor-panel {
    display: none;
}

You can see the the final result in action in the comments below.

Enjoy the article? Tweet it!

Discussion - No comments yet…2 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
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.