Coloured lists in Trello

Gareth Saunders
Friday 7 March 2014
Background colours on selected lists in Trello
Background colours on selected lists in Trello

As you probably know, we’re big fans of Trello here in the web team.

We have a number of project boards, overseen by one master, everything-we’re-doing™ board called @Web team. It currently has 24 columns (or lists) which makes quickly navigating to the right list a little tricky at times.

So today I quickly wrote a hacky little Tampermonkey (Chrome) / Greasemonkey (Firefox) script to add background colours to certain lists.

For colours, I simply selected an at-random theme from Adobe Kuler.

It could be optimised but it does what I need to without too much of a performance hit, and already I’ve found it really helpful to immediately identify the “in progress”, “this week” and “done” columns, as well as marking our project backlog columns.

// ==UserScript==
// @name Web team - Trello highlight lists
// @description Highlight certain columns in Trello.
// @include https://trello.com/b/YOUR-BOARD-URL
// @require https://code.jquery.com/jquery-1.11.0.min.js
// @version 2.1
// @copyright 2014, Gareth J M Saunders
// ==/UserScript==

$(document).ready(function() {

var black = '#393939',
brown = '#a39386',
green = '#a8C0aa',
red = '#a7585b',
white = '#fff';

$('body').hover(function() {
$("h2:contains('PROJECTS'), h2:contains('TEAM ADMIN')").css('color', black).parents('.list').css('background', brown);
$("h2:contains('IN PROGRESS')").css('color', black).parents('.list').css('background', green);
$("h2:contains('THIS')").css('color', white).parents('.list').css('background', red);
$("h2:contains('DONE')").css('color', white).parents('.list').css('background', black);
});
});

Please feel free to use it, adapt it, improve it, comment on this.

Obviously, change the ‘contains:’ keywords to find your own list headings, and the @include URL to that of your board.

Update

  • I noticed that I was trying to pull in the jQuery file under http rather than https, which was causing problems.
  • It turns out that the DOM loads long before the content, as there is some Ajax jiggery-pokery going on. So I’m using a hover event on the body to force the colours to change, which is a horrible hack but works, and does also pick up new lists created with these keywords.
  • 2014-12-08 I’ve discovered that rather than // @include https://trello.com/b/YOUR-BOARD-URL, I can use // @match //trello.com/* which will then work across all my Trello boards and follows the protocol of the board being viewed (which seems to always be https:// for me).

To do

  1. Use arrays and or variables to store common colours.
  2. Improve the event handling to determine the best way to load the script.
  3. Reduce duplication with regards to identifying the column (h2:contains gets repeated a lot) and adding the CSS rules.

Related topics

Share this story


22 thoughts on "Coloured lists in Trello"

  • Kyle Quinlan
    Saturday 8 March 2014, 9.33pm

    Hey Gareth. I'm looking to partner up with people that have more web skills than me. I'm able to create basic websites but I would love to team up with people that have more knowledge in this area. You seem to be one of them =) Anyways I would love to connect with you or anyone on your team at some point. Maybe we can find a way to put our heads together and create something great. Just a thought - Kyle

    Reply
  • drscannell
    Monday 14 July 2014, 5.00pm

    Handy script, thanks. I think the hover hack is clever. It looks like Wordpress Smart-quoted all of your quotes though.

    Reply
  • Gareth J M Saunders
    Monday 14 July 2014, 9.48pm

    Thanks. Well spotted on the smart-quotes. I've now wrapped the code in <code> tags which seems to have fixed it.

    Reply
  • Malik Oxford
    Tuesday 21 October 2014, 10.07am

    This is an awesome script. Is this purely client-side? If I change the colors of the lists will other members of the Trello Project see those colors?

    Reply
    • Gareth J M Saunders
      Wednesday 22 October 2014, 2.53pm

      Hi Malik, this is purely client-side per user so other members of the Trello project would not automatically see the colours unless they also installed Tampermonkey (or similar) and added your custom script. It would be great if Trello could build-in custom colours for columns.

      Reply
      • khish
        khish
        Wednesday 31 May 2017, 5.15am

        is it working still now? 2017.05.31

        Reply
  • Callum
    Monday 8 December 2014, 4.45pm

    Thanks for sharing. Really useful scripts. Trying to figure out if I want to deploy them across all my browsers, or stick with boring list background colours. :-) Would a protocol relative url work for your includes? Would be neater than always defaulting to SSL I reckon, SSL assets are not always as cacheable, come with a little CPU overhead, and so on.

    Reply
  • Gareth J M Saunders
    Monday 8 December 2014, 6.27pm

    I discovered the other day that if I replaced @include with @match //trello.com/* then I could create a generic script that would work across all my Trello boards. Thanks Callum, you'll notice that I've removed the protocol from that example above. I'll update my post accordingly. Something else that I'd like to do is remove the duplication in my code (the h2:contains, and adding the CSS rules). I could do this more efficiently. But it works as it is.

    Reply
  • billmondei
    Friday 29 May 2015, 8.18pm

    Needed to replace all the ‘ and ′ quote characters with the standard ' and also the ” and “ with the standard ". After that - worked like a charm! Thank you!

    Reply
  • Chris
    Chris
    Thursday 24 December 2015, 6.45am

    Not working...

    Reply
    • Gareth J M Saunders
      Thursday 24 December 2015, 12.50pm

      Try again -- the code tags that I wrapped around the JavaScript got moved (or something), not sure why. So all the quotes were changed to smart, curly quotes. It works now.

      Reply
  • Steve
    Steve
    Tuesday 5 January 2016, 12.28pm

    Hi Gareth. This has been a brilliant add-on to Trello...which now rules my life so well!! I've taken it a step further to incorporate expanding the labels so you can see the text. I also increased the number of card titles to include the cards from other boards, because although a board is specified in the Userscript it applies the css across all boards, so now all my boards and lists are styled. Code is pasted below with the updates...hope it shows properly! $(document).ready(function () { var black = '#393939', brown = '#a39386', green = '#a8C0aa', red = '#a7585b', yellow = '#F4C13F', dgrey = '#606060', white = '#fff'; $('body').hover(function () { $('.list-wrapper').css('width', 255); // makes the lists fit properly on my screen! $('.list-card-labels').css({'height':'16px', 'line-height':'normal', 'padding':'1px 0', 'width':'auto !important'}) $('.card-label').css({'padding':'1px 3px', 'line-height':'normal', 'height':'15px', 'width':'auto', 'font-size':'0.8em', 'text-shadow':'none'}) $('h2:contains(\'To Do\')').css('color', black).parents('.list').css('background', brown); $('h2:contains(\'Doing\')').css('color', black).parents('.list').css('background', green); $('h2:contains(\'Approval\')').css('color', white).parents('.list').css('background', yellow); $('h2:contains(\'URGENT\')').css('color', white).parents('.list').css('background', red); $('h2:contains(\'Done\')').css('color', 'grey').parents('.list').css('background', white); $('h2:contains(\'Management\')').css('color', white).parents('.list').css('background', black); $('h2:contains(\'Monitoring\')').css('color', white).parents('.list').css('background', dgrey); $('h2:contains(\'Development\')').css('color', black).parents('.list').css('background', green); $('h2:contains(\'Stack\')').css('color', black).parents('.list').css('background', yellow); }); });

    Reply
    • Steve
      Steve
      Tuesday 5 January 2016, 12.29pm

      Forgot to say that it also includes adjusting the list width so that they fit nicely across my screen!

      Reply
  • David Fonseca
    David Fonseca
    Wednesday 21 September 2016, 11.44pm

    Hey this is worikng! Thanks a lot! The css(‘color’, white) when the background color is darker is not working, I don't know why, what can I do to fix it?

    Reply
  • playtcubed
    playtcubed
    Monday 27 February 2017, 2.13am

    If the code is not working for you then add the following: // @include http://trello.com/* // @include https://trello.com/*

    Reply
  • playtcubed
    playtcubed
    Monday 27 February 2017, 3.09am

    If you'd like transparent dark grey lists with white header and footer text, here you go. This applies a single color to all lists and all boards. Enjoy!!! // ==UserScript== // @name Web team - Trello highlight lists // @description Highlight certain columns in Trello. // @include http://trello.com/* // @include https://trello.com/* // @require https://code.jquery.com/jquery-1.11.0.min.js // @version 2.1 // @copyright 2014, Gareth J M Saunders // @copyright 2017 Chris Sprague, tCubed // ==/UserScript== //Uncomment to test if script is working on your board //alert("I am an alert box!"); $(document).ready(function() { var white = '#fff', white2 = '#f5f5f5', trans = 'rgba(89, 89, 90, 0.75)'; //use for transparent color bg $('body').hover(function() { $("textarea").css('color',white);//header text color $('.list').css('background', trans);//transparent list color $('.open-card-composer.js-open-card-composer').css('color',white2);//text color for adding cards }); });

    Reply
  • Adam Taylor
    Adam Taylor
    Sunday 9 July 2017, 3.17am

    @include /^https?://trello\.com/?.*$/ will catch all your boards best

    Reply
  • Emre
    Friday 13 October 2017, 11.38am

    Hi, very old post, but I'd like to tell that I can't make this work, tampermonkey shows errors on several lines (not a coder myself). What I'd like to know is, how do you oversee many boards in one master board? Can you give me some tips about your way if you don't mind ofc?

    Reply
    • Gareth J M Saunders
      Friday 13 October 2017, 6.54pm

      My latest code can be found on my GitHub account, in the Trello coloured lists repo. I hope that helps.

      Reply
      • Emre
        Saturday 14 October 2017, 9.29am

        Thank you Gareth, I managed to get it working. Any ideas on making list titles white? If <> does that, it doesn't seem to work in my case.

        Reply
  • Gareth J M Saunders
    Saturday 4 November 2017, 1.50am

    I have updated the script further. It's had a little bit of a rewrite. I've tidied up the code a little, made the list titles it's searching for case-insensitive, so you don't now have to create separate rules for "Done", "DONE" or "done", for instance.

    Reply
    • Emre
      Wednesday 8 November 2017, 6.08am

      Perfect!!! Thanks for sharing this with us.

      Reply

Leave a reply

By using this form you agree with the storage and handling of your data by this website.