How to make round avatars in vB5

[glennrocksvb]

You have this CSS code in css_additional that overrides the border-radius.

* {
    border-radius: 0 !important;
}

That code means don't make the border of ALL tags round.

[CivicTR]

glennrocksvb
this code

{
    border-radius: 100%;
}

I changed it with the code you wrote, problem not solved.

[glennrocksvb]

No, I wasn't saying to use the code I posted in post #91. I was saying to remove it as it is the code that's causing the avatars not to be rounded.

[CivicTR]

No, I wasn't saying to use the code I posted in post #91. I was saying to remove it as it is the code that's causing the avatars not to be rounded.

Thanks for your support. I did rounded avatars but some avatars are more rounded(oval) . I read topic but i couldn't. Can you please help ?

[glennrocksvb]

If an avatar is not a square, then it will become oval. You don't want to force it to be square as the image will be stretched.

[bluebarracudas]

Had a member join today and his/her avatar came out like this. Is this a product of the avatar being too small? I'm sure force stretching the avi isn't ideal, but is it doable in times like these?

[DXW]

Where does the thin white border you have around these round avatars derive from?
I've achieved round avatars, and I've made them larger, but I can't seem to give them a border.
If I alter ...

.b-avatar--thread {
    border: 0;
}

… to ...

.b-avatar--thread {
    border: 1;
}

… I get a 1px square border around my round avatar.

[DXW]

PM incoming.

[glennrocksvb]

The square border is by default coming from the avatar anchor link which has b-avatar--thread CSS class. If you want to get rid of it, then override it with this code.

.b-avatar--thread {
    border: 0;
}

If you want to put border around the avatar img, then add:

.b-avatar--thread img {
    border: 1px solid #fff;
}

As per your question about css_additional.css, it is a template and by default, templates are stored in the database. So you will not see it in the file system. But you could also switch the templates to store from database into file system. But even then, you should not edit it directly as it will get re-generated every time you update the template in AdminCP.

[faustvasea]

I got a bug on some avatars.

I'm pretty sure that is from image size.

Is there possible to fix this bug?

[glennrocksvb]

That's not a bug. That happens when an avatar is not square. If you force it to be square using CSS, the avatar will be skewed or stretched and may not look good.

[faustvasea]

Is that possible to fix this out?

[faustvasea]

Sad... Thanks for quick reply.

[mohammed]

Thank you! It is working on my website in the default style. However, it is not working on a customized style (Metro). Do you think it is an error or bug in the customised style?
www.interpretersweb.com/forums

[Thoughtcrime69er]

I went for a blended code to give larger, rounded avatars that will show as circles or (vertical or horizontal) ovals.

Thank you to the original posters.

/* Start avatar edit */
/* Start avatar round */
.avatar img,
.avatar:not(.medium) > img,
.b-avatar:not(.b-avatar--m) > img,
.b-avatar--thread > img,
.b-avatar--s > img,
.b-comment .b-avatar img,
.b-comp-menu-dropdown__trigger-avatar,
.profile-sidebar-widget .profileContainer .profile-photo-wrapper .profile-photo,
.b-avatar--pmchat,
.b-pmchat__participants-avatar,
img.avatar,
img.b-avatar {
    border-radius: 100%;
}
.avatar,
.b-avatar,
.b-avatar--thread {
    border: 0;
}
/* End avatar round */

/* Start over-ride postbit avatar size */
.b-userinfo .b-avatar, .b-userinfo .b-avatar img {
    max-height: 128px;
    max-width: 128px !important;
    width: 100px;
 /* height: 100px; */
}
/* End over-ride postbit avatar size */

/* Start avatar border */
.b-avatar--thread img {
    border: 2px solid #fff;
}
/* End avatar border */
/* End avatar edit */