One of the important and unavoidable features on every blog are guest comments. In this article you can read about proper comments section HTML and also download some FREE comments css examples.
One of the important and unavoidable features on every blog are guest comments. You want your readers to get involved and post comments, it tells you how much they're interested in the topic and are willing to have their say. The thing that will invite users to read and post comments on your blog is taking the extra effort in styling comments properly and make them more readable.
Proper Comments Section Markup
We will start at the beginning, with HTML code. Let's see what the comments really are. Basically it is a list of users remarks about certain topic. More so, that list has a chronological component since users post their comments one after another, no mixing here... So, the choice for the HTML element we'll use with comments is pretty obvious – we're going with ordered list <li>.
Comments has meta data that is common for each entry. Things like commenter's name, url, date when he or she wrote it etc. are info that helps us follow the comment “timeline". Apart from this meta data we have the comment content itself. We can then say that each comment has 2 separate sections: comment meta data and comment body.
Let's translate all of this into HTML. We said that we're using ordered list for comments:
<ol class="comments"> <li></li> </ol>
I used class although you can easily go with ID. I doubt that there will be a situation where you'll have 2 or more comment lists on on page.
Next, the meta data we mentioned. We have:
- gravatar (this is optional really...)
- commenter's name
- commenter's homepage
- the date when comment was posted
When you look at it like that, you can say that this is a list of meta data. Because they have no particular order (we can move them around as we please) we're using unordered list <ul>. For the comment body we are using simple <div>. That is more than suitable in this case. DIVs mark up the divisions or sections of the document which comment body most certainly is.
Now our comment's markup looks like this:
<ol class="comments"> <li> <ul class="meta"> <li><img src="path-to-gravatar.gif" alt="Author's name" /></li> <li><a href="url-to-authors-homepage.html">Author's name</a></li> <li>posted on date-goes-here</li> </ul> <div class="body">Comment text goes here...</div> </li> </ol>
Note that we combined author's url and his name into one list item.
To gain even more control add class names for each of the items in meta data list
<ul class="meta"> <li class="image"><img src="path-to-gravatar.gif" alt="Author's name" /></li> <li class="author"><a href="url-to-authors-homepage.html">Author's name</a></li> <li class="date">posted on date-goes-here</li> </ul>
Some of you might want to take somewhat different way and put all of those meta data into one sentence. In that case we will use paragraph <p> instead of unordered list <ul>:
<ol class="comments"> <li> <p class="meta"><img src="path-to-gravatar.gif" alt="Author's name" /> On date-goes-here <a href="url-to-authors-homepage.html">Author's name</a> wrote:</p> <div class="body">Comment text goes here...</div> </li> </ol>
Styling the Comment Section
We'll start with basic styling, setting up margins and paddings for comment list:
.comments{
margin:1em 0;
padding:0;
}
.comments li{
margin:0;
padding:0;
list-style:none;
}
If we choose to use unordered list for meta data we might want to reset the default styling for that list as well:
.comments .meta, .comments .meta li{
margin:0;
padding:0;
list-style:none;
}
Style 1
.comments, .comments ul, #comments li{
margin:0;
padding:0;
list-style:none;
}
.comments li{
margin:1.5em 0;
position:relative;
font-size:13px;
}
.comments a{color:#5a7981;text-decoration:none;}
.comments a:hover{color:#555;}
.comments .meta{
padding-bottom:32px;
background:url(01/bg_comments1.gif) no-repeat 0 100%;
}
.comments .meta li{
margin:0;
display:inline;
font-size:12px;
color:#777;
position:static;
}
.comments .meta .author{
font-size:14px;
font-weight:bold;
}
.comments .meta img{
position:absolute;
left:28px;
top:68px;
z-index:100;
border:1px solid #bfd5da;
}
.comments .body{
padding:10px 28px 20px 100px;
background:url(01/bg_comments2.gif) no-repeat 0 100%;
min-height:58px;
}
Style 2
.comments, .comments ul, #comments li{
margin:0;
padding:0;
list-style:none;
}
.comments li{
margin:1.5em 0;
position:relative;
font-size:13px;
}
.comments a{color:#89c140;text-decoration:none;}
.comments a:hover{color:#555;}
.comments .meta{}
.comments .meta li{
margin:0;
display:inline;
font-size:13px;
color:#777;
position:static;
}
.comments .meta .image{display:none;}
.comments .meta .author{
float:left;
font-weight:bold;
padding-left:35px;
line-height:36px;
background:url(02/ico_comments.gif) no-repeat 0 50%;
}
.comments .meta .date{
float:right;
color:#999;
font-style:italic;
font-size:11px;
line-height:36px;
}
.comments .body{
clear:both;
padding:20px 20px;
background:#fff url(02/bg_comments.gif) repeat-x;
}
Style 3
.comments, .comments ul, #comments li{
margin:0;
padding:0;
list-style:none;
}
.comments li{
margin:1.5em 0;
position:relative;
font-size:13px;
background:url(03/bg_comments.gif) no-repeat 0 0;
overflow:hidden;
}
.comments a{color:#5a7981;}
.comments a:hover{color:#555;text-decoration:none;}
.comments .meta{
float:left;
display:inline;
width:100px;
}
.comments .meta li{
background:none;
margin:0;
}
.comments .meta .date{
color:#999;
font-size:11px;
}
.comments .meta img{
border:1px solid #bfd5da;
}
.comments .body{
float:left;
display:inline;
width:425px;
padding:1em 0;
margin-left:47px;
}
Style 4
I used only one image for this example so it can be easily customized.
.comments, .comments ul, #comments li{
margin:0;
padding:0;
list-style:none;
}
.comments li{
margin:1.5em 0;
position:relative;
font-size:13px;
background:url(04/bg_comments.gif) no-repeat 0 0;
overflow:hidden;
}
.comments a{color:#edecd8;text-decoration:none;}
.comments a:hover{color:#fff;}
.comments .meta{}
.comments .meta li{
margin:0;
display:inline;
color:#777;
background:none;
}
.comments .meta .image{display:none;}
.comments .meta .author{
float:left;
font-weight:bold;
padding-left:40px;
line-height:39px;
margin-bottom:10px;
}
.comments .meta .date{
float:right;
color:#fff;
font-style:italic;
font-size:11px;
line-height:39px;
margin-right:12px;
}
.comments .body{
clear:both;
padding:10px 28px 40px 28px;
background:#fff url(04/bg_comments.gif) no-repeat 0 100%;
}
Alen Grakalic is a designer, developer and a passionate standardista with large experience in all types of front-end work. Started to get involved with web in 1999. and turned freelance in 2005., the same year he started Css Globe. Alen's work has been featured on numerous css galleries including famous Css Zen Garden official list.
Most recent blog updates
- 29 Sep, 2009 - Styling Blog Comments: Correct Markup and Free Examples
- 17 Sep, 2009 - New Premium Css Template - PSD included
- 17 May, 2009 - Red CSS Template
- 24 Mar, 2009 - Grid Based Template
- 1 Feb, 2009 - Templatica Twitter Contest Results
Jasmin Halkic on 29 Sep, 2009 wrote:
Very nice article. Thank you.Antonio on 29 Sep, 2009 wrote:
Thank you, very useful hints.Nik Makhov on 1 Oct, 2009 wrote:
Great article, thank you very much, I've just translated it into Russian, for our web-masters page - http://web-grower.ru/razmetka-dlya-kommentariev-v-bloge.htmlLiam on 1 Oct, 2009 wrote:
These are great but being a bit of a Wordpress noob can you tell me how to setup the third example in my Wordpress blog? I assume I can copy and paste the css over the default comment css however I'm confused as what to do in the comments.php file?Quicken Websites on 2 Oct, 2009 wrote:
Great! Easy and very well put) Thank you for your great job!Sean on 2 Oct, 2009 wrote:
This will come in handy on my next blog design project.Roberto on 2 Oct, 2009 wrote:
Wow, great work! Thank you for sharing.Mike Tok on 5 Oct, 2009 wrote:
Thank you for sharing your idea . At least now I got a reference to read if I'm facing problem coding the comments template.. Hope to see more articles from you in the future.Jack Bremer on 6 Oct, 2009 wrote:
You didn't mention about putting nofollow in there too!TheBigO on 11 Oct, 2009 wrote:
Good article.School Grant Help on 15 Oct, 2009 wrote:
your idea helped me in clearing my questions.... thanksrapid4me on 19 Oct, 2009 wrote:
Markup is still a dark horse for me, I am thus to get any info about it. Your post is well written and easily understtod. thank you!Bank on 21 Oct, 2009 wrote:
you should use it on this site...Autonomy on 24 Oct, 2009 wrote:
Ha! Word, @Bank - that is a great point. This site could use Alen's advice.Thanks for the article.
Rachit Bhargava on 27 Oct, 2009 wrote:
heyy dude its a great blog...just keep goin...
Rachit Bhargava
Google
Skech on 30 Oct, 2009 wrote:
Thanks. Your post helped me a lot.Rahul - Web Guru on 16 Nov, 2009 wrote:
Thanks for the styles, have downloaded my copy of the examples.Cheers.
Torbjoern Karlevid on 17 Dec, 2009 wrote:
Errors found while checking this document as XHTML 1.0 Transitional!http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ftemplatica.com%2Farticles%2Fcomments%2F01.html
Sorry! We found the following errors (1)
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Ftemplatica.com%2Farticles%2Fcomments%2F01.html
shoaib hussain on 21 Dec, 2009 wrote:
awesome n cool n grabbing the blue one with bubble in it,.hizlindir on 22 Dec, 2009 wrote:
thank you for informationhizlindir on 22 Dec, 2009 wrote:
sorry. l wrote my web site adress mistake. :D again thanksNick Matyas on 7 Jan, 2010 wrote:
Really wonderful post. this blog is awesome.Posts with more information will be great.
Webroyalty
Deaf school on 12 Jan, 2010 wrote:
is still a dark horse for me, I am thus to get any info about it. Your post is well written and easily understtod. thank you!Custom Stickers on 18 Jan, 2010 wrote:
Great blog and great information thanks for share this coding information.Promotional Giveaways on 23 Jan, 2010 wrote:
It's really very strange thing that you have such a great site and blog. But you don't update it. This is my first visit here. You should update this awesome blog.Valentine Sms on 27 Jan, 2010 wrote:
yah i like it thanks and keep postings.Funny text messages on 27 Jan, 2010 wrote:
its really very nice and informative posting thanks for sharing this with us...volkan on 30 Jan, 2010 wrote:
I think it is a bit complicated but I've liked.it is better if you check it again.
It is well liked as summarized
sanem on 30 Jan, 2010 wrote:
I congratulate you for this blog.I've really enjoyed.
I sincerely thank you again
aceite de onagra on 31 Jan, 2010 wrote:
great post, very interesting and informative.i enjoy reading your blog and your templates too
thanks
Wine Shaker on 4 Feb, 2010 wrote:
nice post , thanks for help my question!warren farrell on 5 Feb, 2010 wrote:
great blog posting..thanks for share coding info.....Jamal on 19 Feb, 2010 wrote:
Good article had doubt on markups to use for commenting, this has made it clear. Wonder if there will be an update for threaded comments markup!Serguei Panfilov on 24 Feb, 2010 wrote:
Alen, thanks a lot for sharing these nice styles. I'm impressed, so now I'm following you on Twitter and subscribed to your RSS feed.Zhenden on 26 Feb, 2010 wrote:
I congratulate you for this blog.I've really enjoyed.
I sincerely thank you again
henden on 26 Feb, 2010 wrote:
nice post , thanks for help my question!hendenoy on 26 Feb, 2010 wrote:
great post, very interesting and informative.i enjoy reading your blog and your templates too
thanks
john on 1 Mar, 2010 wrote:
coolFinance Tips.
Rick on 1 Mar, 2010 wrote:
I know this is such an awesome blog, i loved this post, styling blog comments can be quite hard sometimes. Finding great resources like this blog is very rare.Check out this other resources I love.
Gana Dinero.
Google Maps Directions.
Mapquest Driving Directions.
Big R on 1 Mar, 2010 wrote:
I was looking for this code a long time ago, thanks!Peliculas Online Gratis.
Krugerrand Coins.
Descargar Google Earth Gratis.
battletoad on 1 Mar, 2010 wrote:
Great info, thanks for the code!Debt Consolidation Loans.
Financial Planning.
0 Credit Cards.
juansuarez on 1 Mar, 2010 wrote:
thanks for the info, I wish had found this code earlier when i started bloggingTraductor Gratis Google.
Make Money Online.
Making Money Online.
Messenger Gratis.
littlejuan on 1 Mar, 2010 wrote:
thanks!rocky quotes.
Nike Air yeezy on 2 Mar, 2010 wrote:
ugg retailersNike Air yeezy
suarezcolvert on 3 Mar, 2010 wrote:
Great site and information! Styling blog comments can be tricky sometimesMake Money.
How to Make Money Fast.
zhendn on 4 Mar, 2010 wrote:
thanks for the info, I wish had found this code earlier when i started bloggingPenny Stocks on 4 Mar, 2010 wrote:
it’s really an interesting article. superb… for reading it, Nice article. Thank youramalho on 4 Mar, 2010 wrote:
Hi WEB Family,Great article and is very useful.
Thanks for sharing
facebook application development on 5 Mar, 2010 wrote:
great article shearing with us thanks.facebookguru on 5 Mar, 2010 wrote:
Hey! you are give a very good info about code it's really interesting, it's very helpful for us.rick on 9 Mar, 2010 wrote:
great info, great examples, thanksgana dinero.
Round Table.