Help

The Community will be undergoing maintenance from Friday February 21 - Friday, February 28 and will be "read only" during this time. To learn more, check out our Announcements blog post.

Colouring column headers

Solved
Jump to Solution
246 2
cancel
Showing results for 
Search instead for 
Did you mean: 
zimpeterw
4 - Data Explorer
4 - Data Explorer

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?

Podcast Host| Speaker| Writer|
1 Solution

Accepted Solutions
TheTimeSavingCo
18 - Pluto
18 - Pluto

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

Screenshot 2025-01-22 at 11.17.55 AM.png

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();

 

 

 

 

See Solution in Thread

2 Replies 2
TheTimeSavingCo
18 - Pluto
18 - Pluto

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

Screenshot 2025-01-22 at 11.17.55 AM.png

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();

 

 

 

 
zimpeterw
4 - Data Explorer
4 - Data Explorer

Many thanks, I will try that.

Podcast Host| Speaker| Writer|