1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Rounded avatar?

Discussion in 'Styling and Customization Questions' started by Andy.N, May 15, 2013.

  1. Andy.N

    Andy.N Well-Known Member

  2. Brogan

    Brogan XenForo Moderator Staff Member

    avatar.PNG

    border-radius: 50px;

    :)
     
  3. EQnoble

    EQnoble Well-Known Member

    .avatar .img.m {
    border-radius: 50px;
    }
    just make sure when you want to make a perfect square a circle to use a radius that is about half the px of the height and width
     
    SneakyDave and Andy.N like this.
  4. James

    James Well-Known Member

    You could just set a 50% border radius on the XF avatar, but you'll run into issues where the face might not be centred. In such cases you'll need to alter the background-position.
     
    SneakyDave and Andy.N like this.
  5. Brogan

    Brogan XenForo Moderator Staff Member

    Double Ninja!
     
    James likes this.
  6. James

    James Well-Known Member

    In my defence, I was on mobile and SwiftKey didn't like me hyphenating words ;)
     
  7. Andy.N

    Andy.N Well-Known Member

    Thanks all.

    Just to clarify:
    I'd like to center the avatar on that specific page, not for ALL avatar on every posts.
    Also, the avatar will be from a member account so I guess I will need to hotlink the avatar url.
     
  8. ShadyX

    ShadyX Well-Known Member

    Add a new CSS class.

    Eg;

    Code:
    .newCssClass {
    border-radius: 50px;
    }
    
    Code:
    <img src="useravatar.png" class="newCssClass">
     
    Andy.N and James like this.
  9. Andy.N

    Andy.N Well-Known Member

  10. Brogan

    Brogan XenForo Moderator Staff Member

  11. cmeinck

    cmeinck Well-Known Member

    This has been extremely helpful. The left and top of my rounded avatars are getting cropped. When I inspect element in Chrome, deseleting .avatar .img { background repeart: no repeat; }, it looks great. I'm just not sure where to remove or append the extra.css for this style. Thanks.

    Screen Shot 2013-06-12 at 8.06.01 PM.png
     
  12. Brogan

    Brogan XenForo Moderator Staff Member

    Need a link to the site to check the code.

    It looks like the avatar image is too large for the container.
     
  13. cmeinck

    cmeinck Well-Known Member

    On my pre-1.2 board, I was able to get rounded avatars (but removed due to cropping). When I add the code above to extra.css, I'm not see any changes. Did anything change?

    Here's my forum.
     
  14. Brogan

    Brogan XenForo Moderator Staff Member

    Code:
    .avatar img,
    .avatar .img,
    .avatarCropper {
    border-radius: 50px !important;
    }
     
    ARSamo and cmeinck like this.
  15. cmeinck

    cmeinck Well-Known Member

    Perfect. Thanks!
     
  16. cmeinck

    cmeinck Well-Known Member

    Spoke too soon. Looks like it's not filling the circle completely.
    Screen Shot 2013-07-16 at 5.26.16 PM.png
     
  17. Brogan

    Brogan XenForo Moderator Staff Member

    Looks fine to me in posts.
    Where is that view?
     
  18. Jeremy

    Jeremy XenForo Moderator Staff Member

  19. Brogan

    Brogan XenForo Moderator Staff Member

    I don't see it on that page either.
    It all looks fine from here.

    Bearing in mind all the CSS does is round the corners so any problems with avatars too small will already exist.
     
  20. Jeremy

    Jeremy XenForo Moderator Staff Member

    Its *very* slight in the link I posted above, but yeah, I think its unavoidable due to varying avatar sizes.
     

Share This Page