Make Trello is Awesome Again with Custom Everything

Trello is missing a black background

Having come back to Trello For Individuals (free) after several years, I see it was bought by Atlassian and has “Try Premium Free” banners in too many places, as well as little nags to the same effect. Also, the columns are all gray and saddening.

Trello Pain Points:

  • Trello has too many distracting “free trial” buttons and banners.
  • The column colours are gray and boring.
  • There is no black or charcoal background option.

Here are some of the distracting “free trial” call-to-action (CTA) buttons:

Even more Trello nags

More Trello nags

Trello nags

My company pays enterprise fees per seat already, but I just need something simple for home organization without the clutter and nagging, as well as a black background.

Trello For Individuals

I’d like to just use Trello like I did before Atlassian bought it and not see all the nag banners; can it just be a board of simple sticky notes again? Is that possible?


Goal: Create Tampermonkey scripts for Chrome/Brave to make Trello For Individuals awesome again with custom column colours, a dark background, and no “free trial”, nagging call-to-action (CTA) buttons.
Before You Read: I started making individual scripts to stack the effects I’m looking for in Trello. If you skip to the end, I rolled everything into one robust script after evolving the below individual scripts into one useful one.

1. Make the Background Black

Trello is missing a black background
Trello is missing a black background

We’re given the choice of pastel colours or some default backgrounds, but black is missing. If I put Trello on a side monitor all day, it would be nice to have a low-light background such as black. A black PNG could be used as a background, but one line of CSS would solve this, right?

Trello black background
Trello black background

The first Tampermonkey script just adds changes to the root background colour on body hover. Why on body hover? This is a React website so HTML elements come and go and change while on the same page. We could use the CSS !important directive, but using hover works well too.


2. Colour the Columns

It would be nice if the columns had colours: instead of having many boards that I’d forget about, I’d instead have one board with several columns of projects I can bounce around and between – kind of like a single physical wall of sticky notes.

Trello has coloured columns now

The plan is to find the column text and then work backward to colour the column and the holder of the cards. In my example, [Setup] in the column name will cause a pastel purple theme on that column. Edit the script to add/change keywords in the columns.

This script is quite crude, but it sets RGB hex colours in the desired places.


3. Remove Free-Trial and Upgrade Distractions

Here is what Trello without nag banners looks like:

Trello free-trial nags are gone

Using the same technique of searching for phrases like “Premium free” and “upgrade”, we can find those target <span>, <h2>, etc. tags and walk the HTML DOM backwards to find juicy container tags and obliterate them (well, display: none).


4. Trello Awesomeness in One Script

After working on individual improvements for Trello, and since there is overlap in the handling of the CSS search algorithm, I figure why not roll everything into one script and add some more zhuzh and use HSL colour format (e.g. color: hsl(74deg 13% 49%)) to make some very cool themes.

Why use HSL-colour notation? It stands for Hue, Saturation, and Lightness (HSL) and is very cool for this reason: If I find a sweet colour and want a complementary colour that is either lighter or darker, I’m pretty much SOL if I’m looking at a colour wheel for RGB colours: what usually happens is I can only find ugly colours that sort of match.

RGB is tough

Instead, if I find a nice colour using HSL, I can simply adjust the Lightness to make it darker or lighter and still retain the quality of the original colour. Could I just use alpha on RGB? No, because HTML containers stack on top of each other.

HSL Example

  • HSL(35deg 100% 69%) = #FFBD61
  • HSL(35deg 100% 49%) = #945600

You can see that by dropping the lightness by 20%, the RGB hex code changes considerably. HSL gives us a neat way to create themes without the trial and error of the RGB colour wheel. Chrome DevTools has an HSL toggle: click the little arrows in the screenshot above to move between colour formats.

Trello awesomeness

Customize to taste. The only additional feature is that exact CSS rules will be added with the !important directive and will be added to the DOM’s stylesheet globally. Also, to make this more robust, a setInterval(..., 1000) of one second is used to hunt for new elements to be modified because global rules are not possible.

Mutation Observer: Could I have instead used a MutationObserver on the DOM? You bet. However, because this is a React script, there is a shadow DOM, plus nodes in the DOM are constantly changing. That means a high-level observer would be required, like on <body> and forevermore we’d have to iterate on the whole DOM to see what changed, then perform the ancestor traversal to apply the CSS. In sum, when the page changes, we’d have to walk down the DOM, then walk it back up, for every CSS override we want – very inefficient.

How to Use

A keyword in the column controls the colour. See the screenshot below.

Trello column keywords

To adjust, please play with the fields in the JS below. For example, if the column contains the word Complete, then the green theme is applied. To limit false matches, I like to use square brackets. For example, [Misc] triggers the blue theme.


The Trello Awesomeness Script

Feel free to fork this script on GitHub.

Installation

You can copy and paste the above script into a new Tampermonkey Editor you can find on the Chrome store. This works for Chrome and Brave, presently.

Install Trello script


Conclusion

Trello awesome featured

With a bit of patience and DevTools magic, we are able to figure out what elements need to be adjusted or hidden on a React page with mangled CSS class names and a moving DOM structure to apply column colours and remove “free trial” distractions.

Success: We’ve created a Tampermonkey script for Chrome/Brave to make Trello awesome again by adding custom column colours that key off the partial column name, setting a black background, and by removing many “free trial” distractions.