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
.round-div {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
Only for featured pages
.widget-front .round-div {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
Only for featured images of posts
.article-container .round-div {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
More about the border radius property.
More about Featured page customizations.
25 thoughts on “Featured images squared instead of rounded in Customizr”
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!
Hi !
Please submit this question in the Customizr forum, our team will do its best to answer.
https://wordpress.org/support/theme/customizr
Cheers 🙂
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.
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!
Hi, the following CSS code is responsible of the simultaneuous reveal effect for all images :
.widget-front.hover .round-div, article.hover .round-div { -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -ms-transform: scale(1.4); -o-transform: scale(1.4); transform: scale(1.4); }The .hover class is added by javascript on the whole article container html tag
Hope this helps
Easy to solve problem, once you know where to look. Thank you so much, Nicolas!
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’?
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
Where does Customizr store the changes made to Custom Css in the live customizr area of adim?
In the database
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. 🙂
Hi Frank, great!
Thanks for the feedback 🙂
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;
}
Hi Frank, weird, this should work.
You might want to try to be more specific with your css. More about specificity in CSS here : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Hope this helps!
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.
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 =]
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.
I put the code into my Child Theme’s CSS (3rd one above – squared images for posts) and it is having no effect. Thoughts?
Nevermind – working now… Any way to adjust what portion of the image the Thumbnail captures?
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!
You can easily style every templates in WordPress with the body_class : more informations here http://codex.wordpress.org/Function_Reference/body_class
Thanks
Hi Nikeo,
Thank you for proving that information. I read the codex and tried using the code (below) for the category archive, but I still can’t get it to work. I’m not a developer, so I’m sure I’m doing something wrong. I tried the using the following: .archive, .page, .archive category, & .category-paged.
.archive .round-div {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
Any idea what I might be doing wrong? I really appreciate the help – thanks!!
This code works for the category archives. It might be the way you insert it on your website?
sorry forgot to include a link to my page: http://www.popfix.net/wp/category/news-fix/
I inserted the code into my child theme style.css file. I checked the customizr header.php file and the <body is already there, so it should just be a matter of the css at this point, no? Does the category archive inherit all of the same settings?
Thanks!