Understanding script for a newbie

[Sam_Stamport]

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!

[Greg_F]

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"

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:

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:

Let me know if this helps!

[Sam_Stamport]

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.

[Greg_F]

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