Skip to main content

Custom colors for the entire field/column!

  • January 22, 2025
  • 4 replies
  • 37 views
TheTimeSavingCo
Forum|alt.badge.img+18

Here's a Tampermonkey script that'll let you set the colors of the columns!

(Tampermonkey lets you install scripts in your browser to customize and add functionality to a site, in this case, Airtable! https://www.tampermonkey.net/)

To use it, you'll need to set up the exact field IDs and colors that you want those fields, as well as the opacity when hovering over the row / having a cell selected:

 

const opacity = 0.4 const colorMap = { "fldI5EIoOG25a85F7": { r: 255, g: 224, b: 204 }, "fldxj4ka7M2FwkJAP": { r: 207, g: 245, b: 209 }, "fldAPHkUW98PsaZV3": { r: 255, g: 234, b: 182 } };

 

I've placed instructions on how to get the field IDs and RGB color codes in the code itself.  Let me know if there are any bugs and I'll get them sorted!

I've also got another script that lets you customize the headers itself in this other forum post

---

 

// ==UserScript== // @name Airtable Column Colors // @namespace http://thetimesaving.company // @version 22-Jan-25 // @description Changes the column 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== //Customization start //Opacity when hovering / selecting row / cell const opacity = 0.4 //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' 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() { Object.entries(colorMap).forEach(([id, {r, g, b}]) => { const hoverColor = `rgba(${r}, ${g}, ${b}, ${opacity})`; const baseColor = `rgb(${r}, ${g}, ${b})`; const style = ` .dataRightPaneInnerContent [data-columnid="${id}"] { background-color: ${baseColor} !important; } .dataRightPaneInnerContent .hover [data-columnid="${id}"] { background-color: ${hoverColor} !important; } .dataRightPaneInnerContent .cell.cursor.selected[data-columnid="${id}"] { background-color: ${hoverColor} !important; } `; GM_addStyle(style); }); } applyColumnStyles();

 

 

Adam, Consultant @ The Time Saving Co

    Jason_Knighten1
    Forum|alt.badge.img

    This is great but not sure it will work for us (Hope I'm wrong).

    In our process, we are using a Base as a template, then Save As to create client/project specific bases. I am assuming if I updated the template base and followed the same process, the IDs would change with the Save As action and thus, the solution would have to be manually deployed every time we follow that process. 

    Please advise. 

    TheTimeSavingCo
    Forum|alt.badge.img+18
    Jason_Knighten1 wrote:

    This is great but not sure it will work for us (Hope I'm wrong).

    In our process, we are using a Base as a template, then Save As to create client/project specific bases. I am assuming if I updated the template base and followed the same process, the IDs would change with the Save As action and thus, the solution would have to be manually deployed every time we follow that process. 

    Please advise. 


    Edit: Original message isn't relevant anymore and so is hidden under the spoiler below

     

    Show content

    Yeap, that's right I'm afraid.  When you duplicate the base the field IDs would all change and the Tampermonkey script would have to be updated 

    You could write a script to help with this?   For example here's a script that'll output the IDs of the fields you specify in the 'fieldsToHighlight' array which will allow you to easily copy and paste stuff:

     

    let table = base.getTable("Participant") let fields = table.fields let fieldsToHighlight=["Age", "Hobbies"] for(let field of fields){ if (fieldsToHighlight.includes(field.name)) { console.log(`${field.name}: ${field.id}`) } }

     

     You could even write a script that'll output the exact Tampermokey script you need for the new base too

     

    Adam, Consultant @ The Time Saving Co
    Jason_Knighten1
    Forum|alt.badge.img
    TheTimeSavingCo wrote:

    Edit: Original message isn't relevant anymore and so is hidden under the spoiler below

     

    Show content

    Yeap, that's right I'm afraid.  When you duplicate the base the field IDs would all change and the Tampermonkey script would have to be updated 

    You could write a script to help with this?   For example here's a script that'll output the IDs of the fields you specify in the 'fieldsToHighlight' array which will allow you to easily copy and paste stuff:

     

    let table = base.getTable("Participant") let fields = table.fields let fieldsToHighlight=["Age", "Hobbies"] for(let field of fields){ if (fieldsToHighlight.includes(field.name)) { console.log(`${field.name}: ${field.id}`) } }

     

     You could even write a script that'll output the exact Tampermokey script you need for the new base too

     


    You lost me at "You could write a script". 🙄

    I work with no code tools for a reason. 😋

    Great stuff though. Seems like it would be relatively easy for Airtable to add this functionality. 

    TheTimeSavingCo
    Forum|alt.badge.img+18
    Jason_Knighten1 wrote:

    You lost me at "You could write a script". 🙄

    I work with no code tools for a reason. 😋

    Great stuff though. Seems like it would be relatively easy for Airtable to add this functionality. 


    Ah I just saw this thread and tried duplicating a base and the field ID stayed the same, and so you wouldn't need to set it up for each new base!

    Adam, Consultant @ The Time Saving Co

    Reply


    Most helpful members this week

    Terms & Conditions