Ask question

Ask Questions and Get Answers from Our Community

Answer

Answer Questions and Become an Expert on Your Topic

Contact Staff

Our Experts are Ready to Answer your Questions

  • Upgrade your account to xenForo 2.x.x All Accesss Pass. Monthly subscription to the Premium group. Purchase a paid elevation of rights worth 30$ And Lifetime Upgrade 170$.

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

lazarote

New member
Registered
Joined
Jun 24, 2019
Messages
10
Reputation
0
Points
1
Location
Cuba
Option #1 - Display badge with "User banner text" text

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" ):
Code:
.mybadge {
     background-image: url('https://www.mywebsite.com/mybadge.png');
     background-repeat: no-repeat;
     background-position: center top;
     background-size: 45px 45px;     /* adjust to the size you would like to make the image */
     min-block-size: 45px;                /* adjust to the size you would like to make the image  */
     padding-top: 42px;                     /* modify this setting to adjust the distance between image and text */
     text-align: center top;
}
Then go to "Groups and Permissions > User Groups" and select the group you want to add a badge too.
Under "User banner styling," check "Other, using custom CSS class name" and enter the name you gave it in the extra.less file

IMPORTANT: Be sure to remove the "." (dot) in front of the name as shown below:

2431

Option #2 - Display badge without "User banner text" text



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 ".tac" ):

Code:
.tac {
     background-image: url('https://mywebsite.com/tac.png');
     display: block;
     background-repeat: no-repeat;
     background-position: top;
     background-size: 45px 45px;     /* adjust to the size you would like to make the image   */
     min-block-size: 45px;                /* adjust to the size you would like to make the image   */
     margin-left: auto;
     margin-right: auto;
     text-indent: 400%;                   /* this setting will hide User banner text */
     white-space: nowrap;              /* this setting will hide User banner text */
     overflow: hidden;                    /* this setting will hide User banner text */

.memberHeader-banners .tac {
     background-position:5px 0px;
}
.memberTooltip-banners .tac {
     background-position:5px 0px;
}
IMPORTANT: Be sure to remove the "." (dot) in front of the name as before
 
Top