Create a template modification (Enable debeug mode)
Template : app_user_banners.less Modification
key: app_user_banners_less Search
type: Regular expression
Find: #^.*$#su
Replace:
Code:
Code:
.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 {...Read more
Continue reading...