- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎Jan 21, 2025 01:23 PM
I want to use different colours for column headers to differentiate between those that must be changed manually and those that will automatically be updated from automation when certain conditions are met. Is this possible?
Solved! Go to Solution.
Accepted Solutions
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎Jan 21, 2025 07:19 PM - edited ‎Jan 21, 2025 07:25 PM
There isn't functionality for that at this time I'm afraid.  You can do this via Tampermonkey (https://www.tampermonkey.net/) though, and this seemed like a cool function so I built it heh. Let me know if you have any issues installing it or want it further customized or something
Edit: Also made a forum post about it here: https://community.airtable.com/t5/show-tell/custom-colors-for-field-column-headers/m-p/207477
// ==UserScript==
// @name Airtable Header Colors
// @namespace http://thetimesaving.company
// @version 22-Jan-25
// @description Changes the header color in Airtable views.
// @author adam@thetimesaving.company
// @match https://airtable.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=airtable.com
// @grant GM_addStyle
// ==/UserScript==
//Set the field headers and colors you want them to be here
//For the colors, just google 'Color Picker' and a bunch of options will show up
//For the field IDs, right click the field header and click 'Copy URL' and then paste it somewhere
//It'll look something like this: https://airtable.com/appbvEVTtJoARHXPM/tblkT2pj3Ouz1wQRQ/viwKoIZQGVZEAfOap/fldI5EIoOG25a85F7
//That last bit is what we're looking for 'fldI5EIoOG25a85F7'
//Customization start
const colorMap = {
"fldI5EIoOG25a85F7": { r: 255, g: 224, b: 204 },
"fldxj4ka7M2FwkJAP": { r: 207, g: 245, b: 209 },
"fldAPHkUW98PsaZV3": { r: 255, g: 234, b: 182 }
};
//Customization end
function applyColumnStyles() {
let styles = '';
Object.keys(colorMap).forEach(id => {
const baseColor = colorMap[id];
styles += `.cell.header[data-columnid="${id}"] { background-color: rgb(${baseColor.r}, ${baseColor.g}, ${baseColor.b}) !important; }\n`;
});
GM_addStyle(styles);
}
applyColumnStyles();
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎Jan 21, 2025 07:19 PM - edited ‎Jan 21, 2025 07:25 PM
There isn't functionality for that at this time I'm afraid.  You can do this via Tampermonkey (https://www.tampermonkey.net/) though, and this seemed like a cool function so I built it heh. Let me know if you have any issues installing it or want it further customized or something
Edit: Also made a forum post about it here: https://community.airtable.com/t5/show-tell/custom-colors-for-field-column-headers/m-p/207477
// ==UserScript==
// @name Airtable Header Colors
// @namespace http://thetimesaving.company
// @version 22-Jan-25
// @description Changes the header color in Airtable views.
// @author adam@thetimesaving.company
// @match https://airtable.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=airtable.com
// @grant GM_addStyle
// ==/UserScript==
//Set the field headers and colors you want them to be here
//For the colors, just google 'Color Picker' and a bunch of options will show up
//For the field IDs, right click the field header and click 'Copy URL' and then paste it somewhere
//It'll look something like this: https://airtable.com/appbvEVTtJoARHXPM/tblkT2pj3Ouz1wQRQ/viwKoIZQGVZEAfOap/fldI5EIoOG25a85F7
//That last bit is what we're looking for 'fldI5EIoOG25a85F7'
//Customization start
const colorMap = {
"fldI5EIoOG25a85F7": { r: 255, g: 224, b: 204 },
"fldxj4ka7M2FwkJAP": { r: 207, g: 245, b: 209 },
"fldAPHkUW98PsaZV3": { r: 255, g: 234, b: 182 }
};
//Customization end
function applyColumnStyles() {
let styles = '';
Object.keys(colorMap).forEach(id => {
const baseColor = colorMap[id];
styles += `.cell.header[data-columnid="${id}"] { background-color: rgb(${baseColor.r}, ${baseColor.g}, ${baseColor.b}) !important; }\n`;
});
GM_addStyle(styles);
}
applyColumnStyles();
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎Jan 24, 2025 06:25 AM
Many thanks, I will try that.
