Tags Color change

Hi guys, as many of you asked, here is a short code snippet which you can use to change the color of tags in our dynamic blocks. You need to add it to the page Settings → Custom Code → Header (please make sure to make the corresponding code changes of tag names before applying this code)

<script> document.addEventListener("DOMContentLoaded", function() {
const colorMap = {
'Ramp 1 - Luke Britton': {
'text': '#ffffff',
'background': '#1E8700'
},
'Food Delivery': {
'text': '#ffffff',
'background': '#D7532C'
},
'Online Courses': {
'text': '#ffffff',
'background': '#AA5E2C'
}
}
setInterval(function() {
for (let key in colorMap) {
if (colorMap.hasOwnProperty(key)) {
$('.js-list-item span:contains("' + key + '")').css('background-color', colorMap[key]['background']);
$('.js-list-item span:contains("' + key + '")').removeClass(function(index, className) {
return (className.match(/(^|\s)sw-background-color-\S+/g) || []).join(' ');
});
$('.js-list-item span:contains("' + key + '")').css('color', colorMap[key]['text']);
$('.js-list-item span:contains("' + key + '")').removeClass(function(index, className) {
return (className.match(/(^|\s)sw-text-color-\S+/g) || []).join(' ');
});
}
}
}, 200);
}); </script>
1 Like

This is really good. Thank you for sharing it.

There is any snippet that can do the folow:

If a list item containg “tag 1”, per example, then some ccs values of the list item body change to text’: ‘#color’,
‘background’: ‘#color’.

I am trying to enhance visibility of some items using tags but i dont know how to do it.

Thank you again, @Marine.Hovhannisyan

1 Like

Hey @Dox,

Unfortunately, we do not have a custom code to achieve that, let’s see if other members would be able to help :slight_smile:

This does not seem to work for me any longer. Worked until a few days ago - maybe it has something to do with an update to an update to the list block? Is there a way to fix this - or is it just at my end it has stopped working?