Profile Preview Tooltip (like Name Card but better!)

[glennrocksvb]

Hmm...I tried it on vB 6.1.6 and it works for me.

[glennrocksvb]

Released v2.0 to fix missing Username HTML Markup when Display Name is set.

Paid customers will receive an email containing the download link.

[flohse]

Hi Glenn, what do you think about adding "Like Counts" similar to "Like Counts on Postbit and Profile" (when this mod is in use) in "Profile Preview Tooltip"?

[glennrocksvb]

flohse, the Like Counts on Postbit and Profile mod only works completely in vB5. In vB6, the Likes system has been replaced by Reactions system which uses a different database table than vB5. The Likes data is still available in vB6 if you upgraded from vB5 but it will never be updated anymore. But if you never upgraded from vB5 to vB6, then you don't have the Likes data to use and display.

[glennrocksvb]

I have released v2.1 with the following changes:

• Added "Show Like Counts?" option. Requires the "Like Counts on Postbit and Profile" mod to be installed and enabled.
• Updated the online/offline icons in the Profile Preview in vB6 to match the online/offline icon native style.

Paid customers will receive an email containing the download link.

[flohse]

The online glowing in Profile Preview Tooltip is broken since you changed the online/offline icons. I prefered the old style.

before:



after :



Can you revert back this change or do you have another solution to get the previous style back?

[glennrocksvb]

It would be this code but this needs to be adjusted to include the profile preview online icon

https://vbmods.rocks/forum/vbulletin-6-modifications/vbulletin-6-template-only-modifications/29531-vb6-how-to-make-the-green-online-icon-glow-using-pure-css

I'm just on my phone and don't have access to my computer at the moment. I'll post the updated code later tonight.

[flohse]

I had implemented this with slight modifications and it worked before the update to Profile Preview Tooltip 2.1.

I am using these CSS modifications:

/*************** Online icon ***************/

.b-userinfo__icon.online .b-icon-fa {
    color: #0f0; /* adjust online dot icon color as desired */
    position: relative;
    border: 4px solid #fff;
    box-sizing: border-box;
    transform: scale(.6);
}

.profile_sidebar_content .online-status.online .b-icon-fa {
    color: #0f0; /* adjust online dot icon color as desired */
    position: relative;
    border: 4px solid #fff;
    box-sizing: border-box;
    transform: scale(.6);
}

.shoutbox-widget .shoutbox__avatar .online-status.online {
    color: #0f0; /* adjust online dot icon color as desired */
    background-color: #aaa; /* adjust online dot icon color as desired */
    position: relative;
    border: 4px solid #fff;
    box-sizing: border-box;
    border-radius: 50%;
    top: -10px;
    left: 26px;
    transform: scale(1.7);
}


/*************** Offline icon ***************/

.b-userinfo__icon.offline .b-icon-fa {
    color: #aaa; /* adjust online dot icon color as desired */
    background-color: #aaa; /* adjust online dot icon color as desired */
    position: relative;
    border: 4px solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
    transform: scale(.6);
}

.profile_sidebar_content .online-status.offline .b-icon-fa {
    color: #aaa; /* adjust online dot icon color as desired */
    background-color: #aaa; /* adjust online dot icon color as desired */
    position: relative;
    border: 4px solid #fff;
    border-radius: 50%;
    transform: scale(.6);
}

.shoutbox-widget .shoutbox__avatar .online-status.offline {
    color: #aaa; /* adjust online dot icon color as desired */
    background-color: #aaa; /* adjust online dot icon color as desired */
    position: relative;
    border: 4px solid #fff;
    box-sizing: border-box;
    border-radius: 50%;
    top: -10px;
    left: 26px;
    transform: scale(1.7);
}


/*************** Online icon "Glow" ***************/

.b-post .b-userinfo__icon.online .b-icon-fa::after,
.profile_sidebar_content .online-status.online .b-icon-fa::after {
    border: 16px solid #6e9d00; /* adjust glow color as desired */
    top: -20px; /* adjust top coordinate to move glow vertically in postbit */
    left: -20px; /* adjust left coordinate to move glow horizontally in postbit */
    content: '';
    z-index: 1;
    background: transparent;
    border-radius: 40px;
    height: 24px;
    width: 24px;
    position: absolute;
    opacity: 0;
    animation: glow 3s ease-out infinite;
}

.profile_sidebar_content .online-status.online .b-icon-fa::after {
    top: -24px; /* adjust top coordinate to move glow vertically on Profile page */
    left: -24px /* adjust left coordinate to move glow horizontally on Profile page */
}

.online-status .b-icon__status--green::after {
    border: 16px solid #6e9d00; /* adjust glow color as desired */
    top: -22px; /* adjust top coordinate to move glow vertically in postbit */
    left: -22px; /* adjust left coordinate to move glow horizontally in postbit */
    content: '';
    z-index: 1;
    background: transparent;
    border-radius: 40px;
    height: 24px;
    width: 24px;
    position: absolute;
    opacity: 0;
    animation: glow 3s ease-out infinite;
}

@keyframes glow {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    25% {
        transform: scale(0);
        opacity: 0.1;
    }
    50% {
        transform: scale(.1);
        opacity: 0.3;
    }
    75% {
        transform: scale(.5);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.shoutbox-widget .shoutbox__avatar .online-status.online::after {
   border: 16px solid #6e9d00; /* adjust glow color as desired */
    top: -2rem; /* adjust top coordinate to move glow vertically in postbit */
    left: -2rem; /* adjust left coordinate to move glow horizontally in postbit */
    content: '';
    z-index: 1;
    background: transparent;
    border-radius: 40px;
    height: 8px;
    width: 8px;
    position: absolute;
    opacity: 0;
    animation: glow-small 3s ease-out infinite;
}

@keyframes glow-small {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    25% {
        transform: scale(0);
        opacity: 0.1;
    }
    50% {
        transform: scale(.075);
        opacity: 0.3;
    }
    75% {
        transform: scale(.15);
        opacity: 0.5;
    }
    100% {
        transform: scale(.40);
        opacity: 0;
    }
}
​

How can the online indicator icon in the updated Profile Preview Tooltip 2.1. be adressed in CSS?