Skip to main content

Understanding script for a newbie

  • January 21, 2023
  • 3 replies
  • 46 views
S
Forum|alt.badge.img+6

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

Greg_F
Forum|alt.badge.img+18
  • Greg_F
  • Brainy
  • 145 replies
  • January 23, 2023

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!

 

S
Forum|alt.badge.img+6
  • Sam_Stamport
  • Author
  • Known Participant
  • 11 replies
  • January 24, 2023

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!

 


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
Forum|alt.badge.img+18
  • Greg_F
  • Brainy
  • 145 replies
  • January 24, 2023

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!


Terms & ConditionsAccessibility statement