XenForo Prefixes without a background with icons

</clown>

Loyal Member
Change the default prefixes, remove the background and add Font Awesome icons.
We make a modification of the template extra.less, namely modification, that the changed prefixes would appear in the prefixes settings for selection.

Template: extra.less
Modification key: prefix
Description: Prefixes
Search Type: Regular Expression
Find:
Code:
#^.*$#su
Replace:
Less:
$0
.labelTextShadow(@shadow: 0 0 0, @color: transparent) {
    text-shadow: @shadow @color;
}

.label {
    font-size: 85%;
    text-transform: uppercase;
    font-weight: 500;

    .structItem-title & {
        font-weight: 500;
    }
 
    &:before {
           .m-faBase();
            padding-right: 5px;
        }
 
    &.label--hidden {
        font-size: 85%;
    }
 
    &.label--red {
        .m-labelVariation(rgb(231,76,60), transparent, transparent);
        .m-faBefore(@fa-var-exclamation-circle);
        .labelTextShadow();
    }

    &.label--green {
        .m-labelVariation(rgb(22,160,133), transparent, transparent);
        .m-faBefore(@fa-var-check-circle);
        .labelTextShadow();
    }

    &.label--olive {
        .m-labelVariation(rgb(39,174,96), transparent, transparent);
        .m-faBefore(@fa-var-question-circle);
        .labelTextShadow();
    }

    &.label--lightGreen {
        .m-labelVariation(rgb(46,204,113), transparent, transparent);
        .m-faBefore(@fa-var-usd-circle);
        .labelTextShadow();
    }

    &.label--blue {
        .m-labelVariation(rgb(41,128,185), transparent, transparent);
        .m-faBefore(@fa-var-upload);
        .labelTextShadow();
    }

    &.label--royalBlue {
        .m-labelVariation(rgb(52,152,219), transparent, transparent);
        .m-faBefore(@fa-var-download);
        .labelTextShadow();
    }

    &.label--skyBlue {
        .m-labelVariation(rgb(142,68,173), transparent, transparent);
        .m-faBefore(@fa-var-shopping-basket);
        .labelTextShadow();
    }

    &.label--gray {
        .m-labelVariation(rgb(127,140,141), transparent, transparent);
        .m-faBefore(@fa-var-file-alt);
        .labelTextShadow();
    }

    &.label--silver {
        .m-labelVariation(rgb(189,195,199), transparent, transparent);
        .m-faBefore(@fa-var-edit);
        .labelTextShadow();
    }

    &.label--yellow {
        .m-labelVariation(rgb(241,196,15), transparent, transparent);
        .m-faBefore(@fa-var-bullhorn);
        .labelTextShadow();
    }

    &.label--orange {
        .m-labelVariation(rgb(230,126,34), transparent, transparent);
        .m-faBefore(@fa-var-wallet);
        .labelTextShadow();
    }
}
Plugin: Must be empty

2020-04-11_103345-png.114741
 

ngbaze

Rising 🤑Billionaire💰
Loyal Member
Change the default prefixes, remove the background and add Font Awesome icons.
We make a modification of the template extra.less, namely modification, that the changed prefixes would appear in the prefixes settings for selection.

Template: extra.less
Modification key: prefix
Description: Prefixes
Search Type: Regular Expression
Find:
Code:
#^.*$#su
Replace:
Less:
$0
.labelTextShadow(@shadow: 0 0 0, @color: transparent) {
    text-shadow: @shadow @color;
}

.label {
    font-size: 85%;
    text-transform: uppercase;
    font-weight: 500;

    .structItem-title & {
        font-weight: 500;
    }

    &:before {
           .m-faBase();
            padding-right: 5px;
        }

    &.label--hidden {
        font-size: 85%;
    }

    &.label--red {
        .m-labelVariation(rgb(231,76,60), transparent, transparent);
        .m-faBefore(@fa-var-exclamation-circle);
        .labelTextShadow();
    }

    &.label--green {
        .m-labelVariation(rgb(22,160,133), transparent, transparent);
        .m-faBefore(@fa-var-check-circle);
        .labelTextShadow();
    }

    &.label--olive {
        .m-labelVariation(rgb(39,174,96), transparent, transparent);
        .m-faBefore(@fa-var-question-circle);
        .labelTextShadow();
    }

    &.label--lightGreen {
        .m-labelVariation(rgb(46,204,113), transparent, transparent);
        .m-faBefore(@fa-var-usd-circle);
        .labelTextShadow();
    }

    &.label--blue {
        .m-labelVariation(rgb(41,128,185), transparent, transparent);
        .m-faBefore(@fa-var-upload);
        .labelTextShadow();
    }

    &.label--royalBlue {
        .m-labelVariation(rgb(52,152,219), transparent, transparent);
        .m-faBefore(@fa-var-download);
        .labelTextShadow();
    }

    &.label--skyBlue {
        .m-labelVariation(rgb(142,68,173), transparent, transparent);
        .m-faBefore(@fa-var-shopping-basket);
        .labelTextShadow();
    }

    &.label--gray {
        .m-labelVariation(rgb(127,140,141), transparent, transparent);
        .m-faBefore(@fa-var-file-alt);
        .labelTextShadow();
    }

    &.label--silver {
        .m-labelVariation(rgb(189,195,199), transparent, transparent);
        .m-faBefore(@fa-var-edit);
        .labelTextShadow();
    }

    &.label--yellow {
        .m-labelVariation(rgb(241,196,15), transparent, transparent);
        .m-faBefore(@fa-var-bullhorn);
        .labelTextShadow();
    }

    &.label--orange {
        .m-labelVariation(rgb(230,126,34), transparent, transparent);
        .m-faBefore(@fa-var-wallet);
        .labelTextShadow();
    }
}
Plugin: Must be empty

2020-04-11_103345-png.114741
I don't understand?
 
Back
Top Bottom