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
  • 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!

    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

    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.

    It should work.

     

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

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

     

    thank you!

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

    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.

    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;
    }
Viewing 8 posts - 1 through 8 (of 8 total)