Coloured lists in Trello

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.
Advertisements

19 thoughts on “Coloured lists in Trello

  1. 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

  2. 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.

  3. 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.

  4. 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!

  5. 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);
    });
    });

  6. 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?

  7. 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
    });
    });

  8. 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?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s