Coloured 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
Use arrays and or variables to store common colours.- Improve the event handling to determine the best way to load the script.
- Reduce duplication with regards to identifying the column (h2:contains gets repeated a lot) and adding the CSS rules.
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
Handy script, thanks. I think the hover hack is clever. It looks like Wordpress Smart-quoted all of your quotes though.
Thanks. Well spotted on the smart-quotes. I've now wrapped the code in <code> tags which seems to have fixed it.
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?
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.
is it working still now? 2017.05.31
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.
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.
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!
Not working...
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.
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); }); });
Forgot to say that it also includes adjusting the list width so that they fit nicely across my screen!
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?
If the code is not working for you then add the following: // @include http://trello.com/* // @include https://trello.com/*
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 }); });
@include /^https?://trello\.com/?.*$/ will catch all your boards best
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?
My latest code can be found on my GitHub account, in the Trello coloured lists repo. I hope that helps.
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.
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.
Perfect!!! Thanks for sharing this with us.