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

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