Trello coloured lists
Easily add colour backgrounds to Trello lists using Tampermonkey
Trello is an online organisation and productivity tool that helps you keep on top of everything you need to do in a versatile and visual way. Trello follows the kanban method of visualising the flow of work, using cards organised in lists, so that work-in-progress may be balanced and bottlenecks easily spotted.
One problem that I had with Trello out-of-the-box is that all the lists have the same visual weight: it is often hard to quickly distinguish one column from another. Which is why I wrote this simple script.
How to install
1. Download Tampermonkey
You will need Tampermonkey (or any other browser add-on that supports user scripts).
- Tampermonkey for Google Chrome
- Tampermonkey for Mozilla Firefox
- Tampermonkey for Opera
- Tampermonkey for Microsoft Edge
- Tampermonkey for Apple Safari
2. Install the script
- Open the Tampermonkey dashboard and create a new script.
- Copy the Trello coloured lists script and paste it into your new script.
- Save the script.
- Ensure it is enabled on the "Installed userscripts" tab.
- Now open a board in Trello.
- Move your mouse off the Trello board page and then return it to trigger the script.
Customise the script
Add new colours
To add a new colour, simply add it to the
Let's say you want to add dark blue, add it after the blue variable. You will notice that I have arranged these in order of the colour spectrum.
var red = '#e06666', // indianred orange = '#f6b26b', // sandybrown yellow = '#ffd966', // khaki green = '#93c47d', // darkseagreen blue = '#6fa8dc', // cornflowerblue darkblue = '#3d85c6', // steel blue <-- ADDED ...
Add new list titles
To add a colour background to a list on one of your Trello boards, first choose which colour you want the list to be, then update the appropriate colour.
For example, let's make all your columns entitled 'Incidents' red. This is what the default script looks like for red:
// Red - danger $("textarea:contains('Bugs'), textarea:contains('Fix'), textarea:contains('Issues')") .parents('.list').css('background', red);
Now add a new
textarea:contains('Incidents') selector. I always try to ensure the lists are organised alphabetically to help find them, like so:
// Red - danger $("textarea:contains('Bugs'), textarea:contains('Fix'), textarea:contains('Incidents') textarea:contains('Issues')") .parents('.list').css('background', red);
Now save your changes.
If your list background colour is dark you will need to make sure the text of your list title is white. Simply add
.css('color', white), like this:
// Dark blue $("textarea:contains('Things')") .css('color', white) .parents('.list').css('background', darkblue);
Trello coloured lists is released under a GNU General Public License v3.0.
Please feel free to customise the script to your own requirements. Update the colours, change the list titles to check, add to the script, improve it, whatever you like, feel free to hack away!
Permissions of this strong copyleft license are conditioned on making available complete source code of licensed works and modifications, which include larger works using a licensed work, under the same license. Copyright and license notices must be preserved. Contributors provide an express grant of patent rights.
See [LICENSE] for more details.