Add a status indicator online or offline PULSE

tutorial allowing you to add a status indicator online or offline that pulses around the avatar!

In your template message_macros look for this (CTRL + F)

<xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
    <span class="message-avatar-online" data-xf-init="tooltip" title="{{ phrase('online_now')|for_attr }}"></span>
</xf:if>

Replace with this:

<xf:if is="$user.isOnline()">
    <span class="online" data-xf-init="tooltip" title="{{ phrase('online_now')|for_attr }}"><xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" /></span>
<xf:elseif is="property('dt_offline_indicator')" />
    <span class="offline" data-xf-init="tooltip" title="Offline"><xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" /></span>
</xf:if>

EXTRA.less

/*ON||OFFLINE PULSE*/
.online {
border-radius: 50px;
border: 2px solid rgba(44,204,71,0.4);
display: block;
box-shadow: 0 0 0 rgba(44, 204, 71, 0.4);
animation: pulseon 2s infinite;
}
.offline {
border-radius: 50px;
border: 2px solid rgba(204, 44, 44, 0.4);
display: block;
box-shadow: 0 0 0 rgba(204, 44, 44, 0.4);
animation: pulseoff 2s infinite;
}
@-webkit-keyframes pulseon {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(44, 204, 71, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
@keyframes pulseon {
0% {
-moz-box-shadow: 0 0 0 0 rgba(44, 204, 71, 0.4);
box-shadow: 0 0 0 0 rgba(44, 204, 71, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
@-webkit-keyframes pulseoff {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(204, 44, 44, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
@keyframes pulseoff {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204, 44, 44, 0.4);
box-shadow: 0 0 0 0 rgba(204, 44, 44, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
/*END*/