How to add a Custom Group Badge / Banner to User Info

How to add a Custom Group Badge / Banner to User Info

Gator

Well-known member
Gator submitted a new resource:

How to add a Custom Group Badge / Banner to User Info - Just a short tutorial on how to add a custom user group badge/banner to the user info area

How to add a custom Group Badge / Banner to User Info:

View attachment 172879

Go to: AdminCP > Appearance > Templates > and search for the "extra.less" file
Open the file and add this code (call it anything you want. In the example here, I called it ".mybadge" ):

.mybadge {
background-image: url('https://www.mywebsite.com/mybadge.png');
background-repeat...

Read more about this resource...
 

Gator

Well-known member
Be sure you have the correct theme selected, because you have to add the the code to each theme.

Also, be sure to remove the "." (dot) in front of the name as shown below:

2018-04-05_20-42-15.jpg
 

ichpen

Well-known member
Good tip but this doesn't seem to work consistently. I have a feeling if user belongs to multiple groups is the cause of this (or perhaps the display styling property). I have an instance where XF doesn't render the block at all (not a case of a missing icon).
 

Gator

Well-known member
This is a general reference for adding a simple banner / badge to the user info area. Depending on the image(s), you may need to make other modifications to suit your needs.

A good reference can be found here at w3schools.com. Good luck!
 

Gator

Well-known member
Are you asking me if you can add it to this resource page? If that is the case, I would recommend you make a separate entry different from mine as they are two different actions.
 

Nirjonadda

Well-known member
Are you asking me if you can add it to this resource page? If that is the case, I would recommend you make a separate entry different from mine as they are two different actions.

I dunno, Where you are seen resource page? No you are not understanding. Do you see have a one symbols/icon before Administrator title banner or Customer title banner?
 

Tattooed Theist

Active member
1. It requires text in the usergroup options area where you select "custom css code"
I've inserted just a "." but is there a way to not be required to add text there and still have the image show up?

2. The image gets horribly distorted on mobile version when the phone is help vertically, can this be fixed?
Horizontal is fine though.
 
Top