Help

Airtable Cobuilder is here! Learn more about our new no-code app creation feature, powered by AI on the Airtable Academy

Re: Understanding script for a newbie

1165 0
cancel
Showing results for 
Search instead for 
Did you mean: 
Sam_Stamport
6 - Interface Innovator
6 - Interface Innovator

Adam_TheTimeSav helped me with a script using Tampermonkey. See Solved: Re: How to make a colorful kanban board - Airtable Community

// ==UserScript==
// @name Airtable - Change Kanban background
// @author Adam - The Time Saving Company
// @match https://airtable.com/*
// @grant GM_addStyle
// ==/UserScript==
GM_addStyle('#kanbanView > div.white { background-color: aliceblue !important; }');

I'm trying to understand what's happening behind the scenes. Here's what I see.

1. Tampermonkey enables scripts to "hook into" the code for a particular web site that is coded in Tampermonkey for a given script. @match tells Tampermonkey which web site to use.

2. I'm not quite sure what "@grant GM_addStyle" does. I'm guessing it links or includes a library of code?

3. I guess #kanbanview tells addstyle what part of the web page to manipulate.

4. div.white further refines what part of the web site code inside kanbanview to manipulate.

5. background-color is a parameter that sets background color.

6. !important is another parameter that overrides the original color.

I'm a newbie so please correct the above as necessary.

I'm wondering how to find in the HTML source the div for a task and the div for the task stack and how to determine which stack and which task I want to manipulate.

Thanks!

3 Replies 3

Wow that TamperMonkey  is a pretty cool thing @TheTimeSavingCo !

@Sam_Stamport 

The code above is changing the CSS style of the Airtable window you see

'#kanbanView > div.white { background-color: aliceblue !important; }'

# means id in html, you can see in the screenshot below

> div.white  means a child div with  CSS class "white"

So basically this #kanbanView > div.white  is describing the targeted element which style will change

{ background-color: aliceblue !important; } sets element above to contain style of background color "aliceblue"

Greg_F_0-1674465774201.png

 

As for finding the div  of stack?  I  guess best  would be to use the Inspector find the div with arrow tool and then copy the selector:

Greg_F_2-1674466611516.png

This will give you something like this : #kanbanView > div > div > div > div > div:nth-child(1) > div > div 🙄 there might be some more nicer/more stable way of getting the selector, but you would have to experiment a bit.

As for changing color of task probably it would be  easier to  just use  Airtable tags  like this:

Greg_F_1-1674466332964.png

 

 

Let me know if this helps!

 

Thanks so much for your help!

I think I need to learn more about the developer tools on Microsoft Edge. I'll look for a tutorial.

I'd really like to change the background color of tasks to make them look like sticky notes. I'll dig into this further.

I think the developer tools in Edge are very similar to Chrome - also can find selectors there. Good luck customizing!