Visitors in the Last X Hours Module

[USC]

avatar custom size with username , radius or border and users online details

[glennrocksvb]

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:

.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;
}

Change 100px to your desired size and border-radius and border to desired value.

For displaying username, add this CSS:

.vbmodsthatrocks-last-visitors-widget li {
    margin-bottom: 15px;
}

.vbmodsthatrocks-last-visitors-widget .b-avatar:after {
    content: attr(title);
    display: block;
    text-align: center;
}

User Online Details
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.

[glennrocksvb]

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.

overflow: hidden;
text-overflow: ellipsis;

[glennrocksvb]

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:

.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;
}

Change 100px to your desired size and border-radius and border to desired value.

For displaying username, add this CSS:

.vbmodsthatrocks-last-visitors-widget li {
margin-bottom: 15px;
}

.vbmodsthatrocks-last-visitors-widget .b-avatar:after {
content: attr(title);
display: block;
text-align: center;
}

User Online Details
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.

Please see updated code below and disregard the original 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 */

Adjust the values according to your preferences. I added comments enclosed within /* */ in the CSS code to describe the CSS variables I introduced that you can edit.

[USC]

Thank you very much glenn

[USC]

purchased it and installed , no mention of number of visitors ?

"XXX Members have visited the forum"

would be great if you could add that thanks

[glennrocksvb]

USC, thanks for your purchases and your request. I will consider adding that.

[glennrocksvb]

no mention of number of visitors ?

"XXX Members have visited the forum"

would be great if you could add that thanks

Through the power of CSS, I was able to figure out and add the number of visitors. I didn't know that CSS has counters that could count the number of elements, in this case the <li> tags containing the avatars. It just needs more CSS trickery to display the count above the list because the total count can only be displayed after all the elements to be counted. Without this additional trick, the visitor count would have been displayed below the list of avatars.

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

I have updated the Last Visitors module on homepage here with this code. Check it out!

Enjoy!

[USC]

Superb Job Glenn , very much appreciated

a question though, where do i put this code ? css_additional or site builder CSS ?

[lange]

Does this mod work under vB 5.6.6 / PHP 8?

Regards

[lange]

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

[USC]

suddenly stopped working

[glennrocksvb]

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

lange I have released v1.8 to add support for PHP 8.0 and 8.1 as well as add module option to show visitor count.

[Mitch]

I assume this does not work on cloud? I received an email for the update, but don't believe I ever purchased the original

[glennrocksvb]

I assume this does not work on cloud? I received an email for the update, but don't believe I ever purchased the original

This doesn't work on vBCloud because it requires uploading a PHP file to the server. Please disregard it. But I'll take a look why you got an email.