Thread labels making

[hdd]

Is it possible to make label with different background colour(from colour picker) and single text color(like white/black)?

[hdd]

BUMP!!!

I solved it.
var elements = document.getElementsByClassName('ui-label');
for(var i = 0; i < elements.length; i++){
elements[i].style.background = elements[i].style.color;
elements[i].style.color = null;
}& Add a CSS to stylesheet
.ui-label{border-radius:3px; color:white;}


[Nscalerr 🐺]

Tested this on my own forum and created a plugin version, so it works with all 6 of my themes.

[hdd]

Jan 1, 2020 22:41:51 GMT -8 Nscalerr 🐺 said:

Tested this on my own forum and created a plugin version, so it works with all 6 of my themes.

Can you please provide the link of your plugin and post it in plugin library.

[Nscalerr 🐺]

This is the plugin version which is open souce, (which means it can be edited. The css for it is in the plugin itself, (In the components section). As far as uploading it to the library - I want to do some testing first.

Custom Labels.pbp (510 B)

[hdd]

Jan 2, 2020 1:44:03 GMT -8 Nscalerr 🐺 said:

This is the plugin version which is open souce, (which means it can be edited. The css for it is in the plugin itself, (In the components section). As far as uploading it to the library - I want to do some testing first.

I don't know but this script is not working for message labels.

[Nscalerr 🐺]

Well it works for the thread labels on my forum, but for message labels, it might take a different bit of javascript and/or css.

Edit: it is looking like the javascript itself will need to be changed, which means someone else will have to do it. I only know html and css.

Maybe Chris or elli will be able to help out.

[Chris]

Dec 31, 2019 4:36:43 GMT -8 hdd said:

BUMP!!!

I solved it.
var elements = document.getElementsByClassName('ui-label');
for(var i = 0; i < elements.length; i++){
elements[i].style.background = elements[i].style.color;
elements[i].style.color = null;
}& Add a CSS to stylesheet
.ui-label{border-radius:3px; color:white;}


A quick developer console execution of the posted code on a few pages shows it affects both thread and PM labels equally or am I missing some nuance here?

If the plugin version of the code added a route lookup (I didn't check the plugin) for threads then simply add additional route checks for PMs.

If you are using a modified theme requiring a change in code then the modifications that comes with that theme would have to be made known in order to construct a corresponding change to the code that would account for such modifications.

SPOILER: Click to show

[hdd]

Chris
Even I added the script in the conversation list template it is not working.
I don't know much about making plugins and js.
Can you make one plugin please?
Or I make a request in Plugin Request Thread?

[Nscalerr 🐺]

The plugin is just the javascript and the css added to have it function across several themes, (without having it in the Global Footer).

[Chris]

You'll most likely need to wrap that javascript in a function so you can then delay it to run after the browser is ready to display the page. This way it runs after the labels are created on the PM pages since they get dynamically created when it hits the browser and not simply included in the HTML sent  by Proboards like on thread pages.

something along the lines of

<script type="text/javascript">
   $(()=>{var elements = document.getElementsByClassName('ui-label');
   for(var i = 0; i < elements.length; i++) {
       elements[i].style.background = elements[i].style.color;
       elements[i].style.color = null;
   }})
</script>