XF tips Xenforo Thead Prefixes Icon

zNoelX

Developer|Designer
Staff member
administrator
IMG_20200626_221156.JPG


Manual coding with css

CSS:
.Discussion{
    borde.Discussion{
    border: 1px solid #009dff;
    background: #2371a2;
}
.Discussion:before{
    content:"\f5da";
}

.Prefixes{
color: #fff;
border-radius:2px;
display: inline-block;
position: relative;
font-size: 90%;
padding: 0 5px 0 32px;
cursor: pointer;
font-size: 80%;
font-weight: bold;
&:before{
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
border-top-right-radius:40px;
border-right: 2px solid rgba(0, 0, 0, 0.1);
top: 0;
bottom: 0;
left: 0;
padding: 1px 4px 0 4px;
width: 20px;
font-family:'Font Awesome 5 Pro';
text-align: center;
}
}
Tutorial how to use:

Step 1 : Go to "Appearance -> Templates".

Step 2 : At the "Templates" search "Extra.less" then paste the code at the top.

Step 3 : Make thread prefixes name it "Discussion" then check "Other, custom css class name then type "Prefixes Discussion".

Thank you for reading😊
 

For school childeren

Total amount
$0.00
Goal
$50.00

Help

Total amount
$0.00
Goal
$50.00
Donation ends:
Top