Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to make ROUND avatars
Tagged: round avatar
- This topic has 12 replies, 2 voices, and was last updated 10 years, 11 months ago by Carla the Moose.
-
AuthorPosts
-
April 20, 2013 at 7:00 pm #36628Carla the MooseMember
Hi folks . . .
I love the round avatars that WooThemes uses. I easily made the borders round by doing this:
`.avatar {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}`But you can see square sides on the avatar inside the round border. It looks like the WooTheme demos displays round avatars in multiple browsers. They used "100px 100px 100px 100px" for the radius. This didn't round the image for me.
There have been some issues with certain browsers displaying squares, but WooThemes seems to have tackled this problem from what I can tell.
Note that my site isn't public yet. I'm using the eleven40 theme.
Any suggestions?
Thanks!
April 21, 2013 at 6:18 am #36672AnitaKeymasterIn a theme I am customizing, the border radius is set at 50% like this:
border-radius: 50% 50% 50% 50%;
Try that to see if it works for you.
Love coffee, chocolate and my Bella!
April 21, 2013 at 10:26 am #36716Carla the MooseMemberThanks, anitac. I tried that, but it didn't work.
What displays is round, but you can see the square sides of the avatar inside the round border.
So what I've managed to do was round the border, but it looks like the image needs to be rounded, too. I wonder if image size has something to do with this. Maybe the image doesn't need to be rounded, but with some sizing constraints you can make it appear to be round?
I'll post back here if I figure it out.
April 21, 2013 at 10:53 am #36719Carla the MooseMemberI just took another look at the WooThemes round avatars. They use an avatar wrap with some additional CSS. Let's see if I can make it work.
Do any of the StudioPress themes use round avatars?
Thanks!
April 21, 2013 at 11:01 am #36722AnitaKeymasterNone of them use round avatars but Minimum uses round shapes for social media.
Love coffee, chocolate and my Bella!
April 21, 2013 at 1:49 pm #36746Carla the MooseMemberNothing is working. I'm using a functions code snippet to address the avatar size. I applied a border-radius to .avatar in my CSS. That makes the avatar round. But add a border, and the avatar sides become square. I applied the radius to just img.avatar, which works too. But I can't include a border without getting sharp edges around the image.
I've looked high and low and can't figure out what's causing this. Lots of people seem to be able to do this by adding a border and border-radius to .avatar with no problems.
Curious. Any suggestions?
April 22, 2013 at 7:20 am #36867AnitaKeymasterOne of the key things you wrote in the beginning is this "Note that my site isn’t public yet. I’m using the eleven40 theme."
It is really difficult for us to zero in on specific elements and code if we can see you website. So maybe when you are at a point where you can share your URL, we can help you better.
Love coffee, chocolate and my Bella!
April 22, 2013 at 9:35 am #36891Carla the MooseMemberOn the first post of the eleven40 demo, there are six comments. Since my comments section is identical to the demo, you can easily see what's going on by clicking here:
http://demo.studiopress.com/eleven40/threaded-comments/#comments
It looks like I need to wrap the avatar image in a div. Someone told me elsewhere that padding is treated as part of the element. If I want padding and a border, I can't just do what you did and insert border-radius on the avatar.
On the demo, if you remove the padding and border, and then insert border-radius, you get a nice round avatar. But add back in the padding and border, and the sides get squared.
April 22, 2013 at 9:57 am #36897AnitaKeymasterLook for this in your style.css - add the border-radius you see in there that I "added" and the avatar will be round.
.avatar, .featuredpage img, .featuredpost img, .post-image { background-color: #F5F5F5; border: 1px solid #DDDDDD; border-radius: 50% 50% 50% 50%; padding: 4px; }
Love coffee, chocolate and my Bella!
April 22, 2013 at 10:46 am #36904Carla the MooseMemberThank you, Anitac. I do appreciate your time with this.
Adding border-radius makes the avatar round, but because of the padding the actual image retains square sides within the rounded shell.
I'm trying to get the avatar image and the shell (for lack of a better term) nice and round, so that it looks like a circle within a circle with some white padding.
🙂
April 22, 2013 at 10:55 am #36907AnitaKeymasterWhat I gave you does that? Did you apply the code I gave you? It makes the border round and the image round. Again, if I cannot see YOUR WEBSITE to see WHAT YOU HAVE.... it's pretty hard to assist you. But what I gave you works - the container and the image are both round. If you want the padding to be wider - change the 4px to a larger number.
Love coffee, chocolate and my Bella!
April 22, 2013 at 11:02 am #36911Carla the MooseMemberI'm using the most recent version of Safari. In Safari I'm seeing square edges.
In Firefox and Chrome things are nice and round.
EDITED TO ADD
From what I'm reading, this is a known browser issue. The solution is to wrap a div around the image. I already read that, but couldn't figure out why it seemed to be working for others just fine. But now it appears to be the browser. I'll post back once I've tested it with the div.
🙂
May 6, 2013 at 12:13 pm #39578Carla the MooseMemberWrapping the image in a div works. Add the border radius to both the image and the div, and then add the padding and border to the div for a circle within a circle. Just make sure your image is perfectly square.
-
AuthorPosts
- The topic ‘How to make ROUND avatars’ is closed to new replies.