| tpearl5 |
10-08-2014 10:00 PM |
User Rank Banners using CSS
1 Attachment(s)
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! |
More Information