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

[Gator]

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

 

[Dragonsys]

not working for me, even with the default style. Is there an option which has to be enabled?

 

[Gator]

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:

 

[Dragonsys]

yes. I have added it to both of my styles, and no dot on the class name.

 

[Gator]

I sent you a message in conversations

 

[KensonPlays]

yes. I have added it to both of my styles, and no dot on the class name.

View attachment 173731

View attachment 173728

View attachment 173730

I had to add a defined height and width.

Also if you have text on the badge itself, you can hide it with “text-indent: -9999px;” I think.

 

[ichpen]

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]

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]

Gator updated How to add a Custom Group Badge / Banner to User Info with a new update entry:

Added Option #2 - Remove "User banner text" and use "User title override"

Just as the title implies...

Read the rest of this update entry...

 

[Nirjonadda]

@Gator Please let me update that how to adding icon inside user title banner?

Example:

 

[Gator]

Please let me update that how to adding icon inside user title banner?

I'm sorry, I'm not sure I understand what you are asking.

 

[Nirjonadda]

Adding icon in user title banner? See Example below.

 

[Gator]

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]

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?

 

[S Thomas]

I guess he's asking how he can insert icons (probably FA or something else) in user group banner text.

 

[Nirjonadda]

I guess he's asking how he can insert icons (probably FA or something else) in user group banner text.

Yes you are correct.

 

[Cannabis Ape]

This looks very cool, will definitely use it soon and let you guys know how it went.

 

[King Fox]

If anyone is interested i just recently made these. Similar concept.

 

[Gator]

Gator updated How to add a Custom Group Badge / Banner to User Info with a new update entry:

Minor update

Added the ability to resize image within the extra.less file. Also made it a little easier to understand the difference between the two options, with or without "User Banner Text" text.

Read the rest of this update entry...

 

[Tattooed Theist]

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.