Tutorials [cXF] Status icon with text

Marks-Man

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

91def33e17c53.png 4835ee31684a2.png

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


b6c80e2669ce4.png


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

Code:
Code:

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.

Continue reading...
 
Top