• Report Links
    We do not store any files or images on our server. XenPaste only index and link to content provided by other non-affiliated sites. If your copyrighted material has been posted on XenPaste or if hyperlinks to your copyrighted material are returned through our search engine and you want this material removed, you must contact the owners of such sites where the files and images are stored.

[cXF] Status icon with text


🦊 DNSProxy Layer 7 DDOS Protection 🥷 / DMCA Ignored 🫡 / Advanced Browser Checks 🕸

XMAN

Well-known member
Joined
Jul 12, 2021
Messages
33,393
Reaction score
248
Points
63
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