Resource icon

User Ranks with Images

Jefferson Filho

Active member
Jefferson Filho submitted a new resource:

User Ranks with Images - User Ranks with custom images


In this tutorial I will show you guys how to set custom images for rank users that XenForo 1.2 provide.

Like this:


First of all go to

Users > User Groups > The group you want to set a custom image

Then on:
User Banner Text:
Put any text you want

User Banner Styling:

Where you see admin is the name of the class that I made.

Then go...

Read more about this resource...


Active member
Below code was to display a custom image of mine "admin.png" which is a simple admin image banner.

With the width and height you may need to mess around with that to position the banner. Of course remember to put your image in your preferred folder and edit the path in the code to suit.

.messageUserBlock .userBanner.admin {
/* display: block; */
margin-bottom: 0px;
margin-left: 12px;
margin-right: -12px;

background: url("styles/drift/xenforo/gradients/admin.png")no-repeat;
width: 89px;
height: 11px;
display: block;
color: transparent;