[Resolved] Customizating the individual blog post view

Home › Forums › Lorina Pro › Customizating the individual blog post view

Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 10, 2021 at 7:56 pm #13398
    kristincali
    Participant

    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.

    February 11, 2021 at 9:58 am #13403
    Andy
    Keymaster

    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.

    February 11, 2021 at 10:08 am #13404
    Andy
    Keymaster

    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;
}
    February 11, 2021 at 10:04 pm #13424
    kristincali
    Participant

    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?

    February 12, 2021 at 9:50 am #13426
    Andy
    Keymaster

    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;
}
    February 15, 2021 at 5:47 pm #13455
    kristincali
    Participant

    THANK YOU

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Customizating the individual blog post view’ is closed to new replies.