To answer the original post, it's currently a template edit which I hope to turn into an add-on when I have the time (shut it Deeming!), and knowledge.
As it stands, it's a bit of a pain to manually update so I don't think releasing it as an edit would be very useful for most people.
I do though have all of the framework done such as Style Properties, options and permissions.
Only the actual php coding is left to do.
For the banners, I have this:
Code:
/* User group banners */
.userBanner {
background: transparent url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 1px 4px;
font-size: 10px;
font-weight: bold;
box-shadow: none;
}
.messageUserBlock .userBanner {
margin-top: 4px;
margin-bottom: 4px !important;
margin-right: 0px !important;
margin-left: 0px !important;
padding: 1px;
}
.messageUserBlock .userBanner:last-child {
margin-bottom: 0px !important;
}
.userBanner.wrapped span {
height: 0px;
}
.xenOverlay.memberCard .cardUserBanner {
margin: 4px 0;
}
.userBanner.bannerStaff {
background-color: @secondaryMedium;
border-color: @secondaryMedium;
color: @contentBackground;
text-shadow: 1px 1px 1px @secondaryMedium;
}
.cta-banner-supporter {
background-color: #000099;
border-color: #000099;
color: @contentBackground;
text-shadow: 1px 1px 1px #000099;
}
.cta-banner-contributor {
background-color: #6600CC;
border-color: #6600CC;
color: @contentBackground;
text-shadow: 1px 1px 1px #6600CC;
}
.cta-banner-valued-member {
background-color: #CC0000;
border-color: #CC0000;
color: @contentBackground;
text-shadow: 1px 1px 1px #CC0000;
}
.cta-banner-premium-contributor {
background-color: #FF6600;
border-color: #FF6600;
color: @contentBackground;
text-shadow: 1px 1px 1px #FF6600;
}
Then in the user groups add the corresponding classes to the custom field, e.g. userBanner cta-banner-contributor, userBanner cta-banner-premium-contributor, etc.
The guide Shelley referred to is here:
http://xenforo.com/community/resources/creating-custom-user-group-banner-css.2000/