User Status Ribbons (based on Usergroups)

Someone asked me how I added the ribbons you see on our post now so here I am posting it.
There are plugins that do this, but this is very simple CSS and no reason to use a plugin if you can just do it yourself.



Here is the link on xenforo.com



ADD TO EXTRA.css

Code:

.ribbon { font-size: 10px; font-weight: bold; margin: -5px -5px -2px; text-align: center; }
.ribbon li
{
    border-radius: 3px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);
    padding: 1px;
    position: relative;
    margin-bottom: 5px;
}
.ribbon li:last-child { margin-bottom: 0px; }
.ribbon li div { position: absolute; top: -4px; width: 4px; height: 4px; }
.ribbon li .right { border-top-right-radius: 3px; right: -1px; }
.ribbon li .left { border-top-left-radius: 3px; left: -1px; }
 
.ribbonStaff
{
    background: @primaryLight url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
    border: 1px solid @primaryLight;
    color: @contentBackground;
}
.ribbonStaff div { background-color: @primaryLight;  }

ADD TO message_user_info ABOVE <xen:if is="!{$isQuickReply}">

Code:

<xen:if hascontent="true">
    <ul class="ribbon">
        <xen:contentcheck>
            <xen:if is="{xen:helper ismemberof, $user, 4}">
                <li class="ribbonStaff">
                    <div class="left"></div>
                    <div class="right"></div>
                    Staff / Moderator
                </li>
            </xen:if>
        </xen:contentcheck>
    </ul>
</xen:if>

then check out his 2nd post for more examples and options

 

Thank you for sharing Brandon. This will be on my to add list.

 

It's a real nice touch and pretty easy to customize.