How to make round avatars in vB5

[Ben5150]

I like it thanks )

[faustvasea]

Hello,

I used this code to make round avatars, I also forced avatars to be square 128x128 and biger.
Everything is working fine on my 5.6.0 vBulletin forum, except little avatars (used as topic icons) that are not all circle but some are ovals.
In postbit all avatars are circles.

the additional CSS

/* Start Avatars without Borders */
.avatar,
.b-avatar,
.b-avatar--thread {
border: 0;
}
/* End Avatars without Borders */
/* Big Avatars START */
.b-userinfo .b-avatar, .b-userinfo .b-avatar img {
max-height: 128px;
max-width: 128px !important;
width: 128px;
height: 128px;
}
/* Big Avatars END*/
/* Round Avatars START*/
.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;
}
.b-avatar--thread img {
border: 1px solid #fff;
}
/* Round Avatars END*/

Maybe I can help you . Pm

[tenis]

Hello,

I used this code to make round avatars, I also forced avatars to be square 128x128 and biger.
Everything is working fine on my 5.6.0 vBulletin forum, except little avatars (used as topic icons) that are not all circle but some are ovals.
In postbit all avatars are circles.

the additional CSS

/* Start Avatars without Borders */
.avatar,
.b-avatar,
.b-avatar--thread {
    border: 0;
}
/* End Avatars without Borders */
/* Big Avatars START */
.b-userinfo .b-avatar, .b-userinfo .b-avatar img {
      max-height: 128px;
    max-width: 128px !important;
    width: 128px;
    height: 128px;
}
/* Big Avatars END*/
/* Round Avatars START*/
.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;
}
.b-avatar--thread img {
    border: 1px solid #fff;
}
/* Round Avatars END*/

[Golga]

This is what I'm currently using. Not sure now where I got the code from, could even have been here!

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

Old post but this code works well on 5.5.5 even now.

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

[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

[faustvasea]

Sad... Thanks for quick reply.

[glennrocksvb]

Yes by forcing the avatar to be square using CSS. But it may not look good as I mentioned in my previous post.

[faustvasea]

Is that possible to fix this out?

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

I got a bug on some avatars.

I'm pretty sure that is from image size.

Is there possible to fix this bug?

[DXW]

Done, thanks. Now the larger, postbit, avatars look good with a border and drop-shadow,while the small ones elsewhere are clean an unencumbered.

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

[DXW]

PM incoming

[DXW]

PM incoming.