XF 2.3 Online Indicator - change color?

So I right clicked it here on this Xenforo Community and clicked "Inspect", I believe it's this:

Code:
.message-avatar-wrapper .message-avatar-online::before {
  display: inline-block;
  content: "";
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  width: 1em;
  mask: url('/community/styles/fa/solid/user-circle.svg?v=5.15.3') no-repeat center;
  -webkit-mask: url('/community/styles/fa/solid/user-circle.svg?v=5.15.3') no-repeat center;
  color: hsl(79,100%,36%);
  vertical-align: top;
}

Put this into extra.less and change the color to what you'd like:
Code:
.message-avatar-wrapper.message-avatar-online::before {  color: hsl(292.5, 100%, 59.4%); }
 
Last edited:
Tried yours and this

Code:
/* Change online indicator */
.message-avatar-wrapper.message-avatar-online::before {  color: hsl(39, 100%, 65%);; }

Apologies, I put in an extra semi colin there:

Code:
.message-avatar-wrapper.message-avatar-online::before {  color: hsl(292.5, 100%, 59.4%); }

if it still doesn't work, try adding !important to override it:

Code:
.message-avatar-wrapper.message-avatar-online::before {  color: hsl(292.5, 100%, 59.4%) !important; }
 
Yes that last one worked!!!!!!!!!!!

Very nice, been racking my brain over that one.

Was also trying to change the icon but that one is near impossible.

I will make due with the color though, it's super nice.

Thank you again
 
Yes that last one worked!!!!!!!!!!!

Very nice, been racking my brain over that one.

Was also trying to change the icon but that one is near impossible.

I will make due with the color though, it's super nice.

Thank you again

Oh the icon would be this part of the code in my first post:

Code:
mask: url('/community/styles/fa/solid/user-circle.svg?v=5.15.3') no-repeat center;
-webkit-mask: url('/community/styles/fa/solid/user-circle.svg?v=5.15.3') no-repeat center;

You see where it's the user-circle.svg file? That's it.

You can provide a new svg link in the same code, and add it to the "message-avatar-online::before" css in the extra.less, it should work. But it requires experimenting with of course.
 
Last edited:
OK, I will try to see if I can make it work somehow

I will let you know if I get it working, I want a simple solid dot instead of the icon.

I took a closer look and there's a lot of SVG files in this directory: /styles/fa/solid

Including one called "circle.svg", so I changed it to that, my code:
Code:
.message-avatar-online::before {
mask: url('/styles/fa/solid/circle.svg?v=5.15.3') no-repeat center !important;
-webkit-mask: url('/styles/fa/solid/circle.svg?v=5.15.3') no-repeat center !important;    
color: hsl(292.5, 100%, 59.4%) !important; 
}

So that would be just a dot.
 
Back
Top Bottom