Jump to content

XenForo Tutorials

A collection of tutorials, ranging from basic to complex, aimed at helping you develop, modify, or maintain your XenForo installation.

  1. 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 i…

    • 0 replies
    • 1.3k views
  2. 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(3…

    • 0 replies
    • 1.3k views