Better Blogging: Notes on a Design Change

Continuing on with the notes on my blog’s recent theme change, I’ve got more tips for customizing your blog and CSS today. Last time, I shared how I used CSS to take the header from this:

My header before CSS in the Edin theme

to this:

My header after CSS in the Edin theme

I’ve also previously discussed how to customize your text highlight color and style your blockquotes to make your blog more personalized.

This time, we’ll see how to turn a photo from square to round with CSS, and learn some simple adjustments that can be made to the Social Media Icons Widget on WordPress.com.

Round a Photo’s Corners

I added a photo of me to my about page. It started out cropped as a square, then I used CSS to make it display as a circle on the page. Here’s the code I added:

.wp-image-3932 {
	border-radius: 50%;
}	

Notes:

  • Using Chrome Inspect to find selector for imageI figured out how to target the image (with the wp-image-3932 selector) seen in line one by right clicking on it on my about page, then clicking Inspect in Chrome. (See the screenshot to the right.)
  • Change the border radius number until you see a look you like.
    • Changing it to 100% will also make a circle.
    • Changing it to 10% will give you rounded corners.
  • If your image is not a square, results will vary.
    • PicMonkey is great for quickly cropping images for the web.
  • Different browsers handle CSS differently, so it might not be universal. I don’t know what Edge or Internet Explorer will do, but if this CSS doesn’t work in a particular browser, your image will simply display as originally intended, which in my case would be a square. No big deal.

Adjust the Social Media Icons Widget

I was feeling too lazy to go find or make my own social media icons, so I decided to use the WordPress.com Social Media Icons Widget. But then of course I couldn’t just leave it as-is.

Here’s how it looks before (left) and after (right) along with the widget directly above it for reference:

Notice how the social media icons are larger and centered beneath the text? Here’s how I did that:

/*change alignment & spacing of social media icons in sidebar*/
#wpcom_social_media_icons_widget-2 {
 font-size: 200%;
 text-align: center;
}
/*change size of social media icons in sidebar*/
.genericon {
 font-size: 40px;
}	

Notes:

  • To replicate, add the Social Media Icons Widget to your WordPress.com site, then use the right-click Inspect method (remember?) to find which selectors to use to target the widget and icons.
  • In the first batch of code (lines 1-5):
    • The font-size number is controlling the spacing I added in between the icons. (I discovered that completely on accident, so who knows why it’s happening but I like it.)
    • The text-align is centering them within the sidebar.
  • In the second batch of code (lines 6-9):
    • Font-size increased the size of the icons themselves. (Play around with the number until they’re a nice size for your sidebar width and in relation to how many icons you’re using.)
    • You may have to get more specific than “genericon” for your selector, because if you have any other genericons on your site this code will change those too. I only have them in this one spot though, so it works for me.

Tweet, comment, or email with any questions. 🙂 Next time we tackle the footer credits!