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 == "your page url"'>
<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 == "your page url"'>
<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 == "your page url"'>
<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.
Read more >>
