Visitors in the Last X Hours Module

[glennrocksvb]

The code here has been obsolete. Please refer to the latest CSS code in the first post.

[glennrocksvb]

If you are using the Profile Preview Tooltip mod, then you need to add extra CSS code. Please refer to the updated first post.

[glennrocksvb]

I also added the same code here. Take a look at this module on homepage.

[glennrocksvb]

I updated the first post with this code.

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

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

[USC]

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

[glennrocksvb]

What kind of updates do you need?

[USC]

glennrocksvb
any plans of updating this module ?

[asd937]

just bought and it works
thank you

[Xipil]

Question: users who have chosen to remain invisible won't be displayed in the module, except to admins? vB 5.6.1

[glennrocksvb]

Yes this is branding free. When there's no branded version mentioned in the first post, then it's branding-free. I didn't make branded versions when I first started creating mods and only did it later. This mod was one of my initial mods.

[andreraposo]

branding free?

[glennrocksvb]

Just FYI. The slow performance was not caused by the mod but by the MySQL Packet Size being too small. It was changed from 4MB to 256MB and rhe issue was solved.