Free Mod How to change online/offline icons

[glennrocksvb]

Add this in css_additional or via Sitebuilder > Style > CSS Editor

Using a custom images:

/* For online icon */
.b-icon__status--green {
    background: transparent url('/path/to/the/image.png') no-repeat;    
    width: 15px; /* specify width if not 12px */
    height: 15px; /* specify height if not 12px */
}

/* For offline icon */
.b-icon__status--gray {
    background: transparent url('/path/to/the/image2.png') no-repeat;
    width: 15px; /* specify width if not 12px */
    height: 15px; /* specify height if not 12px */
}

OR using pure CSS (for online icon only):

/* For online icon */
.b-icon__status--green {
    background: #0f0;
    border-radius: 100%;
    border: 2px solid #fff;
    box-sizing: border-box;
}

To increase icon size (optional, applicable to both solutions above):

.b-userinfo__icon.online,
.b-userinfo__icon.offline {
     -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}

[keyuramin]

I understand that now you are not using the image path but pure CSS. I copied the code but failed to write the image path and was not seeing anything but just glow.
So I used inspect element on your site to get the same colour on my forum.
Thanks for the code. It works like a charm.

[myto2018]

Hi Glenn, but for add the effect flashing halo like in your forum? :-)

[glennrocksvb]

Hi Glenn, but for add the effect flashing halo like in your forum? :-)

https://vbmods.rocks/forum/vbulletin-5-modifications/vbulletin-5-template-only-modifications/95-how-to-make-the-green-online-icon-glow-using-pure-css

[myto2018]

Tnks! Glenn