Hatta varsayılan banner'ların görüntüsünü beğenmedim, ancak onlarla gruplar kurmak ve onları değiştirmeye çalışmak daha uygun görünüyordu. Gerekli olmayan yerlerde görüntülenen kenarlık kaldırıldı, yazı tipi küçük şeyler için bir sermaye yaptı. App_user_banners.less şablonundaki herkes bununla değiştirilir:
less:
less:
CSS:
.m-userBannerVariation(@color; @bg; @border: false)
{
color: @color;
background: @bg;
border-color: xf-intensify(@bg, 10%);
& when (iscolor(@border))
{
border-color: @border;
}
}
.userBanner
{
font-size: 75%;
font-weight: @xf-fontWeightNormal;
font-style: normal;
padding: 3px @xf-paddingMedium;
border: 1px solid transparent;
border-radius: @xf-borderRadiusSmall;
text-align: center;
text-transform: uppercase;
display: inline-block;
strong
{
font-weight: inherit;
}
// variations
&.userBanner--hidden
{
background: none;
border: none;
box-shadow: none;
}
&.userBanner--staff,
&.userBanner--primary
{
.m-userBannerVariation(@xf-linkColor, @xf-contentHighlightBg, @xf-borderColorHighlight);
}
&.userBanner--accent
{
.m-userBannerVariation(@xf-textColorAccentContent, @xf-contentAccentBg, @xf-borderColorAccentContent);
}
&.userBanner--red { .m-userBannerVariation(white, #d80000, transparent); }
&.userBanner--green { .m-userBannerVariation(white, green, transparent); }
&.userBanner--olive { .m-userBannerVariation(white, olive, transparent); }
&.userBanner--lightGreen { .m-userBannerVariation(black, #ccf9c8, #bee8ba); }
&.userBanner--blue { .m-userBannerVariation(white, #0008e3, transparent); }
&.userBanner--royalBlue { .m-userBannerVariation(white, royalblue, transparent); }
&.userBanner--skyBlue { .m-userBannerVariation(white, #7cc3e0, transparent); }
&.userBanner--gray { .m-userBannerVariation(white, gray, transparent); }
&.userBanner--silver { .m-userBannerVariation(black, silver, transparent); }
&.userBanner--yellow { .m-userBannerVariation(black, #ffff91, #e6e687); }
&.userBanner--orange { .m-userBannerVariation(black, #ffcb00, transparent); }
}