Welcome to Cause Coders
Join a growing community of coding enthusiasts like you. Sign up today!
Sign Up

How to add a custom staff rank to replace the staff text in Xenforo 1/Xenforo 2


web designer
Mar 10, 2017
Okay this is how it's done.

Go to each usergroup you want the staff banner to appear in. Under userbanner text type in the name of the usergroup (can be anything. doesn't matter but just type in the name of the usergroup to make it easy). Then under "user banner styling" select "other, using custom css class name".

Type in the name of the class you want to use in that box (you don't need a beginning period. Just the name of the class). Then simply reference the class in extra.less like so. You do need the beginning period in the extra.less part. Here's an example of my rank for administrator I use:

.Administrator {
background: url("http://www.yoursite.com/images/rank.png") no-repeat;
height: 25px;
width: 125px;
text-indent: -10000em;
display: inline-block;
margin-left: 20px;
padding-bottom: 30px;
Now the reason you typed in Administrator as the userbanner text is because it's a placeholder for the text indent in the css above to place the image for you.

Do this for all the other ranks and give them your class name and reference them in the template named "extra.less". Any css will work in that file even though it's ".less". For Xenforo 1 it's extra.css

Be sure to replace yoursite and the image with the URL of the rank you want to use.

And that's how it's done. Let me know if you have any questions and good luck!