Replace Thread Labels With Images

[adminabp]

Thread title says it all. I want a way to replace the text in thread labels with images.

So I could replace something like [music] with

Don't know if this could be done simply with a script or if it would require a plugin.

Any help would be appreciated.

[Pearson]

@wormopolis has a plugin here;

www.proboards.com/library/plugins/item/108

support.proboards.com/thread/466346/images-thread-title-library-support

[adminabp]

I know, I use it to add images to my thread titles.

I meant the labels you can 'tag' a thread with.

Sorry if I wasn't more clear.

And if I could use that plugin to change tags, I would need someone to talk me through how.

[Pearson]

This I found, hope it is what you are looking for, explanation included; 😀

support.proboards.com/thread/637016/label-images

maybe someone could write a plugin in the future.

[adminabp]

Jun 18, 2018 15:22:51 GMT -8 Pearson said:

This I found, hope it is what you are looking for, explanation included; 😀

support.proboards.com/thread/637016/label-images

maybe someone could write a plugin in the future.

Thank you so much, that is exactly what I was looking for!

Unfortunately, while it changes the text to an image just fine where it is displayed, it also seems to nerf the section where tags are applied, making that part unworkable.

Still gives me a good starting point to work from. I'll play around with it a bit...

Thanks again!

[Chris]

Add the o-label-anchor ancestor class to further restrict the CSS to only displayed labels and avoid affecting the label selector itself

.o-label-anchor .label-2 {
    font-size: 0;
}

.o-label-anchor .label-2::after {
    background-image: url("//cdn4.iconfinder.com/data/icons/it-communication-line/614/2858_-_Connected_Devices-512.png");
    content: " ";
    background-size: 40px;
    display: inline-block;
    width: 40px;
    height: 40px;
}

[adminabp]

Jun 18, 2018 21:54:06 GMT -8 Chris said:

.o-label-anchor .label-2 {
    font-size: 0;
}

.o-label-anchor .label-2::after {
    background-image: url("//cdn4.iconfinder.com/data/icons/it-communication-line/614/2858_-_Connected_Devices-512.png");
    content: " ";
    background-size: 40px;
    display: inline-block;
    width: 40px;
    height: 40px;
}

Awesome! Works perfectly.

Thank you Chris!