XenForo'da Animasyonlu Arka Plan

Bir şablon değişikliği oluşturun (Hatalandırma modunu etkinleştir)
Şablon : app_user_banners.less Değişiklik
anahtarı: app_user_banners_less Arama
türü: Normal ifade
Bul: #^.*$#su
Değiştir:

.m-userBannerVariation(@color; @bg; @border: false) {
color: @color;
background-size: 2.5em 2.5em;
background-image: linear-gradient(-45deg, rgba(255, 255, 255, .35) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, .35) 75%, transparent 75%, transparent);
background-color: @bg;
border-color: xf-intensify(@bg, 10%);
& when (iscolor(@border)) {
border-color: @border;
}
}
.userBanner {
font-size: 70%;
font-weight: @xf-fontWeightNormal;
font-style: normal;
text-transform: uppercase;
font-weight: 500;
padding: 3px @xf-paddingMedium;
border: 1px solid transparent;
border-radius: @xf-borderRadiusSmall;
text-align: center;
display: inline-block;
text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000;
animation: bg-animate 5s linear infinite;
strong {
font-weight: inherit;
}
&.userBanner--hidden {
background: none;
border: none;
background-image: none;
box-shadow: none;
text-shadow: none;
}
&.userBanner--staff {
.m-userBannerVariation(@xf-linkColor, @xf-contentHighlightBg, @xf-borderColorHighlight);
background-image: none;
box-shadow: none;
text-shadow: none;     
}
&.userBanner--primary {
.m-userBannerVariation(white, #34495e);
}
&.userBanner--accent {
.m-userBannerVariation(white, #9a12b3);
}
&.userBanner--red {
.m-userBannerVariation(white, #d80000);
}
&.userBanner--green {
.m-userBannerVariation(white, #008000);
}
&.userBanner--olive {
.m-userBannerVariation(white, #808000);
}
&.userBanner--lightGreen {
.m-userBannerVariation(white, #a3c7a0);
}
&.userBanner--blue {
.m-userBannerVariation(white, #0008e3);
}
&.userBanner--royalBlue {
.m-userBannerVariation(white, #4169e1);
}
&.userBanner--skyBlue {
.m-userBannerVariation(white, #7cc3e0);
}
&.userBanner--gray {
.m-userBannerVariation(white, #808080);
}
&.userBanner--silver {
.m-userBannerVariation(white, #c0c0c0);
}
&.userBanner--yellow {
.m-userBannerVariation(white, #f7ca18);
}
&.userBanner--orange {
.m-userBannerVariation(white, #e87e04);
}
}
@keyframes bg-animate {
from {
background-position: 0 0;
}
to {
background-position: 5em 0;
}
}