Online/offline avatar indicator like Instagram

[Mamberroi Jr]

Template message_macros

Find:

<xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />

It replaces by:

<xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">

                <div class="xgt-avatar2">

                        <div class="xgt-avatar-border2">

                    <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />

                       </div>

                </div>

                <xf:else />

                    <div class="xgt-avatar">

                        <div class="xgt-avatar-border">

                    <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />

                       </div>

                </div>            

                </xf:if>

In extra.less, add the following code:

.xgt-avatar2{

    display: block;

    background: linear-gradient(to right, green, yellow);

    border-radius: 50%;

    padding: 4px;

    box-shadow: 0px 0px 10px 3px rgba(4, 90, 15, 0.38);



}



.xgt-avatar-border2{

    display: block;

    border: 4px solid #fff;

    border-radius: 50%;

}



@media (max-width: @xf-publicNavCollapseWidth)

{

.xgt-avatar2{

    padding: 2px;

    }

.xgt-avatar-border2{

      border-width: 2px;

    }

}

Ready-!!!



Edit Aerodynamic: A link to the original author is due. Original content: https://xenforo.com/community/resources/online-offline-avatar-indicator-like-instagram.8246/

 

[Mamberroi Jr]

If it was useful do not stop thanking to continue contributing