Customizating the individual blog post view

[kristincali]

When clicking on a post to read the entire thing, scroll to the bottom of the blog text and there’s a container with the authors name, photo, category, tags, etc. The background of that section is grey, how can I customize the color? As well as the background of the section right below it with the previous and next links?

Then if you go further down to the Leave a Reply section, I need to change the background color there as well.

Lastly, is it possible to move the reply box up above the related posts? I feel like it is not seen that far down the page.

 

Example:
https://kristinbytheocean.com/how-to-prepare-for-a-successful-photo-shoot/

 

Thank you in advance! This forum is SO helpful and I’m proud to be using your theme.

[Andy]

This Additional CSS will change the background of the author and previous/next sections:

.single .entry-footer,
.single .post-navigation {
    background: #ffffff;
}

And use this to change the comments/reply section (I’ve also added some padding and rounded corners):

#comments {
    background: #ffffff;
    padding: 2em;
    border-radius: 2rem;
}

In the code above, the background color is #ffffff. Change this to the color you want.

[Andy]

Use this Additional CSS to change the ordering on the single post, moving the comments/reply section before the related posts section:

.single-post .site-main {
    display: flex;
    flex-direction: column;
}

.single-post .site-main article {
    order: 1;
}

.single-post .site-main .post-navigation {
    order: 2;
}

.single-post .site-main .related-posts {
    order: 4;
}

.single-post .site-main #comments {
    order: 3;
}

[kristincali]

Thank you Andy, everything worked exactly as I wanted!

Now I have another couple things with those sections. How can I remove the faint grey line beneath the related and leave a reply headers?

Lastly, I tried copying the padding and border-radius code from above but it didn’t work for the author section. How can I round the corners of the author section?

[Andy]

This Additional CSS will remove the heading underlines:

#comments h3.comment-reply-title:before,
.related-posts h3:before {
    background: transparent;
}

The author section already has border radius to the top left and right corners, and padding. To make all four corners rounded, add this Additional CSS:

.single .entry-footer {
    border-radius: 2rem;
}

[kristincali]

THANK YOU

[Author]

Posts