1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Unmaintained User Ranks in CSS 1.0

Add user ranks in posts without the need for images.

  1. dutchbb
    Compatible XF 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.
    T4R13N, Jarod, Sportsoutlaw and 9 others like this.

Recent Reviews

  1. jflory7
    jflory7
    5/5,
    Version: 1.0
    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.
  2. Sportsoutlaw
    Sportsoutlaw
    5/5,
    Version: 1.0
    Very simple way to add ranks to the user groups, works very well!
  3. 5/5,
    Version: 1.0
    Always use this on any XenForo site I run.