How to make round avatars in vB5

[danielmorashov]

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

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

this code works for big avatars on postbit for vbulletin 5.6.4
thank you very much for the code

[Mitch]

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

this code works for big avatars on postbit for vbulletin 5.6.4
thank you very much for the code

Yes it blows them up, but they also become very grainy.

[albanah]

https://vbmods.rocks/forum/vbulletin...dth-of-postbit

For the avatar size, there's a thread in vbulletin.com for that. I will post a link when I find it or look it up yourself.

This is the code for controlling the size of avatars

.l-desktop .b-avatar--thread { height: 128px; width: 128px; border: 0; } .l-desktop .b-avatar--thread > img { max-height: 128px; max-width: 128px !important; width: 128px; height: 128px; }

[tenis]

wrong URL when clicking User in Viewtopic

Hello, on my vbulletin 5.6.4.1 I have a strange link for user profile in viewtopic :

Instead of :

https://www.tenisdemasa.ro/forum/member/7540-adn

it is

https://www.tenisdemasa.ro/forum/https://www.tenisdemasa.ro/forum/member/7540-adn

This is not happening for all user profiles, some are correct.
For example, in the same topic, for the same user I have two different links for user profile, one incorrect.

I see the main URL

https://www.tenisdemasa.ro/forum

of the forum is added once again as a prefix for the real link

[Derwin]

When I add the code to the additional.css file, and does not change the avatar. Is this mod still working?

[aSpeNDos]

Could you please adjust this edit for vbulletin 3.8.x

Thank You Bro

[glennrocksvb]

Could you please adjust this edit for vbulletin 3.8.x

Thank You Bro

Try adding this custom CSS. But avatars in vB3 may not be square so making them round may turn into oval (oblong).

a[href^="member.php?u="] img {
    border-radius: 100%;
}

[NumNum]

I noticed on comments where a user is tagged the avatar is square, as seen here.

[glennrocksvb]

I noticed on comments where a user is tagged the avatar is square, as seen here.

Right. Unfortunately, the way the avatar is implemented in tags as a background image, it's impossible in CSS to make it rounded without also making the @ username text rounded.

[mohammed]

This is a great mod. It is working on default templates/styles but not on the customized style. What could be the problem with the customized style?

https://www.interpretersweb.com/forums

[glennrocksvb]

There is a CSS code in css_additional of the custom theme that tells ALL elements (not just images) should have border-radius of zero which means not rounded.

* {
    border-radius: 0 !important;
}

The !important in the code overrides other CSS code. To override this for avatars, then also add !important in the rounded avatar's code by changing this part:

border-radius: 100%;

to:

border-radius: 100% !important;

[oldfan]

4 vb or 5vb?

[glennrocksvb]

This is for vB5 only but it can also be done to vB4 but with different CSS code.

[oldfan]

ahhh thats cool, be interesting to see metallica avatars round lol

[oldfan]

Anyone have the vb4 code