How to make ROUND avatars

Community Forums Forums Design Tips and Tricks How to make ROUND avatars

This topic is: resolved

Tagged: 

This topic contains 12 replies, has 2 voices, and was last updated by  WoodlandCoyote 1 year, 6 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #36628

    WoodlandCoyote
    Participant
    Post count: 171

    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.

    WooThemes Demo

    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!

    #36672

    AC
    Blocked
    Post count: 7712

    In a theme I am customizing, the border radius is set at 50% like this:

    [css]border-radius: 50% 50% 50% 50%;[/css]

    Try that to see if it works for you.

    #36716

    WoodlandCoyote
    Participant
    Post count: 171

    Thanks, 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.

    #36719

    WoodlandCoyote
    Participant
    Post count: 171

    I 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!

    #36722

    AC
    Blocked
    Post count: 7712

    None of them use round avatars but Minimum uses round shapes for social media.

    #36746

    WoodlandCoyote
    Participant
    Post count: 171

    Nothing 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?

    #36867

    AC
    Blocked
    Post count: 7712

    One 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.

    #36891

    WoodlandCoyote
    Participant
    Post count: 171

    On 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.

    #36897

    AC
    Blocked
    Post count: 7712

    Look for this in your style.css – add the border-radius you see in there that I “added” and the avatar will be round.

    [css].avatar, .featuredpage img, .featuredpost img, .post-image {
    background-color: #F5F5F5;
    border: 1px solid #DDDDDD;
    border-radius: 50% 50% 50% 50%;
    padding: 4px;
    }[/css]

    #36904

    WoodlandCoyote
    Participant
    Post count: 171

    Thank 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.

    :)

    #36907

    AC
    Blocked
    Post count: 7712

    What 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.

    #36911

    WoodlandCoyote
    Participant
    Post count: 171

    I’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.

    :)

    #39578

    WoodlandCoyote
    Participant
    Post count: 171

    Wrapping 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.

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘How to make ROUND avatars’ is closed to new replies.