Colored List in Trello

What is Trello??

Trello is a project management tool that makes team collaboration easier and it's free!!

Check out Trello at https://trello.com/

Although it's free, there is some limitation in Trello and one of them is we can't change the list color.

After googling a little bit, I found out that we can modify our Trello board by using CSS Injector browser extension. I personally use a Chrome extension called "CSS and Javascript Injection"

To add Chrome Extension, click the three dots icon on the right top of your Chrome, select More tools | Extensions - select Get more extensions, then select the extension that you'd like to use.

If you use the same extension as me, then a syringe icon will be displayed on the right top of your Chrome, simply click the icon and a css and js editor will be displayed.

Add the css below to the css editor to change the color of the list title and display stickers in background so that cards with sticker don't take a lot of space on the board.

.list-header-num-cards {
    color: rgba(255,255,255,0.6);
    font-size: 12px;
}

/* Colorize the headers of each column. Add more as needed. */
.js-list:nth-child(2) .js-list-header {
    background: rgb(230,0,0);
}

.js-list:nth-child(3) .js-list-header {
    background: rgb(264,204,95);
}

.js-list:nth-child(4) .js-list-header {
    background: rgb(100,200,210);
}

/* Set list to background*/
.sticker .sticker-remove-image{
    z-index: -0.5; 
}

/* Use a different background color for cards with sticker 
and set the top margin to 0 because we want to display the Sticker in the background */
.list-card.is-stickered .list-card-details  {
    margin-top: 0;
    background-color:rgba(255,229,204, 0.5)
}

.list-card.is-stickered .list-card-details:hover  {
    margin-top: 0;
    background-color:rgba(255,229,204, 0.5)
}

The result:

Trello Coloured List