[Resolved] Styling the comments section in a blog

[Edgar]

As a new user, I am still tweaking GP’s appearance for my blog. When users post comments they are rendered like the following, not separating one comment from another except only by blank space. Makes it hard to read.

I would like to style the comment section with each comment on this colored background (the same one I use for blockquote):

Just for reference, here’s the code I used to create the box for blockquotes:

blockquote { border: 1px dashed #999966; background-color: #e0e1ce; margin-left: 30px; margin-right: 30px; padding: 15px 20px 15px 20px; font-size: 19px;}

Can you help me with code to make my new comments section look like the sample above? And please tell me exactly where I am to put the code since I am still learning GP. MUCH APPRECIATION for your help.

Edgar

[Ying]

Hi Edgar,

Try this CSS:

.comment {
    border: 1px dashed #999966;
    background-color: #e0e1ce;
    margin-left: 30px;
    margin-right: 30px;
    padding: 15px 20px 15px 20px;
    font-size: 19px;
}

Let me know 🙂

[Edgar]

Hi Ying,

Thanks for the quick answer.

Here’s the result:

It just needs a little space in between the comments so they are separate boxes.

Can you do that?

Thanks,
Edgar

[Edgar]

Hi Ying…

I figured it out.

I just added margin-bottom:20px; to your CSS and it worked to add white space between comments.

Thanks for your help.

Edgar

[Ying]

Good job!

Glad you figured it out 🙂

[Author]

Posts