Originally posted by Mark.B
View Post
Announcement
Collapse
No announcement yet.
How to make round avatars in vB5
Collapse
This is a sticky topic.
X
X
-
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
Code:/* 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*/
1 Photo
- Top
- Translate
- Bottom
Comment
-
Originally posted by tenis View PostHello,
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
Code:/* 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*/
- Top
- Translate
- Bottom
- Likes 1
Comment
-
Originally posted by tenis View PostHello,
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
Code:/* 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*/
EDIT: Thanks for the link. After checking your forum I have realized that everything is fine with the above code.
You need to tell your users to upload bigger avatars at least (100px x 100px), and the problem is solved.
- Top
- Translate
- Bottom
- Likes 1
Comment
-
Thank you for your help.
Any fix for the non square avatars?
I mean little avatars (used as topic icons) that are not all round but some are ovals. Also the avatar icons for Last Post (see above attached printscreen)
In postbit all avatars are round not oval.
Any way to increase the size "Las post" avatar in the view threads? Like in this forum. See attached.
1 Photo
- Top
- Translate
- Bottom
Comment
-
Originally posted by tenis View PostOn this forum I had more help then the entire vb org and com team (where I also asked for help after they updated my forum from vb4).
Thank you again.
This forum is dead too. Pretty much, I haven’t seen glen for a while. So idk to be honest.
- Top
- Translate
- Bottom
Comment
-
Originally posted by faustvasea View Post
its not about the size, he did something wrong with his css code .
The code is just fine, I have checked it multiple times.
- Top
- Translate
- Bottom
Comment
-
Originally posted by zoran_dj View Post
And why does this happen with the users who have uploaded the small avatars only and not with the others?
The code is just fine, I have checked it multiple times.
- Top
- Translate
- Bottom
Comment
-
Hi, I've got the following code in css_additional.css for the "Gradient" that came with VB5.
Code:body { background-attachment: fixed; } /* Start avatar edit */ /* Start avatar round */ .l-col__flex-3, .l-row__fixed--left > .l-col__flex-3 { margin-left: 240px!important; } .b-userinfo__details { width: 240px; margin-left: -20px; } .b-avatar--m { height: 200px!important; width: 200px!important; } .b-avatar--m > img, .b-userinfo .b-avatar--m > img { max-height: 200px !important; max-width: 200px !important; height: 200px !important; width: 200px !important; } .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-userinfo .b-avatar--thread { border: 0; }
url is ilechoo.com
The round thing is cool, but all I really wanted to do was use larger avatars.
I would appreciate and am grateful for any help with this. Thank you
- Top
- Translate
- Bottom
Comment
Users Viewing This Page
Collapse
There is 1 user viewing this forum topic.
- Guest
Latest Posts
Collapse
-
Reply to Archive videos bb codeby BlackhorseFinally I did it, here is the replacement for your review and improvement Glenn, and for any one would need it:
Code:<iframe src="https://archive.org/embed/{param}"
Yesterday, 01:36 AM -
by BlackhorseHello Glenn,
Any help please regarding a working Archive Videos BB codes?
Edited:
I am finding difficulties in implementing...05-16-2024, 08:34 AM -
Reply to Archive videos bb codeby BlackhorseHello Glenn, twiiter and twitch are working like charm, Thank You so much i have psted in their posts.
I am lookng in this post for playing...Yesterday, 12:01 AM
Comment