Jan 21, 2023 12:26 PM
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!
Jan 23, 2023 01:39 AM
Wow that TamperMonkey is a pretty cool thing @TheTimeSavingCo !
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!
Jan 24, 2023 06:53 AM
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.
Jan 24, 2023 06:58 AM
I think the developer tools in Edge are very similar to Chrome - also can find selectors there. Good luck customizing!