XenForo Online Offline Status Configuration

[micke]

Go to your message_macros template, find:

</xf:if>
<span class="message-userArrow"></span>

Add Code Block Above:

<xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
    <div class="message-avatar-online offlineonlineON">
        <span class="onlineMarker" data-xf-init="tooltip" data-offsetx="-10" data-offsety="-8" title="{{ phrase('online_now')|for_attr }}">
            <font color="#fff">
                <strong>Online</strong>
            </font>
        </span>
    </div>
    <xf:else/>
    <div class="offlineonlineOFF">
        <span class="Tooltip onlineMarker" data-offsetx="-10" data-xf-init="tooltip" data-offsety="-8" title="Ce membres et hors ligne">
            <font color="#fff">
                <strong>Offline</strong>
            </font>
        </span>
    </div>
</xf:if>

Inside extra.less

.offlineonlineON {
    text-align: center;
}
.offlineonlineON {
    background: #449C41;
    padding: 5px;
    text-align: center;
}
.offlineonlineOFF {
    background: #DD4242;
    padding: 5px;
    text-align: center;
}
.offlineonlineOFF {
    text-align: center;
}
.offlineonlineOFF strong, .offlineonlineON strong {

    display: inline-block;

}

.offlineonlineOFF::before, .offlineonlineON:before {
       content: "\f007";
    color: #fff;
        line-height: 30px;
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    border-top-right-radius: 40px;
    border-right: 2px solid rgba(0,0,0,0.1);
    top: 0;
    bottom: 0;
    border-bottom-left-radius: 10px;
    left: 0;
    border-top-left-radius: 10px;
    padding: 1px 4px 0 3px;
    width: 20px;
    font-family: FontAwesome;
    text-align: center;
}
.offlineonlineON::before{
    content: "\f234";
}
.offlineonlineOFF::before{
    content: "\f235";
}
[class*="offlineonlineOFF_"], .offlineonlineOFF, [class*="offlineonlineON_"], .offlineonlineON{
    position: relative;
    border-radius: 5px !important;
}
@media (max-width: 650px)
{
    .offlineonlineOFF, .offlineonlineON
    {
        padding-left: 30px;
    }
    [class*="offlineonlineOFF_"], .offlineonlineOFF, [class*="offlineonlineON_"], .offlineonlineON
    {
    display: table;
    }
}