XF2 GUIDE - [cXF] Status icon with text

Status icons show us a thread type or just if a thread is sticky, watched, etc. They can be useful.

But we can expand the customization a bit more to have it like this:

As you can see the icon can look like a label with a text. Maybe you can find this useful for your forum. If not, just skip it.

To achieve this just add this code to your extra.less template:

Code:

/* Status icon with text */
.structItem-statuses .fa-question-circle:before { /* icon */
    color: #fff !important;
    background: #007bff;
    padding: 2px 0px 2px 4px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    line-height: ((@xf-lineHeightDefault) * .9);
}

.structItem-statuses .fa-question-circle:after { /* text after icon */
    content: "Question";
    color: #fff;
    background: #007bff;
    padding: 1px 4px 2px 2px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    font-family: @xf-fontFamilyUi;
}
/*********/

To change the text to anything else, just font the content property and edit it. Yes, it is not ideal for multilanguage forums (in that case every language should use its own style and paste different code there).

Depends on all your other settings you might need to adjust and play a bit with the paddings.

As you can see, the question label is a customized status icon for question thread type and Prefix 1 is a built-in thread prefix.

Some more examples of status icons with text and thread prefixes:

XF2 GUIDE [cXF] Status icon with text

More resources from shimmer

Share this resource