User Rank Banners using CSS

User Rank Banners using CSS

Mod Version: 1.0, by tpearl5

vB Version: 4.x.x	Rating: (0 vote - 0 average)	Installs: 7
Released: 09 Oct 2014	Last Update: Never	Downloads: 0
Not Supported Template Edits Re-usable Code

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:

HTML Code:

.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 -
HTML Code:
```
<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!

Download

No files for download.

Screenshots

vBulletin LTS