Inserting circular pictures into simple catch theme blog

Maybe the easiest way is to crop the images and add them in the desired place. There are numerous online tools. For example, Lunapic or anymaking
Here’s your image already prepped for your sidebar ;-

If you want to make images circular all you need to do is set a ‘border-radius’ of 50% in your css file.

for examaple – to change the image in the sidebar to make it circular you need to add this to your style.css file:

.widget img { border-radius: 50%; }

to make all images circular on your blog you would just edit the img

img { border-radius: 50%; }

Your sidebar image already has a max-width of 100%, so I’m sure it is already listed somewhere in your CSS file.

The image will look much cleaner if you make it circular using CSS instead of editing it in Photoshop and importing it.

I’ve edited it in my inspector to provide an example:
Example Circular Image

Hi Evan, thanks for your help.

I used your css code but it did not work. I have created a child theme.

And your right I would prefer to use css. Can you tell me where I am going wrong
Thanks in advance

Sabrina

Sure lets see if we can figure it out..

Lets see if we can target it more precisely –
try and add

#sidebar.widget a img { border-radius: 50%; }

also , double check you are adding it to your child css file

it may also be easier if you can give your image a class name, for example:

<img width=”150″ height=”150″ alt=”Hi ? ” class=”attachment-thumbnail circular-image” style=”max-width: 100%;” src=”https://www.lifestyleblogofathirtysomething.com/wp-content/uploads/2013/04/187-e1367707380985-150×150.jpg”&gt;

and in your css you would just add

.circular-image { border-radius: 50%; }

and whenever you add a new image that you want to be circular you would just add the class ‘circular-image’ to the image.

And your right I would prefer to use css

Wow, quite refreshing that someone prefers to play with code ??

Hi Evan, I really appreciate your help!
The css code is not working and ive tried to play around with it and no luck!

I was also unclear about giving the image a class name, would I add this:
<img width=”150″ height=”150″ alt=”Hi ? ” class=”attachment-thumbnail circular-image” style=”max-width: 100%;” src=”https://www.lifestyleblogofathirtysomething.com/wp-content/uploads/2013/04/187-e1367707380985-150×150.jpg”&gt;

to my child theme?

Thanks in advance for your help
??

In your CSS try adding:

.attachment-thumbnail {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%; }

Arrrghh, this is driving me nuts. It did not work!

Any more suggestions.

I really appreciate all your help guys
??