avatar custom size with username , radius or border and users online details
Announcement
Collapse
No announcement yet.
Visitors in the Last X Hours Module
Collapse
This is a sticky topic.
X
X
-
Avatar Size, Border-Radius, Border & Username
By default, the avatars in this module have the same size, border-radius and border as the avatars on other parts of the site (except for the size on topic pages and the main profile picture on Profile page). So if you've made custom CSS to change the style of those avatars, it will also be applied to the same in this module. But if you want to make the avatar style different in this module, you can add these custom CSS in css_additional template:
Code:.vbmodsthatrocks-last-visitors-widget .b-avatar { width: 100px; height: 100px; } .vbmodsthatrocks-last-visitors-widget .b-avatar img { width: 100px; height: 100px; max-width: none !important; max-height: none !important; border-radius: 100%; border: 1px solid #ccc; }
For displaying username, add this CSS:
Code:.vbmodsthatrocks-last-visitors-widget li { margin-bottom: 15px; } .vbmodsthatrocks-last-visitors-widget .b-avatar:after { content: attr(title); display: block; text-align: center; }
Did you mean this Profile Preview Tooltip which is similar to the new Name Card tooltip?
Note: I made those CSS code on the fly. So it's not fully tested. Let me know if it's not working.
Helpful? Donate. Thanks!
Fast VPS Host for vBulletin:
A2 Hosting & IONOS
- Top
- Translate
- Bottom
Comment
-
Note that username has no fixed length, some are long, some are short. So you may see overlapping usernames. You can add ellipsis (...) to prevent username to go beyond its container by adding these CSS properties inside the .vbmodsthatrocks-last-visitors-widget .b-avatar:after CSS rule block.
Code:overflow: hidden; text-overflow: ellipsis;
Helpful? Donate. Thanks!
Fast VPS Host for vBulletin:
A2 Hosting & IONOS
- Top
- Translate
- Bottom
Comment
-
Originally posted by glennrocksvb View PostAvatar Size, Border-Radius, Border & Username
By default, the avatars in this module have the same size, border-radius and border as the avatars on other parts of the site (except for the size on topic pages and the main profile picture on Profile page). So if you've made custom CSS to change the style of those avatars, it will also be applied to the same in this module. But if you want to make the avatar style different in this module, you can add these custom CSS in css_additional template:
Code:.vbmodsthatrocks-last-visitors-widget .b-avatar { width: 100px; height: 100px; } .vbmodsthatrocks-last-visitors-widget .b-avatar img { width: 100px; height: 100px; max-width: none !important; max-height: none !important; border-radius: 100%; border: 1px solid #ccc; }
For displaying username, add this CSS:
Code:.vbmodsthatrocks-last-visitors-widget li { margin-bottom: 15px; } .vbmodsthatrocks-last-visitors-widget .b-avatar:after { content: attr(title); display: block; text-align: center; }
Did you mean this Profile Preview Tooltip which is similar to the new Name Card tooltip?
Note: I made those CSS code on the fly. So it's not fully tested. Let me know if it's not working.
Code:/* Last Visitors Module Avatars with Username - START */ .vbmodsthatrocks-last-visitors-widget .display-avatar { --lastVisitorAvatarSize: 100px; /* Avatar width and height on desktop */ --lastVisitorAvatarColumnGapSize: 40px; /* Gaps between Avatar columns on desktop */ --lastVisitorAvatarRowGapSize: 20px; /* Gaps between Avatar rows on desktop */ --lastVisitorAvatarBorderRadius: 100%; /* Avatar border-radius on desktop and mobile */ margin: 0 !important; } .l-small .vbmodsthatrocks-last-visitors-widget .display-avatar { --lastVisitorAvatarSize: 80px; /* Avatar width and height on mobile */ --lastVisitorAvatarColumnGapSize: 20px; /* Gaps between Avatar columns on mobile */ --lastVisitorAvatarRowGapSize: 10px; /* Gaps between Avatar rows on mobile */ } .vbmodsthatrocks-last-visitors-widget .display-avatar .last-visitor-list { display: grid; grid-template-columns: repeat(auto-fill, var(--lastVisitorAvatarSize)); justify-content: center; grid-column-gap: var(--lastVisitorAvatarColumnGapSize); grid-row-gap: var(--lastVisitorAvatarRowGapSize); } .vbmodsthatrocks-last-visitors-widget .display-avatar li { margin: 0; float: none; } .vbmodsthatrocks-last-visitors-widget .display-avatar .b-avatar { width: var(--lastVisitorAvatarSize); height: var(--lastVisitorAvatarSize); border-radius: var(--lastVisitorAvatarBorderRadius); margin: 0 !important; } .vbmodsthatrocks-last-visitors-widget .display-avatar .b-avatar:after { content: attr(title); display: block; text-align: center; word-break: break-word; width: calc(100% + var(--lastVisitorAvatarColumnGapSize)); margin-left: calc(-1 * (var(--lastVisitorAvatarColumnGapSize)/2)); } .vbmodsthatrocks-last-visitors-widget .display-avatar .b-avatar img { width: var(--lastVisitorAvatarSize); height: var(--lastVisitorAvatarSize); max-width: none !important; max-height: none !important; transform: none !important; } /* Last Visitors Module Avatars with Username - END */
Last edited by glennrocksvb; 02-04-2022, 11:49 AM.Helpful? Donate. Thanks!
Fast VPS Host for vBulletin:
A2 Hosting & IONOS
- Top
- Translate
- Bottom
- Likes 1
Comment
-
I updated the first post with this code.
- Top
- Translate
- Bottom
-
I also added the same code here. Take a look at this module on homepage.
- Top
- Translate
- Bottom
-
If you are using the Profile Preview Tooltip mod, then you need to add extra CSS code. Please refer to the updated first post.
- Top
- Translate
- Bottom
-
This code is obsolete and is no longer needed as of v1.10.
- Top
- Translate
- Bottom
-
USC, thanks for your purchases and your request. I will consider adding that.Helpful? Donate. Thanks!
Fast VPS Host for vBulletin:
A2 Hosting & IONOS
- Top
- Translate
- Bottom
- Likes 1
Comment
-
Originally posted by USC View Postno mention of number of visitors ?
"XXX Members have visited the forum"
would be great if you could add that thanks
Code:/* Last Visitors Module with Visitor Count - START */ .vbmodsthatrocks-last-visitors-widget { counter-reset: last-visitor-count; } .vbmodsthatrocks-last-visitors-widget .widget-content { display: grid; } .vbmodsthatrocks-last-visitors-widget .last-visitor-list { order: 2; } .vbmodsthatrocks-last-visitors-widget li { counter-increment: last-visitor-count; } .vbmodsthatrocks-last-visitors-widget .widget-content:after { content: counter(last-visitor-count) ' members have visited this forum.'; /* Adjust wording as desired */ order: 1; margin-bottom: 20px; font-weight: bold; } /* Last Visitors Module with Visitor Count - END */
Enjoy!Last edited by glennrocksvb; 02-05-2022, 09:56 PM.Helpful? Donate. Thanks!
Fast VPS Host for vBulletin:
A2 Hosting & IONOS
- Top
- Translate
- Bottom
- Likes 1
Comment
-
USC, the CSS code here to show the visitor count is no longer needed starting from v1.8 of this mod. I have added it as a module option to show or hide the visitor count.
- Top
- Translate
- Bottom
-
Originally posted by lange View PostRight now, my forum is running on 5.6.6 /PHP 8.0.15 with a lot of custom templates, custom hooks, three or four mods. I haven't noticed any problems so far.
I'll wait a bit for this mod then.
Thank you.Helpful? Donate. Thanks!
Fast VPS Host for vBulletin:
A2 Hosting & IONOS
- Top
- Translate
- Bottom
Comment
-
Originally posted by Mitch View PostI assume this does not work on cloud? I received an email for the update, but don't believe I ever purchased the originalHelpful? Donate. Thanks!
Fast VPS Host for vBulletin:
A2 Hosting & IONOS
- Top
- Translate
- Bottom
- Likes 1
Comment
Users Viewing This Page
Collapse
There is 1 user viewing this forum topic.
- Guest
Latest Posts
Collapse
-
by glennrocksvbNo, it doesn't work in vB6. The online/offline status icon has changed to Font Awesome icon in vB6 and the HTML and CSS classes have changed as well....Today, 03:43 PM
-
Get Affordable and Fast VPS for vBulletin -
by nekro711Hello guys,
Im new in this vbulletin thing and while i googled for some info i found this forum.04-15-2024, 04:12 PM
Comment