Learning how to edit your own WordPress theme is empowering, and fun! CSS may look scary at first, but once you get in there and play around a bit you’ll notice that its very logically written and orderly. There are so many things you can do with CSS (Cascading Style Sheets)!
One of my favorite things to play with in CSS is image styles. Changing the way your photos display can make a huge difference in the feel of your site. Updating your caption styles, adding rounded corners, and making sure your images are mobile responsive are the things we’ll cover today.
Note: All of these changes are made in your theme’s style.css file known as the Stylesheet.
How to Round the Corners of Your Images with CSS
The image on the right had square corners when I uploaded it. In fact, you can click here to see the file. I just told your browser to show the corners cut off.
In the past we had to round the corners of our images using a photo editor before we could upload them. Now we can apply this effect to every single image on our site with a simple line of code in our theme’s style.css file!
Here’s how to apply the border-radius rule to images. The CSS would look something like:
How to Customize Your Image Caption StyleThe default caption style that comes with your WordPress theme is probably really ugly unless the theme’s developer thought to change it. Nothing bugs me like a gorgeous site with breathtaking photos surrounded by ugly caption boxes and fonts. So, I change mine. You can too.
Here’s an example of CSS for WordPress Caption Styles:
border: 1px solid #c2c2c2;
box-shadow: 10px 10px 5px #f1f1f1;
How to Set Your Images to Auto Re-size for Mobile
Sometimes you run across a theme that is mobile responsive, but the developer forgot to make sure the images also resized, so you’re stuck with images that are too big for the device you’re viewing the site on and the images are cut off like the one on the right.
What we need to do here is make sure that the max-width of all images is set to 100% so that no matter the screen size, the image is resized to fit and nothing is cut off.
Here’s how that might look:
Now you’re ready to go transform the images on your blog!
What are you most excited to try?
GoDaddy Managed WordPress is built from the ground up for maximum performance, security and ease of use. Click here to experience the difference.