How to make round avatars in vB5

[glennrocksvb]

Which one were you referring to?

[oldfan]

How would you show it on the home forum 4.2.5. please

[tenis]

You are right. After I disabled/enabled one by one all CSS modifications also all products I installed lately I figured out it is tis mod that caused problems

Yilmaz - Usergroups Username Colors Everywhere

Too bad it was a nice feature to have color of users everywhere on the forum.

[glennrocksvb]

I don't think adding the round avatar CSS code will affect the layout. You can confirm this by temporarily removing the CSS. I think there's something else in the CSS is causing the issue. But I can't debug it on your site since you said the issue only occurs when logged in.

[tenis]

And as guest.

[tenis]

I use this mod since few years and I am not sure if this is the cause of my problem.
On mobile (phone) the Userinfo overlap the space when the user is logged in. As guest it looks ok:

[oldfan]

You're welcome. Glad to help. Where's my ☕?

its coming

[glennrocksvb]

You're welcome. Glad to help. Where's my ☕?

[oldfan]

works great now! thanks

[oldfan]

yea i think so lol

[glennrocksvb]

You have to add the same CSS code to additional.css template of each desired theme/style.

[oldfan]

strange it worked on my dark skin but not the light one lol

[glennrocksvb]

Try this one:

.postuseravatar img,
.widget_post_useravatar img {
    border-radius: 100%;
}​

Note that if an avatar is not square, adding the code above will make it oblong/oval shape instead of round. To make the avatar square using CSS, you'd have to explicitly set the image width and height the same which may not be good as it may stretch and distort the image.

Btw, If you see a red dot when you copy/paste the code above, please remove it. There's a bug in the Copy Code button that I have yet to fix.

[oldfan]

Custom CSS changes are done in additional css template. I think it's called additional.css in vB4 while it's called css_additional.css in vB5.

nope that didnt work

[glennrocksvb]

Custom CSS changes are done in additional css template. I think it's called additional.css in vB4 while it's called css_additional.css in vB5.