XF 2.3 Online Indicator - change color?

[MapleOne]

Can the green online indicator be changed to another color using css?

Try as I may I have not been able to get anything to work

 

[Dragonfruit]

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

.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:

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

 

[MapleOne]

It does not seem to make a change

 

[MapleOne]

Tried yours and this

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

 

[Dragonfruit]

Tried yours and this

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

Apologies, I put in an extra semi colin there:

.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:

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

 

[Dragonfruit]

Actually, I got it @MapleOne , I went on my 2.3 test board and played with it, use this:

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

 

[MapleOne]

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

 

[Dragonfruit]

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:

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.

 

[MapleOne]

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.