Customizing BookLikes Tutorial - Part 7 - Back to basics. Changing the the colour of your comments section.
Taking a break from sorting out my shelf categories and I thought I'd do a tiny tutorial on changing the background colour of the comments section below posts. I use template one (the default choice) and this method may or may not work for the other styles.
So, first things first.... If you have stumbled across this post by accident and are not sure where these changes need to be made you might want to check out tutorial #1 which deals mostly with the customizing menu. It's just a basic run-through but might save a bit of frustration if you know in advance where to make the following changes.
The colour scheme I use doesn't really have a problem with the transparent comment section (outlined in red) as I use just a plain colour as a main background. If you use a dark background colour though, or have a busy image as a main background on your blog then you may have a hard time reading your comments below posts (and your commenter's may have difficulty also) so here's how you remedy that...
As always it's a simple CSS trick that will do all the hard work for you and because you won't be messing with the html side of things it's a one copy/paste deal. One simple change and all your pages are sorted at once.
Changes are all made in your Customize menu. If it's been a while since you fiddled with things in there - you might want to re-visit the menu 'how to' in part one as a visual reminder of where to find the hidden slider to get to the good stuff at the bottom of the menu.
I'm going to use this colour as my comment background:
Hex code colours and pickers were mentioned in part 2 here, and are just the codes used to display colour in your browser. The hex code for the colour sample above is #b6d3de but you can choose any colour you like. I'll add the codes for plain black and/or white at the end. If you'd like to choose a fancy colour that matches your scheme, you can choose a nice once at this hex colour picker.
Now then, the easy bit....
Once you've picked the colour you'd like to use and have fought your way into the customizing menu, right at the bottom in the CSS section you need to paste this code in, remember to substitue my colour choice (in bold) with your own:
div.posts.set-right {
background-color: #b6d3de;
margin-top: 2px;
}
Make sure the '#' symbol and the '}' symbols are in place and you're work here is done.
Remember to click 'save' before you leave and it's all over. Done, I say!
The comment section in template one is actually the whole strip of page behind your posts so any colour you add there will add all the way down, behind everything. At the bottom you see this after adding your new colour to your comment section.
Beautiful.
That colour will also show a tiny bit in between posts and at the very top of your posts a little bit too though.
Between posts will now look like this (on your actual blog, but not while in dashboard)
And at the top of your posts you'll also see a little bit poking up from behind, like this...
I added a 2px margin at the top so that it doesn't overlap with the header at all...because overlaps give me nightmares and make me cry :D
That's it really, nothing to it. If you'd like to use just plain white as a background to your comments, just replace my #number in the code with #FFFFFF and if you'd like it to be black use #000000
Depending on what colour your fonts are in your comment section, using black may give you a whole new set of problems as the default black font wont show up there without changing font colour. I haven't covered that here but if it's something that's useful, I'll try and do a new tutorial about that.
In the meantime, hope this is helpful to someone. If anything isn't clear or seems broken...you know the drill.....just come back here and HOLLER :P
Part Two - Adding a new header
Part Three - Changing your main page background colour
Part Four - Moving follower buttons
Part Five - Changing the look of your follower buttons
Part Six - Changing the background colour of your comment section
2
7
3