Dear CSS gurus, is there a quick way to use a bit of CSS to customize the featured image on posts? On all posts I want to give the WP featured image rounded corners (radius 20px).
I know nothing about code and I do plan to get Beaver Themer set up and learn how to use it for this kind of thing, but in the meantime I’m looking for a quick fix so that post images better match the styling on the my static pages.
Thanks for any tips (I’d be grateful for very specific guidance—exactly where to put the code and what it should say).
What Theme are you using? The Beaver Builder theme, the Child Theme, or something entirely different?
You’ll need to figure out what the class is for that image. That’ll vary by theme but it should be something like .wp-post-image. To find this out, you’ll right click on a post that has a featured image and go down to “Inspect” (if you use Chrome - don’t remember what Firefox calls it) to use Dev Tools to see what class is there. You can learn more about how to use Chrome Dev tools on YouTube - just search “How to use Dev Tools”.
Then for where to put the code, that depends on what theme you’re using. If you’re using a child theme, just pop the CSS into the stylesheet at Appearance>Theme File Editor. If you’re not using a Child Theme, well even if you are, pretty much any theme has something in the Customizer. Once you find a spot that says “put your custom CSS here”, just pop in the following:
Thank you, this was perfect. I’m very grateful for the detailed and thorough guidance. And I apologize, I should have mentioned that I’m using the Beaver Builder Theme and the Beaver Builder Child Theme—I easily forget that the Beaver Builder plugin gets used with other themes.
So yes, I pasted your recommended CSS into the child theme Customizer in the “Additional CSS” field and it worked like a charm.
(When I tried using Chrome → Inspect it seemed to suggest the image class was called “fl-post-thumb”, but maybe I was reading it wrong. That didn’t work, but your suggestion of “wp-post-image” did.)
