Round Avatar On Profiles

[JustBrowsing90]

I've been wondering if it's possible to have round avatars on profiles on 2.2?

They're set to round everywhere else except on profiles & Google hasn't given me any useful information so I'm hoping someone here can help me out.

Thanks in advance

 

[FateKid]

I've been wondering if it's possible to have round avatars on profiles on 2.2?

They're set to round everywhere else except on profiles & Google hasn't given me any useful information so I'm hoping someone here can help me out.

Thanks in advance

Depending on what theme you're using, XenForo comes with some default style properties you can check out.
Check out the Appearance -> Style Properties -> Avatars

You also can inspect your profile page and utilize CSS to style it yourself from a custom template. Include it in your extra.less file, or a new one.
Drop your website link or send it to me via Discord if you'd like some personal help with your specific site.

 

[JustBrowsing90]

Depending on what theme you're using, XenForo comes with some default style properties you can check out.
Check out the Appearance -> Style Properties -> Avatars

You also can inspect your profile page and utilize CSS to style it yourself from a custom template. Include it in your extra.less file, or a new one.
Drop your website link or send it to me via Discord if you'd like some personal help with your specific site.

I'm using the AC.UI style with a light & dark theme. I've got it set to round in the Avatars section which is where I noticed there's no place to set it for profiles which is why I made the thread.

I don't really feel comfortable with making the site known & am still new to XenForo so my coding knowledge is very limited so figuring out how to style it myself is pretty much out of the question but I appreciate the offer anyways.

 

[FateKid]

I'm using the AC.UI style with a light & dark theme. I've got it set to round in the Avatars section which is where I noticed there's no place to set it for profiles which is why I made the thread.

I don't really feel comfortable with making the site known & am still new to XenForo so my coding knowledge is very limited so figuring out how to style it myself is pretty much out of the question but I appreciate the offer anyways.

That's completely understandable. If you're worried about making it publicly visible, you can always send it to me for me to provide more customized support. Otherwise, I can try to help you here much as possible.

Providing screenshots and other materials helps. I can see your vision or understand the issue more clearly that way.

Post automatically merged: Apr 16, 2024

JustBrowsing90,
You could try placing one of the code snippets into your Extra.less template, found in your AdminCP.
This would essentially round all of the borders of your avatar image content.

I'm sure this will work on AC.UI, if not I'll look into their avatar structure.

/* [ Global ] - Rounded Avatars */
.avatar, .avatar img { border-radius: 100% !important; }

/* [ Profile View Only ] - Rounded Avatars */
[data-template="member_view"] .avatar, .avatar img { border-radius: 100% !important; }

 

[JustBrowsing90]

That's completely understandable. If you're worried about making it publicly visible, you can always send it to me for me to provide more customized support. Otherwise, I can try to help you here much as possible.

Providing screenshots and other materials helps. I can see your vision or understand the issue more clearly that way.

Post automatically merged: Apr 16, 2024

JustBrowsing90,
You could try placing one of the code snippets into your Extra.less template, found in your AdminCP.
This would essentially round all of the borders of your avatar image content.

I'm sure this will work on AC.UI, if not I'll look into their avatar structure.

/* Rounded Avatars */
.avatar, .avatar img { border-radius: 100% !important; }

/* [ Profile View Only ] - Rounded Avatars */
[data-template="member_view"] .avatar, .avatar img { border-radius: 100% !important; }

I understand, not sure what kind of screenshots to show you other than the profile section where you could see the avatar is square like I've already mentioned.

 

[FateKid]

I understand, not sure what kind of screenshots to show you other than the profile section where you could see the avatar is square like I've already mentioned.

Try using the code above.
The first snippet handles avatars globally. The second snippet handles them only on the profile page template.

 

[JustBrowsing90]

Try using the code above.
The first snippet handles avatars globally. The second snippet handles them only on the profile page template.

Since they're already set to round via the Avatars section in the style properties I used the second code for profiles only & it worked. Many thanks

 

[FateKid]

Since they're already set to round via the Avatars section in the style properties I used the second code for profiles only & it worked. Many thanks

Great! You can use HTML attributes like that to affect only the templates you want.

Reach out if you need anything else!