Earlier we learned how to add a rainbow animation effect on Usernames in Xenforo, now we gonna add the rainbow effect on the user banners.
See the below result:
For this head over to Xenforo Admin Control Panel > Appearance > Templates > find “extra.less” template and add the below code:
.userBanner--staff {font-weight:bold;background-image: linear-gradient(210deg, #8F343A, #26A65B, #1C86EE, #FFBE1C, #176093, #7AF26D, #8E44AD, #CC6600, #CF4D35, #E0EEEE)!important; background-size: 1200% 1200%!important; -webkit-animation: trgamers 15s ease infinite!important; -moz-animation: trgamers 15s ease infinite!important; -o-animation: trgamers 15s ease infinite!important; animation: trgamers 15s ease infinite!important;}
@-webkit-keyframes trgamers {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
@-moz-keyframes trgamers {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
@-o-keyframes trgamers {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
@keyframes trgamers {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}change .userBanner–staff with the custom banner you want to add effect to.
Click Save when done.