Home Forums Lorina Pro Customizating the individual blog post view

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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.

    #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.

    #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;
    }
    #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?

    #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;
    }
    #13455
    kristincali
    Participant

    THANK YOU

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.