XF 2.2 Online/ Offline indicator

Korsch

Member
Is there anyway to use a specific image for online and offline users instead of the fa-fa-icon that is set by default?
 
You can replace the icon using the extra.less template.

You can also do something like this:

 
I did it like this...

Code:
/* 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


I used the checkmark because it looks great
 
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
Code:
.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)
onlinetest.png

<--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.
Code:
.message-avatar-wrapper .message-avatar-online
{
       &::before
    {
       width: 0px;
       height: 0px;   
    }
       center: 100px;
       content:url(/images/online.png);
}
 
Last edited:
Top Bottom