Make custom user banners in Xenforo

What makes a forum more interesting? Their customization. What do you have extra for the forum users? Badges? Animations? Trophies? Well, these things motivate users to work for it. Out of many things, badges, trophies, and banners are the most liked features by users. Today we will learn how to make custom user banners for users and assign them to particular groups.

Below are the sample users with custom user banners.

If you are wondering how I made the username like that then you can check this post to make animated username names or this to make a rainbow effect username

Let’s start with banners now:

Firstly you need to add your banner entry inside the banner template. For this Go to Admin Panel>Apperance>Template> search for app_user_banners.less

Click to edit.

Now scroll down until you find the below codes.

These are the codes that define the banner’s name, colors, and border color.

From userbanner–red to userbanner–orange are the default banner you see while customizing groups.

Now for custom banners add codes below the orange banners before the closing bracket at line no. 59. (see below image)

Name your banner code something that will help you to remember it, for eg I am making a banner for admins, so I will name it as .userbanner–admin. Similarly, for demos, I am adding demo, demo1, etc. keep .m-userBannerVariation as it is.

Now coming to the brackets, the first value defines the Text color of the banner, 2nd value defines the background color of the banner and 3rd value is for the border color of the banner. (You can use hex code or a simple color name)

Click Save when done.

We have now created the custom banners, now let’s assign them to groups.

Go to Groups & permissions>User groups and select the group you want to assign the banner to. If you haven’t created any Groups yet, follow this post to create custom groups and add users to the group.

For the tutorial, I am using the user group “Family”. Click to edit the group.

Under User banner styling, check the “other, using custom CSS class name“. Enter the class name of the banner we just designed in above step. Only add the name.(No fullstop)

Click Save.

All done. Now add your users to this new group, and check how the banner looks.

You can also add symbols to user banners.