Free Mod 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 or via Sitebuilder > Style > CSS Editor:

Old CSS Code:

.b-icon__status--green,
.profileContainer .username .vb-icon-status-online {
    background: #32cd32; /* green, change as needed */
    border-radius: 100%;
    border: 2px solid #fff;
    box-sizing: border-box;
}

.b-icon__status--green:after,
.profileContainer .username .vb-icon-status-online:after {
    content: '';
    border: 10px solid #6e9d00;
    background: transparent;
    border-radius: 40px;
    height: 40px;
    width: 40px;
    position: absolute;
    top: -24px; /* you may have to tweak this if you move it from the default position */
    left: -22px; /* you may have to tweak this if you move it from the default position */
    z-index: 1;
    opacity: 0;
    -webkit-animation: glow 3s ease-out infinite;
    animation: glow 3s ease-out infinite;
}

.profileContainer .username .vb-icon-status-offline {
    background-position: -320px -112px;
}

.profileContainer .username .vb-icon-status-online:after {
    left: -26px;
    top: -26px;
}

.profileContainer .username .vb-icon {
    margin-left: 5px;
    position: relative;
    overflow: visible;
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}

@-webkit-keyframes glow {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }

    25% {
        -webkit-transform: scale(0);
        opacity: .1;
    }

    50% {
        -webkit-transform: scale(.1);
        opacity: .3;
    }

    75% {
        -webkit-transform: scale(.5);
        opacity: .5;
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 0;
    }
}

@keyframes glow {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    25% {
        transform: scale(0);
        opacity: .1;
    }

    50% {
        transform: scale(.1);
        opacity: .3;
    }

    75% {
        transform: scale(.5);
        opacity: .5;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

Updated CSS code for vB 5.6.6+
NOTE: Some adjustments may be needed. Please see inline comments enclosed in /* */

/* Online icon "Glow" - START */
.b-userinfo__icon.online,
.b-userinfo__icon.offline {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}
.b-icon__status--green {
    background: #0f0 !important; /* adjust online dot icon color as desired */
    border-radius: 100%; /* set to 0 if you want the online dot icon to be a square and not round */
    border: 2px solid #fff;
    box-sizing: border-box;
}
.b-icon__status--green:after {
    content: '';
    border: 10px solid #6e9d00; /* adjust glow color as desired */
    background: transparent;
    border-radius: 40px;
    height: 40px;
    width: 40px;
    position: absolute;
    top: -22px; /* adjust top coordinate to move glow vertically in postbit */
    left: -22px; /* adjust left coordinate to move glow horizontally in postbit */
    z-index: 1;
    opacity: 0;
    -webkit-animation: glow 3s ease-out infinite;
    animation: glow 3s ease-out infinite
}
.profile_sidebar_content .online-status.online {
    position: relative;
}
.profile_sidebar_content .b-icon__status--green:after {
    top: -19px; /* adjust top coordinate to move glow vertically on Profile page */
    left: -24px /* adjust left coordinate to move glow horizontally on Profile page */
}
@-webkit-keyframes glow {
    0% {
        -webkit-transform: scale(0);
        opacity: 0
    }
    25% {
        -webkit-transform: scale(0);
        opacity: .1
    }
    50% {
        -webkit-transform: scale(.1);
        opacity: .3
    }
    75% {
        -webkit-transform: scale(.5);
        opacity: .5
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 0
    }
}
@keyframes glow {
    0% {
        transform: scale(0);
        opacity: 0
    }
    25% {
        transform: scale(0);
        opacity: .1
    }
    50% {
        transform: scale(.1);
        opacity: .3
    }
    75% {
        transform: scale(.5);
        opacity: .5
    }
    100% {
        transform: scale(1);
        opacity: 0
    }
}
/* Online icon "Glow" - END */

Demo:
See the online icon in this forum.

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

Enjoy!

[gcombe74]

I added this a while ago! great mod!

[MokeyII]

Could this be used for New Topic Icons Glow and Subtopic?

There is a glow posted up, but I really enjoy this effect.

[MokeyII]

Could this be used for New Topic Icons Glow and Subtopic?

There is a glow posted up, but I really enjoy this effect.

Correction, I did stumble across someone's site and saw they had it as a notifier on new post icons. It looked good, I've been tinekering around, but unfortunately I know too little to get it to work.

[Nintenex]

Unable to see the code, Cant wait to try this one.

[420]

No one online so i can not see it glowing ^^

[glennrocksvb]

Right click on the gray offline icon and choose "Inspect element". Then change b-icon__status--gray to b-icon__status--green

[boldherri]

Good, i like this mod

[webgeek247]

Works great! Thanks.

[nijohn]

Fantastic. Working perfectly.

[Dotti]

Great! Works great on my forum using v5.2.6

[GeirS]

Works perfect! TY, Glenn

I'm on vB5.3.2

Cheers!

[glennrocksvb]

If you want to change the color of the green online icon, you can do so using pure CSS without creating a new image or sprite.

.b-icon__status--green {
    background: #0f0; /* lime color; change color as desired */
    border-radius: 100%;
    border: 2px solid #fff;
    box-sizing: border-box;
}

If you notice the online icon on this site, I changed it to lime to make it stand out more against the blue background.

I originally posted this code at vbulletin.com:

https://www.vbulletin.com/forum/forum/vbulletin-5-connect/vbulletin-5-connect-questions-problems-troubleshooting/vbulletin-5-support-issues-questions/4378275-online-icon?p=4378293#post4378293

[Cem01]

It's so chic. Loved it. Thank you

[Tariq]

Thanks it's working for me!