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

I found several sizing and alignment issues with the last update and had to fix them.
I would recommend using this code instead.

Simplified the code and added explanations on how to position and resize the image.
Also added two options for mobile view:

Option #1 for mobile view - Remove background image but leave group name
Option #2 for mobile view - Keep background image but resize it

Add the following code to fix the size and alignment in 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-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;
}
}

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.

Just as the title implies...

​