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.

 

[Dragonfruit]

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:

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

 

[MapleOne]

Haha..... yes, I made mine a yellow dot, looks perfect!!

 

[Jeremy P]

You should use the Less mixin to change the icon:

.message-avatar-online::before
{
    .m-faIcon(@fa-var-solid-circle);
}

 

[MapleOne]

You should use the Less mixin to change the icon:

.message-avatar-online::before
{
    .m-faIcon(@fa-var-solid-circle);
}

I originally tried that and it does not work for some reason, that's why I was stuck.

 

[Dragonfruit]

I originally tried that and it does not work for some reason, that's why I was stuck.

I got it to work by adding the !important:

.m-faIcon(@fa-var-solid-circle) !important;

But I don't recommend it, the outside circle to the Avatar expands and it looks horrible.

 

[MapleOne]

But I don't recommend it, the outside circle to the Avatar expands and it looks horrible.

Yeah, it looks all wonky, your code seems to do the trick perfectly