XF 1.4 Rounded Avatar editor issue

[Scarface]

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



Anyone knows how can i fix this? Please and thank you

 

[Shelley]

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

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

 

[Scarface]

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

.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

/* 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

 

[Dad.]

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

 

[Scarface]

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

 

[Dad.]

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.

 

[Scarface]

UI.X supports rounded avatars.

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.

 

[Sheldon]

.AvatarEditor .currentAvatar img {
    border-radius: 100%;
}

That should be working.

 

[Steve F]

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.

.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%
}

 

[Luxus]

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

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

.avatarCropper
{
    overflow: hidden;
}

 

[Scarface]

Thank you guys for all the help Very much appreciated

 

[Dad.]

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.

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

.AvatarEditor .currentAvatar img {border-radius: 0 !important;}

 

[Steve F]

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.

 

[DivineSky]

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.

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

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.

 

[oO5 Dynasty]

could you post the changes you made on here?