User Ranks in CSS

Unmaintained User Ranks in CSS 1.0

No permission to download
Compatible XF 1.x versions
1.0, 1.1, 1.2
ranks_example.jpg


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.
Author
dutchbb
Downloads
111
First release
Last update
Rating
5.00 star(s) 3 ratings

More resources from dutchbb

Latest reviews

Even in XenForo 1.4 (with a little bit of customization), looks incredible. I love these user blocks and it adds a good bit of flair to my forums! Definitely useful information for any site owner.
Very simple way to add ranks to the user groups, works very well!
D
Always use this on any XenForo site I run.
Top