Announcement
Collapse
No announcement yet.
How to make round avatars in vB5
Collapse
This is a sticky topic.
X
X
-
Add the below CSS in css_additional.css template in AdminCP or in Sitebuilder
Code:
.avatar img, .avatar:not(.medium) > img, .b-avatar:not(.b-avatar--m) > img, .b-avatar--thread > img, .b-comment .b-avatar img, .b-comp-menu-dropdown__trigger-avatar, .profile-sidebar-widget .profileContainer .profile-photo-wrapper .profile-photo { border-radius: 100%; } .avatar, .b-avatar, .b-avatar--thread { border: 0; }
- Top
- Translate
- Bottom
Leave a comment:
-
Can you post a link to the topic? or post the explanation about how to edit the avatar size?
- Top
- Translate
- Bottom
-
You have to post a link to your site in order for us to look into the HTML and CSS and be able to suggest a solution.
- Top
- Translate
- Bottom
-
Thanks. I found out how to do it and it works fine on my board.
- Top
- Translate
- Bottom
-
I have changed my Avatar Size to 150 x 150 but still it doesn't look large enough
And why there is so much of space between my avatar and the username ? Can you please help glenn ?
- Top
- Translate
- Bottom
Leave a comment:
-
- Top
- Translate
- Bottom
- Likes 3
Leave a comment:
-
glennrocksvb, please help. Two queries.
1. How to make the avatar size large
2. How to increate the column width where Avatar and other details are placed.
- Top
- Translate
- Bottom
Leave a comment:
-
I'd like to know how to make them bigger too? The CSS worked great!
- Top
- Translate
- Bottom
- Likes 2
Leave a comment:
-
I like it. How can I make the avatar sizes big ? Like the below one ?
- Top
- Translate
- Bottom
- Likes 1
Leave a comment:
-
Well, round looks neat but let's see what will be feedbacks from forumers.
Thanks!
- Top
- Translate
- Bottom
- Likes 2
Leave a comment:
-
How to make round avatars in vB5
Round or circular avatars seem to be a trend now. Prominent sites that use round avatars are Instagram, Pinterest, LinkedIn, Google (Gmail, Google Inbox, Google+, YouTube, etc), and many more.
Some people either love them or hate them. I for one welcome them but have you ever wondered why some sites use them? Is it just personal preference or was there an underlying reason?
Here are some arguments that I found from my googling.
Round avatars clearly distinguish at a glance people from content or other entities like apps, albums, photos, and so on. Curves and rounded shapes are perceived to be "softer" or "friendlier".After some research it turns out we’re pre-programmed to prefer rounded corners. As children we’re quickly taught that sharp corners are dangerous and hurt but rounded corners are safer and friendly.Another reason is that the flowing nature of a circle and rounded corners take less cognitive effort, or brain power, to visually process. The less brain power required the easier user interfaces are to use.Finally, the box appears to make you focus on the outline instead of the content inside. By using rounded corners the brain is less distracted and as such we process the important information.
Whether you agree with those arguments or not, you may want to try making round avatars in your forum and see how your users react.
Add the below CSS in css_additional.css template in AdminCP or in Sitebuilder > Style > CSS Editor.
Code:.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; }
Demo:
Look around this site to see round avatars.
How about you, do you prefer round or square avatars? Let me know in your comments and replies below.Last edited by glennrocksvb; 09-21-2017, 07:47 AM. Reason: Added fix for Who's Online guest avatars courtesy of Mark.B
Users Viewing This Page
Collapse
There is 1 user viewing this forum topic.
- Guest
Latest Posts
Collapse
-
Reply to Quick Topic Moderationby darkboy245I actually managed to create a button that will reply and also lock the thread simultaneously, it's not perfect but seems like it's working.
Code:<vb:if
Today, 09:24 AM -
by darkboy245I'm trying to give moderators the option to quickly lock a thread & an option to change the topic's prefix while replying to a thread, this is without...04-28-2024, 10:11 AM
-
Get Affordable and Fast VPS for vBulletin -
Comment on Topic Starter Ribbon for vBCloudby glennrocksvbThanks for confirming the fix works.04-26-2024, 08:20 AM
Leave a comment: