Search the Community

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

Tutorial for version 2.x of xenForo : add Font Awesome icons to your usergroups! Here is the basic code to add in your EXTRA.less template : /*add fa to your usergroups*/ .username--style3:before { font-family: "FontAwesome"; content: "\f013"; color: inherit; padding-right: 4px; display: inline-block; } style3 is my usergroup Admin.  If you want a rotation : .username--style3:hover:before{ display:inline-block; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transition:all 0.8s; -webkit-transition:all 0.8s; -moz-transition:all 0.8s; -ms-transition:all 0.8s; -o-transition:all 0.8s } Screen: