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

4835ee31684a2.png

91def33e17c53.png


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

b6c80e2669ce4.png


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:

6f2f505734dc2.png

668ac07d84753.png

4fc8ed0ba3e74.png
Author
shimmer
Views
494
First release
Last update
Rating
0.00 star(s) 0 ratings

More resources from shimmer

Top