Featured images squared instead of rounded in Customizr


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


Just add the following code in the Custom CSS or the stylesheet of your child theme and you are done.

For all images : featured page images and featured images in post list

 

Only for featured pages

 

Only for featured images of posts

 

 

More about the border radius property.

More about Featured page customizations.


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



25 thoughts on “Featured images squared instead of rounded in Customizr

  • Coen

    Ho there,

    Can I put these featured images in clipping masks too? I don’t like the square or round version and want to personalise these images to make it work with the overall design of the site. Thanks!

  • amber

    I changed the background color on my site, however the featured images still have a rectangular grey surround. How do I change that as well? My site is currently under construction so it’s not visible, pending response I can make it viewable if necessary.

  • George

    Hello,

    Marvellous theme. It recently switched to it, but I already think that it has everything I could need, either out-of-the-box or with some tweaks here and there.

    I would like an opinion on the reveal effect I am trying to add to one of my pages: https://mcr.hughes.cam.ac.uk/clubs/.

    I managed to add it to a list of images, but I cannot make it behave properly. Somehow, whenever I hover over one of the images, the reveal effect gets applied to all of them. Is it something in the way I am applying the CSS classes, perhaps?

    Sorry for posting here and thank you in advance!

    • Nicolas Post author

      Hi, the following CSS code is responsible of the simultaneuous reveal effect for all images :

      The .hover class is added by javascript on the whole article container html tag

      Hope this helps

  • Leanne

    HI Nico, I have installed Featured pages unlimited, how do I change to square in the child theme when it is being overridden by the ‘fpu min.css’?

    • Nicolas Post author

      Hi Leanne, Open your web inspector (press f12) and check the css selectors for FPU.
      You’ll see there are slightly differents than the one of this snippet.
      Just apply this snippet to those new selectors and you are done!
      Hope this helps

  • Canadaist

    Where does Customizr store the changes made to Custom Css in the live customizr area of adim?

  • Frank Bukowski

    Hey Nico, I fixed it. I was running the ‘Adblock’ extension on my PC’s Chrome. Once I switched it off for my website domain, the images loaded fine in square format. 🙂

  • Frank Bukowski

    Hi Nico

    I pasted the following code into my Customizr child theme style.css but it made not difference, images stayed round on pages and posts. Any ideas?

    .round-div {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    }

      • Frank Bukowski

        Hi Nico, thanks for the reply. You’re right, I don’t think there’s anything wrong with the code. It works in IE and firefox. I’d only been looking at it in Chrome, on my desktop PC, which is the only browser I normally use. But when I fired up IE and firefox, hey presto the squared images were there. It also works in Chrome on my android tablet. So, being a genius, I’m guessing it’s something to do with how I have Chrome configured on my desktop PC. My desktop Chrome browser also doesn’t load the social media icons properly in the homepage header, I have to click onto another page for them to load. But again, they load fine on other browsers. Guess i need to check those Chrome desktop settings. Sorry for troubling you, and thanks again for the reply. Still loving the Customizr theme.

      • Kelly

        ehm I have a question… not sure if its relevant here…. but how do i put images into the featured circles iv filled in all the information the pages that it is linked too have an image but still no luck =/ il probably figure it out but if i haven’t by the time you see this help would be very grateful =]

  • Rayne

    Hi there… I’m using this bit of code and have taken a look at the resources you added with it in the form of links. nothing has helped so far… I am trying to add a border radius of 5px so as to give it a subtle rounded corner. I see no change however? Any help would be greatly appreciated.

  • Steve Enggass

    I put the code into my Child Theme’s CSS (3rd one above – squared images for posts) and it is having no effect. Thoughts?

  • Brian Armstrong

    Hi Nikeo,

    First off, let me say thank you for an amazing theme! The code snippets are invaluable for those of us that are not developers. I had one question regarding this one – how do you also apply this to category archive pages or templates? This seems to work for all other areas of my site except the category archive. Would appreciate any help – thanks!

Comments are closed.