How to Make User Group Badges

How to Make User Group Badges (per Usergroup). I recently switched from IP.Board to XenForo, and was really disappointed in the fact that there wasn't a built in way to add badges per usergroup. I ended up finding the User Status Ribbons (which I brought up above) but still wanted more. I decided to edit what Jaxel modified, to allow images to be used. Anyways, on with the modification!

Add to EXTRA.css

/* Badges */

.badge {
font-size: 10px;
font-weight: bold;
margin: -5px -5px -2px;
text-align: center;
}

.badge li {
position: relative;
}

.badgeAdmin {
background: url('@imagePath/xenforo/badges/admin.png');
height: 30px;
width: 110px;
margin-right: auto;
margin-left: auto;
}

.badgeMod {
background: url('@imagePath/xenforo/badges/mod.png');
height: 30px;
width: 110px;
margin-right: auto;
margin-left: auto;
}

/* End Badges */

You are going to want to change the URL to the location of the badge image you want, and the height and width relative to the dimensions of the badge image you choose.

Add in message_user_info:

<xen:if hascontent="true">
<ul class="badge">
<xen:contentcheck>

<xen:if is="{xen:helper ismemberof, $user, 3}">
<li class="badgeAdmin">
</li>
</xen:if>

<xen:if is="{xen:helper ismemberof, $user, 4}">
<li class="badgeMod">
</li>
</xen:if>

</xen:contentcheck>
</ul>
</xen:if>

Above or below

<xen:if is="!{$isQuickReply}">
<xen:hook name="message_user_info_text" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
<h3 class="userText">
<xen:username user="$user" itemprop="name" rich="true" />
<xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user}</xen:contentcheck></em></xen:if>
<!-- slot: message_user_info_text -->
</h3>
</xen:hook>

You are going to want to change the $user, 3 and $user, 4 to whatever group you want them to show up for.

You should now have a badge show up if a user is a moderator or an administrator!

It that How to Make User Group Badges, hope useful for you!

Title: How to Make User Group Badges
Posted by:Stuard Van
Published :2013-09-02T16:12:00-07:00
Rating: 5
Reviewer: 5 Reviews
How to Make User Group Badges

Share :

Related articles: