Welcome to Our Community

Registration on our forums are now open for some days! Feel free to sign up today.

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


    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!


    Step 1:

    Open template: message_user_info


    <xen:if hascontent="true">
    <div class="extraUserInfo">

    <!-- Start User Ranks -->
    <xen:if is="{$user.is_admin}">
    <span class="userrank">Administrator</span>
    <xen:if is="{$user.is_moderator} AND !{$user.is_admin}">
    <span class="userrank">Moderator</span>
    <xen:if is="{$user.user_group_id} == 5">
    <span class="userrank">Your_custom_usergroup_name</span>
    <!-- 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


    /* 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 */

    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.
  • About Us

    Our community has been around for many years and pride ourselves on offering unbiased, critical discussion among people of all different backgrounds. We are working every day to make sure our community is one of the best.
  • Like us on Facebook

  • Buy us a beer!

    The management works very hard to make sure the community is running the best software, best designs, and all the other bells and whistles. Care to buy us a beer? We'd really appreciate it!

    Donate to us!