XF 2.2 Online/ Offline indicator

[Korsch]

Is there anyway to use a specific image for online and offline users instead of the fa-fa-icon that is set by default?

 

[Paul B]

You can replace the icon using the extra.less template.

You can also do something like this:

Online indicator based on user ID

Bored with the same online indicator for everyone? Me too, which is why I came up with this. It's a selection of 10 different indicators which are automatically applied based on user ID. Implementation is very simple. It consists of one...

xenforo.com

 

[Korsch]

Thanks Brogan, I wasn't sure if this was something I could change with a extra.less

 

[MapleOne]

I have replaced mine, it's pretty easy.

 

[Korsch]

I have replaced mine, it's pretty easy.

Did you replace it the way Brogan mentions with the extra.less? or through the provided add-on he linked?

 

[MapleOne]

I did it like this...

/* Change online indicator */
.message-avatar-wrapper .message-avatar-online::before { content: "\f058"; }

f058 is a checkmark and you can use any free awesome font from

Find Icons with the Perfect Look & Feel | Font Awesome

Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new Sharp Solid icons, available in Font Awesome 6 Pro.

fontawesome.com

I used the checkmark because it looks great

 

[Korsch]

I see, this is what I keep finding when searching online. What Im trying to do is use my own image that I have for the indicators

<---update--->

I added the following code to extra.less

.message-avatar-wrapper .message-avatar-online
{
    &::before
    {
        postion: bottom;
        border-radius: none;
        border: none;
        content:url(http://10.0.0.240:8888/images/online.png);
    }
}

This worked to pull the image I wanted to use but I've ran into an issue with a border on the left top and left bottom of the icon as show in the below image. I have the same issue regardless of image used or format (gif,png,jpeg)


<--Update--> Pt 2.

Ive been playing with the code and found that this would get rid of the border issue but im still running into the problem of it not sitting center bottom in the avatar window.

.message-avatar-wrapper .message-avatar-online
{
       &::before
    {
       width: 0px;
       height: 0px;   
    }
       center: 100px;
       content:url(/images/online.png);
}