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

XF 1.4 Rounded Avatar editor issue

Discussion in 'Styling and Customization Questions' started by Scarface, Aug 17, 2014.

  1. Scarface

    Scarface Member

    Hi ive made the avatar rounded mostly everywhere but on the avatar upload it looks weird see picture

    Untitled.png

    Anyone knows how can i fix this? Please and thank you
     
    Last edited: Aug 17, 2014
  2. Shelley

    Shelley Well-Known Member

    Unsure whether this would work but the following pasted in extra.css ?

    Code:
    .AvatarEditor .avatarCropper img {
    border-radius: 50%;} 
     
  3. Scarface

    Scarface Member

    Thank you for your reply
    ok so i tried it will round it a bit but even if i change the % if wont round more

    This is the code i have
    Code:
    /* Rounded Avatar */
    
    <xen:if is="@roundedavatar">
    .avatar img,
    .avatar .img,
    .avatarCropper {
    border-radius: 50px !important;
    }
    .AvatarEditor .avatarCropper img {
    border-radius: 50% !important;
    }
    </xen:if>
    
    
    /* End of Rounded Avatar */
    Picture
    Untitled.png
     
  4. Mike Creuzer

    Mike Creuzer Well-Known Member

    For the avatar editor, I recommend just NOT rounding that one. Round the rest, should be fine. At least thats what I do.
     
  5. Scarface

    Scarface Member

    ahhh :( alright ill redo the code and add one by one the other instead of adding code that does round mostly all of them.
    Thanks for the reply

    I remember a theme that someone had found how but i cant remember which theme is so i could take a look at the code oh well
     
  6. Mike Creuzer

    Mike Creuzer Well-Known Member

    UI.X supports rounded avatars.
     
  7. Scarface

    Scarface Member

    I do not need to buy a theme thanks anyway as I am making my second theme. its one of my new hobby :)
    So i wanted to make rounded avatar on the editor so user would see what it looks like on upload ;) anyway ill try to find a way.
     
  8. Sheldon

    Sheldon Well-Known Member

    Code:
    .AvatarEditor .currentAvatar img {
        border-radius: 100%;
    }
    That should be working.

    Screenshot_4.png
     
    Scarface likes this.
  9. Steve F

    Steve F Well-Known Member

    This will get all avatars but it does leave some weirdness in the Avatar Editor after uploading a new avatar that is quite large, wider than higher.

    It seems to cover all instances of the avatar though fairly well. :)

    Code:
    .avatar img,
    .avatar .img,
    .avatarCropper,
    .avatarCropper label,
    .avatar.plainImage img,
    .avatar.plainImage .img,
    .visitorTabs .navLink .miniMe, /* If you happen to have the avatar in the navigation */
    .discussionListItems .discussionListItem .posterAvatar .avatar.miniMe img
    {
        border-radius: 50%
    }
    upload_2014-8-17_17-55-48.png
     
    Bram, Russ, Scarface and 1 other person like this.
  10. Luxus

    Luxus Well-Known Member

    If you want all three avatars in the avatar editor rounded, just put this in extra.css:

    Code:
    #GravatarImg, .avatarCropper, .currentAvatar .avatar img
    {
        border-radius: 100%;
    }
    
    .avatarCropper
    {
        overflow: hidden;
    }

    av.png
     
    Scarface likes this.
  11. Scarface

    Scarface Member

    Thank you guys for all the help :) Very much appreciated :p
     
  12. Mike Creuzer

    Mike Creuzer Well-Known Member

    Not rectangular avatars, you'll get an oval. Hence I mentioned to not round certain areas such as the avatar editor.

    Code:
    .AvatarEditor .currentAvatar img {border-radius: 0 !important;}
     
  13. Steve F

    Steve F Well-Known Member

    Right as I mentioned some weirdness but not to awful.

    Also this class helps the actual 'Use a custom avatar' avatar.

    .avatarCropper label


    This is a 1016x753 image.

    upload_2014-8-17_18-39-12.png
     
    Mike Creuzer likes this.
  14. DivineSky

    DivineSky New Member

    This works great except in the Member list and Profile Followers and people you're following, It's rounded but with the image inside being a square, Any clue how to fix it?
     
  15. zagorskey

    zagorskey Active Member

    I have achieved this in our community and it always stays perfectly rounded but I had to alter the code of multiple files. Have a look at my signature and get the changes via Inspect element.

    The main trick is to round the image container with overflow:hidden and not the image itself. Also, you'll need to lose the unnecessary 2px padding on some places.
     
    Scarface likes this.
  16. oO5 Dynasty

    oO5 Dynasty Active Member

    could you post the changes you made on here?
     

Share This Page