XF 1.4 Rounded Avatar editor issue

Scarface

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

Untitled.webp

Anyone knows how can i fix this? Please and thank you
 
Last edited:
Unsure whether this would work but the following pasted in extra.css ?

Code:
.AvatarEditor .avatarCropper img {
border-radius: 50%;}
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.webp
 
For the avatar editor, I recommend just NOT rounding that one. Round the rest, should be fine. At least thats what I do.

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
 
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
UI.X supports rounded avatars.
 
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.webp
 
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.webp
 
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%
}

View attachment 80960
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;}
 
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.webp
 
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%
}

View attachment 80960
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?
 
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.
 
Top Bottom