Removing radius from images

Home › Forums › Gillion Theme › Removing radius from images

Home › Forums › Gillion Theme › Removing radius from images

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

  • test2
    Participant

    Hi! I see that the theme comes with rounded corners for all image thumbnails. How can I remove the rounded corners on my images throughout the website. I need all the images to to be rectangles or squares. Thank you!

    Shufflehound Support
    Moderator

    Hi @test2,

     

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

     

    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

     

     .post-thumbnail,
 .post-thumbnail img,
 .post-thumbnail .sh-ratio-content,
 .post-switch-item,
 .sh-widget-instagram-item img,
 .sh-widget-instagram-item-overlay,
 .sh-read-later-thumbnail,
 .sh-read-later-thumbnail:after,
 .sh-overlay-style1,
 .sh-comment-form,
 .post-media-play-overlay,
 .post-media-play-overlay:after,
 .post-quote-link .sh-ratio-content,
 .post-gallery-list,
 .post-gallery-list .slick-list,
 .post-switch-item:after,
 .widget_facebook iframe,
 .sh-widget-facebook-overlay,
 .sh-widget-posts-slider-thumbnail,
 .sh-widget-posts-slider-group-style2,
 .sh-widget-posts-slider-group-style2 .slick-list.draggable,
 .post-content-review-details,
 .post-content-review-progressbar-graph,
 .post-content-review-progressbar-graph-fill,
 .sh-post-author,
 .post-content-share .jssocials-share,
 .sh-comment-form input,
 .sh-comment-form textarea,
 .post-content img,
 .sh-widget-facebook-item {
 	border-radius: 0;
 }

     

    Best regards,
    Shufflehound team

    test2
    Participant

    Hi, thanks for the reply!

     

    I did exactly what you have instructed, unfortunately, all the images still have rounded borders. Please advise.

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

    Shufflehound Support
    Moderator

    It should work.

     

    Could you please share me your site URL where you are using shared CSS code so that i can troubleshoot it?

    test2
    Participant

    it is http://test2.projectpineapple.co/en_US/

     

    thank you!

    Shufflehound Support
    Moderator

    Solution for this topic

    It is not working because of CSS specificity issue on your share site so to make it work just change shared code as following.

     

     .post-thumbnail,
 .post-thumbnail img,
 .post-thumbnail .sh-ratio-content,
 .post-switch-item,
 .sh-widget-instagram-item img,
 .sh-widget-instagram-item-overlay,
 .sh-read-later-thumbnail,
 .sh-read-later-thumbnail:after,
 .sh-overlay-style1,
 .sh-comment-form,
 .post-media-play-overlay,
 .post-media-play-overlay:after,
 .post-quote-link .sh-ratio-content,
 .post-gallery-list,
 .post-gallery-list .slick-list,
 .post-switch-item:after,
 .widget_facebook iframe,
 .sh-widget-facebook-overlay,
 .sh-widget-posts-slider-thumbnail,
 .sh-widget-posts-slider-group-style2,
 .sh-widget-posts-slider-group-style2 .slick-list.draggable,
 .post-content-review-details,
 .post-content-review-progressbar-graph,
 .post-content-review-progressbar-graph-fill,
 .sh-post-author,
 .post-content-share .jssocials-share,
 .sh-comment-form input,
 .sh-comment-form textarea,
 .post-content img,
 .sh-widget-facebook-item {
 	border-radius: 0 !important;
 }

    test2
    Participant

    Hi, thank you for this! It works but not everything is changed.

    • Carousel slider on landing still rounded corners.
    • When hover on image, image has rounded corners.

    Please advise. Thank you!

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

    Shufflehound Support
    Moderator

    Solution for this topic

    Use below custom CSS code to remove border radius from those images.

     

    .post-overlay,
.blog-slider-item {
    border-radius: 0 !important;
}
  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)