xF2 Template Modification Thread and Banner Prefix Styles

[Pr0fesseur]

Made a bunch of prefix and banner code so you can spice up your site!!!
And made it easier to implement when you want to create more

Navigate to ACP>Appearence>styles>templates

Now create a new template called prefix_more (or whatever you like)
Pastethe following code into the box and save

/*ROYALBLUE*/
.royalblue {
    background-color: #3d3ec2;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #ffffff;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}
/*LIMEGREEN*/
.limegreen {
    background-color: #01bd23;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}
/*DARKVIOLET*/
.darkviolet {
    background-color: #9f05c4;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}
/*FIREBRICK*/
.firebrick {
    background-color: #a3052f;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}
/*GOLD*/
.gold {
    background-color: #f4e618;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #000000;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}
/*GOLD*/
.gold {
    background-color: #f4e618;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #000000;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}
/*YELLOWGREEN*/
.yellowgreen {
    background-color: #a0da44;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #000000;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}
/*MEDIUMSEAGREEN*/
.mediumseagreen {
    background-color: #5fc869;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #000000;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}
/*MEDIUMTURQUOISE*/
.mediumturquoise {
    background-color: #3fbeb8;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #000000;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}
/*DODGERBLUE*/
.dodgerblue {
    background-color: #2aa3da;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #000000;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}
/*CORNFLOWERBLUE*/
.cornflowerblue {
    background-color: #518cd8;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #000000;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}
/*PALEVIOLETRED*/
.palevioletred {
    background-color: #d06cb2;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #000000;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}
/*INDIANRED*/
.indianred {
    background-color: #e84862;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #000000;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}
/*TOMATO*/
.tomato {
    background-color: #f44945;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #000000;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}
/*DARKORANGE*/
.darkorange {
    background-color: #f26f06;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #000000;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}
/*ORANGE*/
.orange {
    background-color: #f4a900;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #000000;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}

If you want to add a FontAwesome icon you can use this code as below

/*GOLD*/
.gold {
    background-color: #f4e618;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #000000;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}


.gold:before
{
    content: "\f0eb";
    font-family: Font Awesome 5 Free;
    margin-right: 5px;
    font-weight: normal;
    font-size: 110%;
}

Navigate to ACP>Appearence>styles>templates

Find the file called Extra.less and paste the following code at the very top and save

<xf:include template="prefix_more" />

Now you can use them by entering the name in the second line of each color in this instance the .limegreen becomes limegreen
You can change either the title "/*LIMEGREEN*/" or the object name ".limegreen" to make it easier for you to remember but you must always refer to the one you want by the the name without the period.

View attachment 15844
I suggest you leave the color name somewhere so you can remember whatcolor it is.

*edit for spelling

 

[Soft4Win]

Could you please provide some screenshots, so that we can know what we are looking at.

 

[lazarote]

hey bro, modify the code , in this part :

font-family: Font Awesome 5 Free;

Pr0fesseurin XF 2.1 is

font-family: Font Awesome\ 5 Pro,Font Awesome\ 5 Brands;

btw awesome code, im using it in my site, thanks

 

[zeus1971]

Thx.
Doing this, than I can see the new colors style as sample in CPA , in thread prefix ?

 

[lazarote]

the icons was not rendering me correctly, for colors I use a css gradient ?

 

[Pr0fesseur]

This is just the setup for your banner styles. for example when you want to make a prefix one of the above styles all you have to do is use the name of the new style above "gold" for example and it will format your prefix properly with the gold color.

 

[A_Joycel]

Doesn´t work to me! I follow all the steps and nothing don´t display the prefix

 

[BattleKing]

Doesn´t work to me! I follow all the steps and nothing don´t display the prefix

A_Joycel

It works, but I changed the following line:

font-family: Font Awesome 5 Free;

to

font-family: 'Font Awesome 5 Pro';

If you are using a ThemeHouse theme, please be aware to change the icons settings from material to FontAwesome.

 

[Pr0fesseur]

View attachment 22149

It works, but I changed the following line:

font-family: Font Awesome 5 Free;

to

font-family: 'Font Awesome 5 Pro';

If you are using a ThemeHouse theme, please be aware to change the icons settings from material to FontAwesome.

View attachment 22150

BattleKingI left it Free Font Awesome for licensing purposes, but pro works too.. These are super basic, and are meant to be a clean template you can build off of.

I didnt find anything out there that was plug and play and also well documented and laid out so you can use as is or easily understand how to change it to your liking.

 

[Pr0fesseur]

View attachment 22149

It works, but I changed the following line:

font-family: Font Awesome 5 Free;

to

font-family: 'Font Awesome 5 Pro';

If you are using a ThemeHouse theme, please be aware to change the icons settings from material to FontAwesome.

View attachment 22150

BattleKing@A_Joycel make sure that your prefixes are enabled for the Node you are adding it on