Would it be possible to have different colors for the tags in the list items?
The code snippet below does it and needs to be injected into the page settings custom code header area.
<script>
document.addEventListener("DOMContentLoaded", function() {
const colorMap = {
'Listings': {'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 div.tags p:contains("' + key + '")').css('background-color', colorMap[key]['background']);
$('.js-list-item div.tags p:contains("' + key + '")').removeClass (function (index, className) {
return (className.match (/(^|\s)sw-background-color-\S+/g) || []).join(' ');
});
$('.js-list-item div.tags p:contains("' + key + '")').css('color', colorMap[key]['text']);
$('.js-list-item div.tags p:contains("' + key + '")').removeClass (function (index, className) {
return (className.match (/(^|\s)sw-text-color-\S+/g) || []).join(' ');
});
}
}
},
200
);
});
</script>
If the above version doesn’t work, most probably means newer version of listing block is used and there we need the following one:
<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>
2 Likes
Artur,
To edit this code, do we just change the text inside these quotes (‘Listings’, ‘Food Delivery’, ‘Food Delivery’) to our tags then change the HEX ‘text’ & ‘background’ numbers (’#ffffff’ & ‘#1E8700’) for the text & background to what we want?
Example for one tag:
So I just change this:
‘Listings’: {‘text’: ‘#ffffff’, ‘background’: ‘#1E8700’},
To this:
‘
Shift Confirmed’: {‘text’: ‘#000000’, ‘background’: ‘#20C933’},
Then put code in PAGE settings - Custom Code - Code Inside Page Header.
I tried this and couldn’t get it to work?
Thanks again,
Nick
Hey @Nick, yes correct!
Pls share your page with the code in it to quickly check.
It could be related to the emoji symbol, but would like to check on real one.
Sent you DM. Thanks.
Incase anyone wants the Airtable colors for their tags. Here is a list of the RGB numbers for the colors I found. You will have to convert to HEX numbers.
[Colors.BLUE_BRIGHT]: [45, 127, 249],
[Colors.BLUE_DARK_1]: [39, 80, 174],
[Colors.BLUE_LIGHT_1]: [156, 199, 255],
[Colors.BLUE_LIGHT_2]: [207, 223, 255],
[Colors.BLUE]: [18, 131, 218],
[Colors.CYAN_BRIGHT]: [24, 191, 255],
[Colors.CYAN_DARK_1]: [11, 118, 183],
[Colors.CYAN_LIGHT_1]: [119, 209, 243],
[Colors.CYAN_LIGHT_2]: [208, 240, 253],
[Colors.CYAN]: [1, 169, 219],
[Colors.GRAY_BRIGHT]: [102, 102, 102],
[Colors.GRAY_DARK_1]: [68, 68, 68],
[Colors.GRAY_LIGHT_1]: [204, 204, 204],
[Colors.GRAY_LIGHT_2]: [238, 238, 238],
[Colors.GRAY]: [102, 102, 102],
[Colors.GREEN_BRIGHT]: [32, 201, 51],
[Colors.GREEN_DARK_1]: [51, 138, 23],
[Colors.GREEN_LIGHT_1]: [147, 224, 136],
[Colors.GREEN_LIGHT_2]: [209, 247, 196],
[Colors.GREEN]: [17, 175, 34],
[Colors.ORANGE_BRIGHT]: [255, 111, 44],
[Colors.ORANGE_DARK_1]: [215, 77, 38],
[Colors.ORANGE_LIGHT_1]: [255, 169, 129],
[Colors.ORANGE_LIGHT_2]: [254, 226, 213],
[Colors.ORANGE]: [247, 101, 59],
[Colors.PINK_BRIGHT]: [255, 8, 194],
[Colors.PINK_DARK_1]: [178, 21, 139],
[Colors.PINK_LIGHT_1]: [249, 157, 226],
[Colors.PINK_LIGHT_2]: [255, 218, 246],
[Colors.PINK]: [233, 41, 186],
[Colors.PURPLE_BRIGHT]: [139, 70, 255],
[Colors.PURPLE_DARK_1]: [107, 28, 176],
[Colors.PURPLE_LIGHT_1]: [205, 176, 255],
[Colors.PURPLE_LIGHT_2]: [237, 226, 254],
[Colors.PURPLE]: [124, 57, 237],
[Colors.RED_BRIGHT]: [248, 43, 96],
[Colors.RED_DARK_1]: [186, 30, 69],
[Colors.RED_LIGHT_1]: [255, 158, 183],
[Colors.RED_LIGHT_2]: [255, 220, 229],
[Colors.RED]: [239, 48, 97],
[Colors.TEAL_BRIGHT]: [32, 217, 210],
[Colors.TEAL_DARK_1]: [6, 160, 155],
[Colors.TEAL_LIGHT_1]: [114, 221, 195],
[Colors.TEAL_LIGHT_2]: [194, 245, 233],
[Colors.TEAL]: [2, 170, 164],
[Colors.YELLOW_BRIGHT]: [252, 180, 0],
[Colors.YELLOW_DARK_1]: [184, 117, 3],
[Colors.YELLOW_LIGHT_1]: [255, 214, 110],
[Colors.YELLOW_LIGHT_2]: [255, 234, 182],
[Colors.YELLOW]: [224, 141, 0],
Source: blocks/colors.ts at master · Airtable/blocks · GitHub
1 Like
Artur, Would it be difficult to modify this code to work in the list details as well?
Hi Nick did you manage to get this code working?
looking for the same function but pasted code into the custom code page header and doesn’t seem to work either?
Great! Thanks Artur.
Thanks for the reply Nick I’m using the newest list block…what field type are you linking to in Airtable?
Single select in airtable
Same set up as mine?
Any chance of pasting a copy of your working code on here? I must be missing something! Artur is looking into this also…
Thank you
Hi @artur where did you share the script? I’m now on my home laptop and have noticed that the chats seem to stay with the pc the chat was started on? could you email it to me or post on here? thanks for you help!
Hi @Dan,
I have put it here Way to add different colors for the List item tags - #2 by artur
now it has 2 versions
–Artur
For table blocks:
<script>
document.addEventListener("DOMContentLoaded", function() {
const colorMap = {
'POLYGON': {'text': '#ffffff', 'background': '#1E8700'},
'BSC': {'text': '#ffffff', 'background': '#D7532C'},
'SOME RISK': {'text': '#ffffff', 'background': '#AA5E2C'}
}
setInterval(
function() {
for (let key in colorMap) {
if (colorMap.hasOwnProperty(key)) {
$('.tags-container span:contains("' + key + '")').css('background-color', colorMap[key]['background']);
$('.tags-container span:contains("' + key + '")').removeClass (function (index, className) {
return (className.match (/(^|\s)sw-background-color-\S+/g) || []).join(' ');
});
$('.tags-container span:contains("' + key + '")').css('color', colorMap[key]['text']);
$('.tags-container span:contains("' + key + '")').removeClass (function (index, className) {
return (className.match (/(^|\s)sw-text-color-\S+/g) || []).join(' ');
});
}
}
},
200
);
});
</script>
1 Like