• 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

#1
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:

Shelley

Well-known member
#2
Unsure whether this would work but the following pasted in extra.css ?

Code:
.AvatarEditor .avatarCropper img {
border-radius: 50%;}
 
#3
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.png
 
#5
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
 

Mike Creuzer

Well-known member
#6
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.
 

Steve F

Well-known member
#9
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
 

Luxus

Well-known member
#10
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
 

Mike Creuzer

Well-known member
#12
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;}
 
#14
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?
 

zagorskey

Active member
#15
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.