- Compatible XF 1.x versions
- 1.0
- 1.1
- 1.2
Description
This mod adds user ranks created with HTML and CSS, so no additional images are required. The attached example shows how the colors automatically adapt when a style color is changed with the XenForo color palette.
The rank text can be changed by simply editing the template - no Photoshop required. You can change the shape, color, background image, and font to whatever you like. So you can actually design your own personal user ranks!
Instructions
Step 1:
Open template: message_user_info
FIND:
Code:
<xen:if hascontent="true">
<div class="extraUserInfo">ABOVE ADD:
Code:
<!-- Start User Ranks -->
<xen:if is="{$user.is_admin}">
<span class="userrank">Administrator</span>
</xen:if>
<xen:if is="{$user.is_moderator} AND !{$user.is_admin}">
<span class="userrank">Moderator</span>
</xen:if>
<xen:if is="{$user.user_group_id} == 5">
<span class="userrank">Your_custom_usergroup_name</span>
</xen:if>
<!-- End User Ranks -->To show the appropriate rank for other usergroups you'll need a new conditional for every added rank. Replace 5 with the appropriate usergroup ID. Follow the instructions given in this post if you do not want to show additional custom ranks for moderators and administrators.
Step 2:
Open template: EXTRA.css
ADD
Code:
/* Start User Ranks */
.userrank {
display: block;
width: 108px;
margin: -2px 0 5px 6px;
padding: 2px 0 3px 0;
border: 1px solid @primaryLight;
border-radius: 5px;
background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-unselected-25px-light.png') repeat-x top;
text-align: center;
font: 11px verdana,sans-serif;
text-decoration: none;
color: @primaryMedium;
text-shadow: 1px 1px 0 #fff;
outline: 0;
}
/* End User Ranks */Done!
The CSS above can be edited to your personal taste. You can ask for help in the discussion thread.
If you like this, please rate & review. Thanks.
