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

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

I'm not really sure. I am a novice myself, and I researched the code you see here. You might want to ask in the main forum section for any additional help, because that's where the knowledgeable guys hang out. I will be asking them myself, especially the mobile phone not being aligned. I will be asking someone there if they know how top disable the group badge while in mobile view.
 
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.

Try this and see if it works for you...

Also, you can go to my website on your mobile and see how the badges look

Also, if you set all the sizes to "0" if you don't want it to display at all in mobile size.

I just experimented and this seems to work. Give it a try and let me know.

Code:
@media (max-width: 650px){
.YourBadgeName.message-userBanner.userBanner {
     background-position: left top;
     height: 8px;                               /* adjust to the size you would like to make the image */
     background-size: 26px 26px;     /* adjust to the size you would like to make the image */
     min-block-size: 14px;                /* adjust to the size you would like to make the image  */
     padding-top: 14px;                     /* modify this setting to adjust the distance between image and text */
     text-align: left top;
     padding-left: 0px;
     text-indent: 30px;
     white-space: nowrap;
}
}
 
Last edited:
Gator updated How to add a Custom Group Badge / Banner to User Info with a new update entry:

Mobile phone size and alignment tweak

You can just add the following code to fix the size and alignment for mobile view.

Code:
/* Corrects mobile view for size and alignment -- tweak these numbers to suit your needs*/
@media (max-width: 650px){
.mybadge.message-userBanner.userBanner {
     background-image: url('https://www.mywebsite.com/mybadge.png');
     background-repeat: no-repeat;
     background-position: left top;
     height: 8px;                               /* adjust to the size you would like to make the image */...

Read the rest of this update entry...
 
Unfortunately there's a conflict between this method and [XTR] Reputation System

The badge can't be shown unless the reputation add-on is disabled.

// But after it's enabled again, both stars and badges show up :unsure:
 
Last edited:
Hello need help when i copy the code for disabling on mobile it removes the image completely from both desktop and mobile
 
Hello need help when i copy the code for disabling on mobile it removes the image completely from both desktop and mobile

It should like this if you wish to remove from mobile view ...just as instructed:

Code:
/* Adjusts size, position, or removal of banner image in Mobile view */
@media (max-width: 650px){
.userBanner.myBadge.message-userBanner.userBanner {
     background-image: none; /* remove the slashes to remove image in mobile view */
     display: inline-block;
     background-size: 35px; // adjusts size of background image
     background-position: 0% 0%; // adjusts image position (x% y%)
     text-indent: -7px;  // shifts text left or right
     padding-top: 37px;  // adjusts distance from image to text (use with image)
     padding-top: 0px;  /* remove the slashes and delete line above to remove image in mobile view */
     text-align: left;
}
}
 
It should like this if you wish to remove from mobile view ...just as instructed:

Code:
/* Adjusts size, position, or removal of banner image in Mobile view */
@media (max-width: 650px){
.userBanner.myBadge.message-userBanner.userBanner {
     background-image: none; /* remove the slashes to remove image in mobile view */
     display: inline-block;
     background-size: 35px; // adjusts size of background image
     background-position: 0% 0%; // adjusts image position (x% y%)
     text-indent: -7px;  // shifts text left or right
     padding-top: 37px;  // adjusts distance from image to text (use with image)
     padding-top: 0px;  /* remove the slashes and delete line above to remove image in mobile view */
     text-align: left;
}
}
I keep adding this and removing the slashes or line as it says and it removes the banner completely
 
Just checked and nope it worked for mobile but it completely removes the image for desktop as well
Cut and paste the code you are using on your site and I will place it on mine. Send me a PM via this website or post it here.
 
How can this code be implemented for promoted user groups? I have managed to do this but with the primary groups (administrator, moderator) but ... How to do this in those groups that are automatically assigned to users as they meet objectives? Thanks in advance.
 
How can this code be implemented for promoted user groups? I have managed to do this but with the primary groups (administrator, moderator) but ... How to do this in those groups that are automatically assigned to users as they meet objectives? Thanks in advance.
Don't know. You may ask in the support forum.
 
Top Bottom