Archived topic

Styling the comments section in a blog

4 replies · Started by Edgar on January 11, 2021

Viewing posts 1–5 of 5

January 11, 2021 at 12:46 pm #1614904

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.

current comments

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

preferred comments look

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

January 11, 2021 at 2:36 pm #1614986

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 :)

January 11, 2021 at 2:44 pm #1614991

Hi Ying,

Thanks for the quick answer.

Here's the result:

comments restyled 1

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

Can you do that?

Thanks,
Edgar

January 11, 2021 at 4:08 pm #1615048

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

January 11, 2021 at 9:45 pm #1615201

Good job!

Glad you figured it out :)

This archived topic is closed to new replies.

Start building better websites today.