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:
Updated CSS code for vB 5.6.6+
NOTE: Some adjustments may be needed. Please see inline comments enclosed in /* */
Demo:
See the online icon in this forum.
This is a free mod. Please consider donating if you find this useful.
Enjoy!
Add this in css_additional template or via Sitebuilder > Style > CSS Editor:
Old CSS Code:
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 /* */
Code:
/* 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 */
See the online icon in this forum.
This is a free mod. Please consider donating if you find this useful.
Enjoy!
Comment