Make featured post images round

Home › Forums › Jevelin Theme › Make featured post images round

Home › Forums › Jevelin Theme › Make featured post images round

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    RESOLVED Posts

  • Vivienne
    Participant

    How do I make these images round like in the demo?

     

    (see screenshot)

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    Hi @Vivienne,

     

    I hope you are well today and thank you for your question.

     

    Could you please share the page URL from your site where it is displaying so that I can help you?

     

    Best regards,
    Shufflehound team

    Vivienne
    Participant

    http://thisonederfullife.com/

    Shufflehound Support
    Moderator

    You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    #page-container .sh-recent-posts-widgets-item-thumb {
    width: 76px;
    height: 76px;
    border-radius: 100px;
}

#page-container .sh-recent-posts-widgets-item-thumb .sh-ratio {
    border-radius: 100px;
    overflow: hidden;
}

#page-container .sh-recent-posts-widgets-count {
        top: 2px;
    right: 2px;
}

     

    Vivienne
    Participant

    This created another issue with alignment (the images are over the lines dividing posts)

     

     

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    Please also use the below CSS code to resolve this issue.

     

    #page-container .sh-recent-posts-widgets-item-thumb {
    top: -14px;
}

    Vivienne
    Participant

    Hi again,

     

    The hover element on this is still square — how can I make it round like in the demo? (See image) — page is this main page sidebar: http://thisonederfullife.com/

    Is there a way of achieving this without custom CSS? I’m surprised it’s not a setting since it is included in the demo here: https://jevelin.shufflehound.com/blog1/

    Thank you

     

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    Solution for this topic

    To achieve this without using custom CSS code, please set the Blog Style to Style 2 in the theme settings as shown in the attached screenshot.

    Attachments:
    You must be logged in to view attached files.

    Vivienne
    Participant

    Perfect! Thank you!

    Shufflehound Support
    Moderator

    You are always welcome here 🙂

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)