XF 2.0 Adding a staff member graphic?

[Shane Greer]

Hello I was wondering how I could add a small graphic in the section below (see pic) instead of having the staff member text. We have 3 staff members and are looking for 3 dfferent rank badges?

Any ideas?

 

[Brad Padgett]

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".

Be sure to replace yoursite and the image with the URL of the rank you want to use. Good luck and hope that helped.

 

[Shane Greer]

Thankyou.