Friday, December 15, 2006

Add background colors to comments

Hi all,

This is a quick & dirty or a simple hack (if you want to call it that) that allows one to add a background color to the comments. I have this set in my blog and you can simply check the post page for one of my posts that has comments to see what I am talking about. Here is an image for your convenience:


Interested? Please backup your template before proceeding with this hack.

In this hack you can assign a different background color (and text color) for the blog author’s comments (see the image above) and to do this you must have this Hack (Author comment highlighting) from Hackosphere installed.

Once you install the author comment highlighting hack from Hackosphere, your comment code will look similar to this:


/* Comments
----------------------------------------------- */
#comments {
margin:0;
}
#comments h4 {
margin:0 0 10px;
border-top:1px dotted $borderColor;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background:url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 2px .35em;
margin:.5em 0 0;
padding:0 0 0 20px;
font-weight:bold;
}
.comment-body {
margin:0;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-body-author {
margin:0;
padding:0px 0px 0px 20px;
}
.comment-body-author p {
font-size:100%;
margin:0 0 .2em 0;
color:#000000;
text-decoration:bold;
}
.comment-footer {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#996;
}
.comment-footer a:link {
color:#996;
}
.deleted-comment {
font-style:italic;
color:gray;
}



Now check out this modified code. As the comment section CSS may differ across various templates, do not copy-paste the entire code. Understand and pick up the changes shown in italic-bold (and annotated for reference). Also Checkout the image below to see what I mean by comment header, comment body and comment footer in my annotations.


/* Comments
----------------------------------------------- */
#comments {
margin:0;
}
#comments h4 {
margin:0 0 10px;
border-top:1px dotted #99bb99;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background:#CCFFCC /*comment header background color (comment author name)*/
url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 2px .35em;
margin:.5em 0 0;
padding:0 0 0 20px;
font-weight:bold;
}
.comment-body {
background:#99FFFF; /*Reader comment background color*/
margin:0;
padding:7px 7px 7px 7px; /*Modified padding values*/
}
.comment-body p {
margin:0 0 .5em;
}
.comment-body-author {
background:#cccccc; /*The author comments background color.*/
margin:0;
padding:7px 7px 7px 10px; /*Modified padding values*/
}
.comment-body-author p {
font-size:105%;
margin:0 0 .2em 0;
color:#6728B2; /*The author comments text color.*/
text-decoration:bold;
}
.comment-footer {
background:#CCFFCC; /*Comment footer background color (comment permalink)*/
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#996;
}
.comment-footer a:link {
color:#996;
}
.deleted-comment {
font-style:italic;
color:gray;
}


To pick up color hex values that suit your blog you can refer to this link. This is a simple tutorial on how to modify your comment section. You can add a whole lot of CSS to make it look better. Do drop a line here if you are able to create anything good looking based on these lines.

13 comments:

PurpleMoggy said...

I see my purple-bordered code boxes are making the rounds :P

Anonymous said...

hello Vivek,

Really good hack, but;) i am really interesting about the hack you have for the selective expendable post... how you do?

Vivek Sanghi said...

Hello Moggy :) Yes I picked up this code box HTML from your blog. I had gone through your tutorial on pre tags but did not understand it properly so I thought that I should see your page source and find out how you have implemented it and henceforth I am using that code. Infact I have removed the textarea tag from my previous posts and installed your code box there :) BTW any suggestion on how to get rounded edges for this hack.

Vivek Sanghi said...

Hello KCA. Thanks. I am using the hack from Ramani's Hackosphere for Selective expandable posts. You can find it here. I see that you have left comments on that post. I presume you tried applying the hack but it did not work. I recommend trying it on a clean template (where you have never use this hack before) and then removing traces of this hack from your blog and installing it from the scratch once again. If you are unsuccessful drop a line here or Email me so that we can pursue this issue further.

LOUI$$ said...

hi vivek,you know now i have a lot of thing to learn from you?HAR...can you teach me how to hide the adsense in between the post?and how you do you do expandable post with link to the full post....You are great man!

LOUI$$ said...

Bro,the second question i have solve it.Now is about how you hide the adsense in between the post from home page...i so excited man.....

Vivek Sanghi said...

Hello Loui$$. I removed the peek-a-boo read more so that my readers get to read the full story with comments by default. I got this new read more hack from Ramani (link in my previous comment).

For displaying adsense only on full post pages (or item pages)I am using the if statements that I have talked about here.

I am going to post an article regarding this shortly.

Sumesh said...

Vivek, I have a 3col mod Denim from Ramani. In it, there probably isnt the CSS definitions you have outlined. Help Me...

ilker said...

Hi Vivek,

Thank you very much for this hack. I've implemented it in my blog however I cannot get the colors of author's comments change.

Can you please help?

Kind Regards,
ilker
www.thethinkingblog.com

PS. I'm tracking the comments

Agus Sanjaya said...

Hi Vivek, is this hack apply to the new blogger template? I have made my own hack, you can see it here, but to make it work I have to specify two different #comments-block and a little bit code hacking. If the hack made by Rhamani, I know it wouldn't work with the new blogger template.


Visit me here and here.
Can we exchange link?

theotherbudi said...

hallo vivek, i has copy ur hack authority, with this comment i want permission with u, i like ur hack and i has use it in my blog, thks for everything

StickyKeys said...

Gangbusters my dear! I may do some more tweaking but so far it works like a charm, thanks!

Unknown said...

nice

Other posts @ Stubborn Fanatic

Click here to view all my posts.

Creative Commons License
This work is licensed under a
Creative Commons Attribution-ShareAlike 2.5 License.

However, prior permission is required before you can display any content from this blog on your site. The author reserves the right to demand removal of such content at any time for any reason. (Not applicable for back-linking)
Note: The author is not responsible for any loss of data or damages to your homepage as a result of using the hacks suggested here. Please observe all necessary precautions while modifying template code.

© 2006 Vivek Sanghi a.k.a Stubborn-Fanatic