Themis-Athena's Garden of Books

To make your comments more readable you may have decided to put a uniform background under a comment section. But wouldn't it be awesome to make it transparent so they are more readable while your background image (presumably an awesome one that you want to show off) remains visible?

 

 

 

Bad news: we cant use an "opacity: 0.5" command. It affects all elements in a given section, so we'd end up with something like this:

 

 

And that is not cool. We wanted to make comments more visible! Not less.

 

 

Good news: there’s an easy and quick solution.

 

First we need to create a new class (I decided to call mine 'comments'):

.comments {background: rgba(0, 0, 0, 0.5);}

 

!!!Make sure to copy this line it it's entirety, commas, semicolons, the whole thing.!!!

 

 

!!!WARNING!!!

 

If you have a wooden them you can't name class "comments". It messes with pre existing classes. You could go with (I've tried, it worked):

.commentsbg {background: rgba(0, 0, 0, 0.5);}

 

 

(or anything else you want) I should have just stuck with silly names like "dumbledor" or "aragorn" or "cake". Change it accordingly in all (two) places.

 

 

With this way of doing it rgb colour values have to be used (red, green, blue – you declare how much of each colour you want. I decided to go with black, so I have three zeros. I’m smart like that).

 

Here’s a link to a page where you can get rgb colour values:

http://html-color-codes.info/

 

 

 

 

Last number stands for opacity of background colour  (0.5 -> 50%)

 

 

Go to settings -> blog -> customize -> edit html

 

Paste the code (before <*style> ):

 

 

or

 

 

 

 

Then find a piece of code responsible for comments ( This part is responsible for normal comments - and please, use a search bar!)

 

 

 

 

Those are special comments (Facebook ones and Disqus):

 

 

Type in things underlined with red (<*br> x3 creates a gap between a post and a comment section. If you don't want it, you can skip that particular part)

 

 

 

If I wanted it this colour:

 

 

 

 

 

Also, if you don't want this effect for facebook comments and disqus just move <*/div> a bit higher:

 

 

 or

 

 

It worked for me. Menu is on the side. Try to to place code exactly as I did above.

 

 

 

For a white background:

.comments {background: rgba(255, 255, 255, 0.5); }

 

 

 

 

That's it. You're done! I told you it was easy ^^