How to make the Green Online icon "Glow" using Pure CSS

[Mitch]

One thing I am noticing now is when viewing on IOS, ipad, Iphone the circle stops pulsating until I scroll the screen slightly. Then it happens again once the scrolling stops.
Does anyone else see this??

I do see what you mean now. I only see it on your site, not here. I suspect something with zoran_dj code.

Glenn when you find time after getting caught, up can you review these codes. Right now I have two "active" CSS entries, your original one and Zoran's. I think I need to start fresh with one single code that also works on IOS when not scrolling.

I'll post what I have currently in my CSS

First one is from you which seemed to break after an update,, SEE ABOVE POST::

 /*Glowing PM and Notifications Start*/
.notifications-count {
-webkit-animation: glowing 1500ms infinite;
-moz-animation: glowing 1500ms infinite;
-o-animation: glowing 1500ms infinite;
animation: glowing 1500ms infinite
}

.notifications-count.h-hide-imp {
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
animation: none
}

@-webkit-keyframes glowing {
0% {
background-color: #D31F1F;
-webkit-box-shadow: 0 0 3px #D31F1F;
}

50% {
background-color: #851414;
-webkit-box-shadow: 0 0 15px #851414;
}

100% {
background-color: #D31F1F;
-webkit-box-shadow: 0 0 3px #D31F1F;
}
}

@-moz-keyframes glowing {
0% {
background-color: #D31F1F;
-moz-box-shadow: 0 0 3px #D31F1F;
}

50% {
background-color: #851414;
-moz-box-shadow: 0 0 15px #851414;
}

100% {
background-color: #D31F1F;
-moz-box-shadow: 0 0 3px #D31F1F;
}
}

@-o-keyframes glowing {
0% {
background-color: #D31F1F;
box-shadow: 0 0 3px #D31F1F;
}

50% {
background-color: #851414;
box-shadow: 0 0 15px #851414;
}

100% {
background-color: #D31F1F;
box-shadow: 0 0 3px #D31F1F;
}
}

@keyframes glowing {
0% {
background-color: #D31F1F;
box-shadow: 0 0 3px #D31F1F;
}

50% {
background-color: #851414;
box-shadow: 0 0 15px #851414;
}

100% {
background-color: #D31F1F;
box-shadow: 0 0 3px #D31F1F;
}
}
/*Glowing PM and Notifications End*/

And the code added from Zoran::

/* Green Online icon "Glow" vB 5.6.1 - START */
.b-icon {
overflow: visible;
position: relative;
}

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

.b-icon__status--green::after {
content: '';
border: 10px solid #f90101;
background: transparent;
border-radius: 40px;
height: 40px;
width: 40px;
position: absolute;
top: -26px; /* you may have to tweak this if you move it from the default position */
left: -26px; /* 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;
}

@-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;
}
}
/* Green Online icon "Glow" vB 5.6.1 - END */

[glennrocksvb]

The first CSS is for the message notification count on the header top bar while the second one is for the green online icon. Two different CSS. You have to keep both if you need both. But I wonder why the first one is no longer working. Is it also not working here?

[Mitch]

The first CSS is for the message notification count on the header top bar while the second one is for the green online icon. Two different CSS. You have to keep both if you need both. But I wonder why the first one is no longer working. Is it also not working here?

I messed up and should have read in to the title better. You are correct, it is for the notifications and that IS working just fine.

Just the bottom code posted above for the glowing online. It only glows while scrolling on IOS, and stops glowing when the page is still

Sorry for the mix up

[glennrocksvb]

Mitch, I have updated the CSS code in the first post and it should work in vB 5.6.6. You may need some adjustments to the top and left CSS properties to center the glow icon with the green dot icon. Please see inline comments in the CSS code for your reference. Remove the existing CSS code you have and back it up and then replace it with the new code.

Hopefully this fixes the iOS issue. This code is similar to what I have here which you said has no iOS issue.

[Mitch]

[glennrocksvb]

I don't think it's a vBCloud only issue unless you found another vBCloud site with the same issue.

To rule out the ads, could you temporarily turn off all the ads on the page if possible? The ads might be interfering with the glow animation by any slim chance.

[Mitch]

With the 5.6.7 update, the glowing online indicator is not placed over the online dot when viewing the VB namecard.

[glennrocksvb]

Checking...

[glennrocksvb]

Mitch, add this CSS code in css_additional.

/* Adjust Online Glow Icon Position in Name Card - START */
.b-namecard--avatar-online-status {
    position: relative;
}

.b-namecard--avatar-online-status .b-icon__status--green:after {
    top: -22px;
    left: -24px;
}
/* Adjust Online Glow Icon Position in Name Card - END */

[glennrocksvb]

Mitch, I noticed on your forum when I investigated the online glow location issue that in the name card for Admins, the user title "Administrator" is center aligned. This is because you have text-align:center CSS style on your Username HTML Markup for Administrator usergroup. It's not good to center align the user title because centering may not be applicable in some places and the Name Card is one of them. I recommend to remove the center alignment in the Username HTML Markup setting and then just center it in applicable places using css_additional. Actually, I don't think there's any place where you need to force the username to be centered. In postbit, for example, you don't need to center the username because it is already centered by default. I recommend to just use <span style="color: #800000;"> and </span> as the Username HTML Markup tags. The <p> tag is also not necessary.

[desmomax]

is this working in vb 6 as well?

tried but not working on my site..

[glennrocksvb]

No, it doesn't work in vB6. The online/offline status icon has changed to Font Awesome icon in vB6 and the HTML and CSS classes have changed as well.

I will post a solution for vB6 in a separate topic.

[glennrocksvb]

Here's the vB6 version of this mod:

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

[eroyka]

Hi!
In my forum I have a theme where instead of the dot there is a small heart.
Is it possible to leave it and insert the glow around it?

[glennrocksvb]

eroyka, I checked your site and because you're using a custom theme, this mod does not complete work for your site. Some of the CSS code need to be tweaked to work for your theme.

Btw, I noticed on Profile page, the online icon (heart) is not fully visible because it is white and the background is light gray.