Tags Color change

Ask the community
1

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
2

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
3

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:

4

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?

5

Hi @artur & @Suzie & @Marine.Hovhannisyan - can you please share the updated custom code based on the new table block update? We use the ‘tag’ system to link to formula text fields in airtable and use softr.io to display the tag as a ‘x’ colour based on the exact text. Thanks!

6

@rebeccajane @vskytte

can you folks try this version ?

<style>
		// tags with content "Low" 
    #table1 .tag-item[data-content="Low"] {
        background-color: #F00 !important;
    }
		// add span to the selector if you want to customize text color
    #table1 .tag-item[data-content="Low"] span {
        color: #FFF !important;
    }

		// tags that start with word "Low" 
    #table1 .tag-item[data-content^="Low"] {
        background-color: #F00 !important;
    }
		// tags that have substring "low"
    #table1 .tag-item[data-content*="low"] {
        background-color: #F00 !important;
    }

		// ratings that are 1 start
    #table1 [data-rating="1"] span {
        color: #F00 !important;
    }
</style>
2 Likes
7

It works great - thank you so much!

2 Likes
8

Hi @artur. Can you provide versions of this formula for list and list details blocks as well please? I have the same need for coloring tags from formula field values in tabs and modals with other dynamic blocks as well.

1 Like
9

Upvoting this, I have the same use case :slight_smile: Is it complicated to adjust it to lists?