XF 2.2 Custom User Title Badges

[HonchoNSX]

Site Link: www.nsxprime.com

I am one of the site admins for NSX Prime and we just migrated our forum from VBB to Xenforo Cloud. Before we go live, I'm trying to clean up the look of the forum. One key area is the avatar and user badges. I searched many support threads on this issue and got it to work. However, the user title badges only work for one group: admins. Here is how it looks:



Here is the code I used to get the admin badge to display:



And here is the setting in the user group:

On NSX Prime, we also use the user title ladder, with levels based on post count. To use custom badges, I created new user groups to match each title ladder level. Even though I repeated the exact same code and settings for these badges, the user title ladder simply displays the text version of the title instead of the custom badge. Ideally, I'd like the staff badge to appear above the user title ladder badge. Using my own profile as an example, I should be displaying the "Legendary Member" badge because my post count is > 2000. Xenforo appears to be performing that function because it displays "Legendary Member" under my avatar picture. But, it's not using the custom badge.


Here is the code and setting for that user group.





What am I doing wrong? Thanks!

 

[NewYonkers]

Would you be kind enough to paste the coding rather than a screenshot of it?

 

[ForumDevs]

Sorry for reviving an old thread. We were recently working on similar styling.

Would you be kind enough to paste the coding rather than a screenshot of it?

Here it is:

/**************LEGENDARY MEMBERS***************/
.userBanner.LegenMember{
  background-image: url(https://lh3.googleusercontent.com/pw/AL9nZEU3zi0ayFa);
  display: block;
  background-size: 100px; // adjusts size of background image
  background-position: 0% 0%; // adjusts image position (x% y%)
  background-repeat: no-repeat; // keeps image from repeating
  text-indent: -7px; // shifts text left or right
  padding-top: 20px; // adjusts distance from image to text (group name)
  text-align: left;
  color: transparent; /* remove slashes if you want to hide the text */
}

/* Additional adjustments for message-userBanner Only */
.userBanner.LegenMember.message-userBanner {
  background-position: 50% 0%; // adjusts image position (x% y%)
  text-indent: 0px; // shifts text left or right
  text-align: center;
}

/* Adjusts size, position, or removal of banner image in Mobile view */
@media (max-width: 650px){
  .userBanner.LegenMember.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;
  }
}