xF2 Template Modification Thread and Banner Prefix Styles

Pr0fesseur

Moderator
Staff member
Moderator
+Lifetime VIP+
V.I.P Member
Collaborate
Registered
Joined
Nov 20, 2019
Messages
361
Points
103

Reputation:

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

CSS:
/*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

CSS:
/*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
Code:
<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
 
Last edited:

Soft4Win

Developer
Staff member
Moderator
Collaborate
Registered
Joined
Apr 27, 2019
Messages
370
Points
103

Reputation:

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

lazarote

web enthusiastic
Collaborate
Registered
Joined
Jun 24, 2019
Messages
141
Points
53

Reputation:

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

Pr0fesseur

Moderator
Staff member
Moderator
+Lifetime VIP+
V.I.P Member
Collaborate
Registered
Joined
Nov 20, 2019
Messages
361
Points
103

Reputation:

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.
 
Last edited:

A_Joycel

Member
Registered
Joined
Jul 31, 2019
Messages
23
Points
13

Reputation:

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

BattleKing

Spirit of darkness
Staff member
Administrator
Moderator
+Lifetime VIP+
S.V.I.P Member
Collaborate
Registered
Joined
May 24, 2020
Messages
3,497
Points
523

Reputation:

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


It works, but I changed the following line:
Less:
font-family: Font Awesome 5 Free;
to
Less:
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.

1623486709300.png
 

Pr0fesseur

Moderator
Staff member
Moderator
+Lifetime VIP+
V.I.P Member
Collaborate
Registered
Joined
Nov 20, 2019
Messages
361
Points
103

Reputation:

View attachment 22149

It works, but I changed the following line:
Less:
font-family: Font Awesome 5 Free;
to
Less:
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

Moderator
Staff member
Moderator
+Lifetime VIP+
V.I.P Member
Collaborate
Registered
Joined
Nov 20, 2019
Messages
361
Points
103

Reputation:

Top