Less for custom group banners

kick

Administrator
Staff member
Joined
Apr 7, 2020
Messages
187
Reaction score
229
Points
43
To add custom group banners as default in XF 2, it is enough to specify a custom class in the group settings.
1589225913824.png

Where is userBanner userBanner--admin, this is our custom class.
Less:
.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: 1px @xf-paddingMedium;
    border: 1px solid transparent;
    border-radius: @xf-borderRadiusSmall;
    text-align: center;

    strong
    {
        font-weight: inherit;
    }
    // Custom custom banners for groups
    &.userBanner--admin{ .m-userBannerVariation(white, #0bbcbc); }
    // Here is the code for a new banner, each banner from a new line
}
1589225997729.png
 
Top