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?

[glennrocksvb]

Yes you already have.