How to make round avatars in vB5

[glennrocksvb]

I don't have a vB4 site but try this:

.postbit .postuseravatarlink img,
.avatar img {
    border-radius: 100%;
}​

[oldfan]

Thanks I'll try it in the morning ☺️

[oldfan]

I don't have a vB4 site but try this:

.postbit .postuseravatarlink img,
.avatar img {
border-radius: 100%;
}​

sorry where do i put this ?

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

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

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]

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

[glennrocksvb]

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

[oldfan]

yea i think so lol

[oldfan]

works great now! thanks

[glennrocksvb]

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

[oldfan]

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

its coming

[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:

[tenis]

And as guest.

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