User Rank Banners using CSS

[tpearl5]

I use the user rank system on one of my sites to give users in one or more usergroups a little flare. I didn't want to use graphics, which would add to the number of images being loaded, so I used CSS.

Here's how to set it up.

Add something like the following to additional.css:

.user_banner {
font-size: 12px;
font-weight: bold;
padding: 1px 5px;
border: 1px solid transparent;
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
color: #ffffff;
border-color: #000000;
position: relative;
-webkit-border-radius: 2px;
border-radius: 2px;
text-align: center;
margin-top: 5px;
margin-left: 18px;
width: 130px;
}

.admin {
background: rgb(172, 0, 0) url(/images/buttons/newbtn_middle.png) repeat-x;
}

.mod {
background: #ffffff url(/images/buttons/newbtn_middle.png) repeat-x;
color: #000000;
}

.supermod {
background: #000000 url(/images/buttons/newbtn_middle.png) repeat-x;
color: #ffffff;
border-color: #ffffff;
}

.sr_member {
background: #cccccc url(/images/buttons/newbtn_middle.png) repeat-x;
color: #000000;
}


Naturally you can adjust the colors to match your site.

Go to User Ranks > Add New User Rank

Number of times to repeat rank: 1
Choose the usergroup - in this example the code is for the super mods
Minimum Posts: whatever you want, but mine is setup to depend on usergroup, which in some cases may be set based on user upgrades anyway
Stack Rank: No
Display Type: Always
User Rank File Path: clear this field
OR you may enter text: enter something like the following -

<div class="user_banner supermod">Super Mod</div>


You will need to create a new user rank for each banner that you want to use. You would just need to change the second half of the div class to match the name of the group, for example the sr_members would get <div class="user_banner sr_member">Sr Member</div>

The banners will stack if the user is in more than one group that meets the requirements set in the User Rank. (see screen shot below)

This will also work for 3.x versions.

Enjoy!

[billstelling]

Nice mod..

[Phillip]

Wondering if this could work for vB3 as well?

[Black Snow]

Wondering if this could work for vB3 as well?

States in the original post:

This will also work for 3.x versions.