Unmaintained User Ranks in CSS 1.0

Add user ranks in posts without the need for images.

  1. XenForo Rocks
    Compatible XF Versions:
    • 1.0
    • 1.1
    • 1.2
    ranks_example-jpg.26563.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([email protected]/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.
    Tokelau, JanisLP, R700000 and 2 others like this.