Hiển thị thành viên trực tuyến - Show user is online xenforo

[AdminAdmin is verified member.]

Classic ribbon
Open 'message_user_online' template and replace the string there with:

<span class="{$userStatus.class}"><span></span>{$userStatus.text}</span>

Open 'extra.css' and add these lines:

.UserOnline, .UserOffline, .UserOnlineInvisible
    {
        font-weight: bold;
        font-size: 10px;
        color: @contentBackground;
        background: @primaryLight url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
        padding: 1px 5px;
        margin: -5px -5px 5px 5px;
        border: 1px solid @primaryLight;
        border-radius: 3px;
        border-top-right-radius: 0px;
        display: block;
        float: right;
        position: relative;
        box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
 
        margin-left: -{xen:calc '@content.padding-right + 5'}px;
    }
 
        .UserOnline span, .UserOffline span, .UserOnlineInvisible span
        {
            background-color: @primaryLight;
            border-top-right-radius: 3px;
            position: absolute;
            top: -4px;
            right: -1px;
            width: 5px;
            height: 4px;
        }

If you don't want to display Offline status then you should also add this:

.UserOffline {display: none !important;}

====================================================

Long ribbon
Open 'message_user_online' template and replace the string there with:

<span class="{$userStatus.class}"><span></span>{$userStatus.text}</span>

Open 'extra.css' and add these lines:

.UserOnline, .UserOffline, .UserOnlineInvisible
    {
        font-weight: bold;
        font-size: 10px;
        color: @contentBackground;
        background: @primaryLight url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
        padding: 1px 5px;
        margin: -5px;
        border: 1px solid @primaryLight;
        border-radius: 3px;
        border-top-right-radius: 0px;
        display: block;
        float: inherit;
        position: relative;
        box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
    }
 
        .UserOnline span, .UserOffline span, .UserOnlineInvisible span
        {
            background-color: @primaryLight;
            border-top-right-radius: 3px;
            position: absolute;
            top: -4px;
            right: -1px;
            width: 5px;
            height: 4px;
        }

If you don't want to display Offline status then you should also add this:

.UserOffline {display: none !important;}

====================================================

Covering ribbon
Open 'message_user_online' template and replace the string there with:

<span class="{$userStatus.class}"><span class="firstSpan"></span><span class="secondSpan"></span>{$userStatus.text}</span>

Open 'extra.css' and add these lines:

.UserOnline, .UserOffline, .UserOnlineInvisible
{
font-weight: bold;
font-size: 10px;
color: @contentBackground;
background: @primaryLight url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 1px 5px;
margin: -5px;
border: 1px solid @primaryLight;
border-radius: 3px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
display: block;
float: inherit;
position: relative;
box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);
}
.UserOnline .firstSpan, .UserOffline .firstSpan, .UserOnlineInvisible .firstSpan
{
background-color: @primaryLight;
border-top-right-radius: 3px;
position: absolute;
top: -4px;
right: -1px;
width: 4px;
height: 4px;
}
 
.UserOnline .secondSpan, .UserOffline .secondSpan, .UserOnlineInvisible .secondSpan
{
background-color: @primaryLight;
border-top-left-radius: 3px;
position: absolute;
top: -4px;
left: -1px;
width: 4px;
height: 4px;
}

If you don't want to display Offline status then you should also add this:

.UserOffline {display: none !important;}