Free Mod vB6: How to make the Green Online icon "Glow" using Pure CSS

[glennrocksvb]

No animated gif. No jQuery animation. No additional image. Just pure CSS3 animation coolness.

Add this in css_additional template in AdminCP or via Sitebuilder > Style > CSS Editor:

/* Online icon "Glow" - START */
.b-userinfo__icon.online .b-icon-fa,
.profile_sidebar_content .online-status.online .b-icon-fa {
    color: #0f0; /* adjust online dot icon color as desired */
    position: relative;
}
.b-userinfo__icon.online .b-icon-fa::after,
.profile_sidebar_content .online-status.online .b-icon-fa::after {
    border: 10px solid #6e9d00; /* adjust glow color as desired */
    top: -18px; /* adjust top coordinate to move glow vertically in postbit */
    left: -18px; /* adjust left coordinate to move glow horizontally in postbit */
    content: '';
    z-index: 1;
    background: transparent;
    border-radius: 40px;
    height: 40px;
    width: 40px;
    position: absolute;
    opacity: 0;
    animation: glow 3s ease-out infinite;
    animation: glow 3s ease-out infinite
}
.profile_sidebar_content .online-status.online .b-icon-fa::after {
    top: -22px; /* adjust top coordinate to move glow vertically on Profile page */
    left: -22px /* adjust left coordinate to move glow horizontally on Profile page */
}
@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;
    }
}
/* Online icon "Glow" - END */

Adjust the colors according to your preferences. You may also need to adjust the top and left coordinates of the glow icon if it's not centered. The code is based on the Default Style for vB6 and may require other tweaks for custom themes.

This mod is for vB6 and vBCloud only. For vB5, click here.

This is a free mod. Please consider donating if you find this useful. Thanks!

Enjoy!

[Mitch]

Glenn, do I already have this?

[Deadpool]

Hello Glenn, I have the current version of vBulletin 6.0.6 installed, I used your code, as you can see in the pictures it works on the first picture but not on the second, what or where can I change something so that it looks the same. Many thanks

[glennrocksvb]

I tested the CSS code in vB 6.0.6 and it works. I need to see it in action on your site to be able to inspect it and see what the issue is. I can't debug by just using screenshots.

[Deadpool]

I tested the CSS code in vB 6.0.6 and it works. I need to see it in action on your site to be able to inspect it and see what the issue is. I can't debug by just using screenshots.

Hello Glenn,
what exactly do you need from me now? How should we proceed?
Best regards

[puertoblack2003]

same issue here on 6.0.6

[puertoblack2003]

Update: On Microsoft edge works fine, for me on Firefox newest version is not.

[glennrocksvb]

What's the version of your Firefox? I tried the mod in vB 6.0.6 using Firefox 129.0.2 and it works fine for me.

[puertoblack2003]

What's the version of your Firefox? I tried the mod in vB 6.0.6 using Firefox 129.0.2 and it works fine for me.

same version here, well I Like to be a ghost on my site, so being invisible of course it wont work.. I deactivated and now is working.. thx

[Mike]

Works for me in VB 6.07.
Tested with the newest versions of Firefox, Chrome, Edge and Opera.

[Shawn Gossman]

Love this customization!

[Mike]

I have upgraded to VB 6.1.1.

This mod is working fine with this version.

[flohse]

I am just trying to understand and modify this mod for my own needs.

I have this in my css_additional.css:

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

.b-userinfo__icon.online .b-icon-fa,
.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);
}


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

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


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

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

@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;
    }
}
​

Everything is fine for the online status:



But I can not get rid of the inner black circle around the grey filled circle in the offline status. It's stiil there from the standard offline indicator:



I already figured it out by my own.

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

.b-userinfo__icon.online .b-icon-fa,
.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);
}


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

.b-userinfo__icon.offline .b-icon-fa,
.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;
    box-sizing: border-box;
    transform: scale(.6);
}


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

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

@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;
    }
}
​

I had to choose color and background-color the same.

Thanks in advance.

[flohse]

How can I get this glowing effect also in the Profile Preview Tooltip Mod? I tried, but I can't figure out what right css selector should look like.

I see that you have already done it on this site.

[glennrocksvb]

flohse, try adding this custom CSS in css_additional.css template:

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