Sunday, January 2, 2011

How to change the background color of the comment block, on specific pages

This tutorial is about how to change the background of the comment block (box), a follow up of my previous post, about customizing the layout of specific pages, hiding the sidebar and changing the page background color.
When changing the background color of just certain post pages or static pages, the comment block background won't change, you have to do it yourself.
On static pages like About page or Contact page, we usually don't allow comments but if you do, you have to change the background of the comment block and probably, the text color too, after you've changed the page background.
The same, when changing the background color of certain post pages.

1. Change the comment block (box) background color on layout templates

- Go to Dashboard|Design|Edit Html
- Back up your template!!!
1.1. Using the code from my previous tutorial, you can include in this code one more line that will change the comment block background too.
<b:if cond='data:blog.url == &quot;your page url&quot;'>
<style>
.header,.sidebar,.footer {display:none;}
#outer-wrapper {width: 660px; padding:0;}
#main-wrapper{background: #ffffff url(background image url); width: 660px; margin: 0;}
.post {padding: 20px; }
.post h3 a {font-size:160;}
#comments-block {background: #ffffff; color: #000000;}
</style>
</b:if>
Add the code highlighted in yellow to the code from previous tutorial, if you want all the changes.

1.2. Change just the background color of the comment block on specific pages.
If you don't want all the above changes, you just want to change the comment block background and text color, than use this code:
<b:if cond='data:blog.url == &quot;your page url&quot;'>
<style>
#comments-block {background: #ffffff; color: #000000;}
</style>
</b:if>
In both cases:
- insert the code just above the </Head> tag, in your template;
- Replace the part in blue with your page url;
- Change the color in red, the background color of the comment block and text color, with your preferred color.

2. Change the comment block background color on designer templates

In this example the class .post outer .comments is found in the Awesome Inc. template and a few other templates. Check if you can find it in your template, otherwise it won't help you.

Method 1.

- go to Dashboard|Template Designer, click Advanced in the left menu,
- scroll down to the Add CSS submenu and enter the following code in the editor box:
.post-outer .comments {
background: #ffffff;
color: #000000;
}
To preview, now you should hit enter, but you will not see the changes on the homepage.
Click Apply to blog, than go back to your blog and see the changes on a blogpost where you already have comments.

This method is safe because you don't have to work in the template directly.
You can come back any time and undo this operation. The code will be there in the template designer editor, you can delete it.
The problem is that the above method will change the comment block background on all your pages.
To do these changes on only specific pages, we have to go into the template:

Method 2.

Step 1. Go to Dashboard|Design|Edit HTML;
Step 2. Back up your template!!!
Step 3. Copy the following code and paste it right above </Head>

<b:if cond='data:blog.url == &quot;your page url&quot;'>
<style type='text/css'>
.post-outer .comments {
background: #ffffff;
color: #000000;
}
</style>
</b:if>
Step 4. Replace the code in blue with your own page url ;
Step 5. Change the color in red to your preferred background and text color;
Step 6. Try to preview; when the preview loads correctly, you can save your edits and see the result on a page with existing comments.
When not, just push Clear edits and try again.

That's all for today, hope it will be helpful.

Related posts are in the sidebar, if interested.

12 comments:

Billy said...

Not only does this hack NOT work (I've followed the instruction to the tee) it also messes your home page up (it removed my sidebar completely!)

maiaT said...

Oh yes. it did, if you used the first code. That is the purpose of it, as stated in the first paragraph.

For your template, to change just the comment box background of specific pages (as in the title), the second code will work.

Billy said...

@maiaT

I tried both and neither work. I've just been informed that the comment box is within an iframe and CANNOT be customised, so this hack is a complete waste of time. You're trying to do something that can't be done. If you don't agree, then show me a blogspot blog where the comment box background is anything other than white.

maiaT said...

Here is a
screenshot
of one of your own blogposts, the first one having a comment. You will never see the background color on posts without comments.
The code changes the bgcolor of the entire comment block. It is useful when you change the bgcolor on some of your pages like static pages or a few post pages like this one.
Another example is this very page, look at the comment block color, it's another shade of the background!
Or another one here.

Your informer is wrong, we are just changing the css styling. You are right instead; we are both wasting our time , you have no idea what you want or what is Blogger about.
I might help you though, after you apologize.

Billy said...

I'm afraid it is you who is wrong. What you're talking about here is changing the background colour of the blog author and/or the background colour of the comments themselves.

You header for this artice says:

"How to change the background color of the comment box"

The comment box is the box in which you actually type your comment, not where they display once they've been published.

maiaT said...

No, that is the comment form itself and it is not part of your content, while comment text is.
The form itself is a Blogger tool, the same for everyone. Blogger doesn't let us customize its tools but you can always opt for an alternative comment platform that does.

Those who applied or even have read the changes from my previous tutorial will understand my title right. Copy/paste is not always enough, sometimes we must think.

maiaT said...

On second thought, it would be a good idea to replace the word "box" with block (as in the code) to avoid such kind of misunderstandings in the future.
Thanks for the tip.

Billy said...

Well I'd now like to apologise for my previous posts - which must have sounded somewhat cold. The whole thing was a misunderstanding - some call it a comment box, some a comment form.

Like you say, I may need to try a third-party, customisable comment system.

Torin Chaos + Photography said...

I hope you are still answering comments about this post, because I am really in need. I have spent 7 hours trying to change either my comment box to black or the comment text to white so it will show up properly in my blog. Please take a look and see if you can help! Thanks

http://torinphoto.blogspot.com

maiaT said...

This is not a usual template, very beautiful though.

1. for the comments that people leave on your blog, find this piece of code:

#comment-header{float:left;border:1px solid #cccccc;padding:5px 0 40px 10px;margin:5px 0px;background-color:#fff;

- change the #cccccc and #fff to any color you like.

2.you can change the text from above and bellow the box, in the following line:

#comments h4{margin:1em 0;font-weight:bold;line-height:1.4em;text-transform:uppercase;letter-spacing:.2em;color:$sidebarcolor}

- change the $sidebarcolor to any color code like so: color:#d5074b; (don't forget the semicolon)
3. Save and view it on a page where you have comments, like your TWU page.

4. You can't change the textarea after "post a comment", at least, I don't know how.
I'm using the popup option of the comment form, so it is not visible on the page.
That's it, hope it works.

Torin Chaos + Photography said...

Thank you so much!!! It totally worked! You stopped me from pulling the rest of my hair out in frustration, lol, so I truly thank you! I'm definitely following your blog, hope you do the same! Either way, you were a total lifesaver.

Kurnaz Ahmet said...

A great work! Thanks, man!

Post a Comment

Thanks for taking the time to comment.
I like to read your thoughts and answer your questions, however comments containing links will be deleted and reported as spam.
Thanks for being understanding.

Search for photos, macro photos or paintings.

Do you want to create a separate archive page for your blog too?
If yes, click the link above to go to the tutorial.