Xenforo Usergroup Markup (with Image)

Summary: The following will allow you to have an image displayed per usergroup.

Log into your admincp and goto Users >> Usergroups & select the usergroup you wish to apply the markup to. For this demonstration we are applying it to the administrators group.

Depending on the size of your image you may need to adjust the padding-left accordingly. Insert the following into the User Name CSS box:

Code:

    background: url(styles/test/xenforo/smilies/smile.png) no-repeat;
    padding-left: 20px;
    font-family: "Lucida Grande" ,Helvetica,Arial,sans-serif;
    font-weight: bold;
    color: #ad0e0e;

Pending on the height/size of your image chances are your image will be cropped/cut off so insert the following into your EXTRA.CSS and adjust the pixel height accordingly.

Code:

.username .style3 {
      line-height: 18px;
}

Step 2 (Optional)

For those that want to show there usergroup markup in the members online side block this requires a template edit to the following template sidebar_online_users

Find:

Code:

class="username{xen:if '!{$user.visible}', ' invisible'}{xen:if {$user.followed}, ' followed'}">{$user.username}</a><xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>

Replace with:

Code:

class="username{xen:if '!{$user.visible}', ' invisible'}{xen:if {$user.followed}, ' followed'}">{xen:helper richUserName, $user}</a><xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>