How to highlight due dates in the card's front.

[Dik Liu]

Can I highlight the due dates when I see the board with all the cards? Now, the due dates only change color when they are near (yellow) or past the due date (pink). I want to highlight the due dates so they are easier to see and identify. Thanks.

[Dreamsuite Mike]

Hi @Dik Liu 

If you aren't experienced with CSS and web technology, I recommend looking at Amazing Fields power-up, which opens up a lot of flexibility for display an colour.

The other simple solution to bring attention to a card based on date is to add a coloured label to it triggered by time before a due date,

"Two days before a card is due, add the blue "Coming Soon" label to the card"

[Dik Liu]

Thanks. I looked at Amazing Fields, and it looks great. I have tried the label solution with automation such as:

When a due date less than 14 days from now is set on a card, move the card to the bottom of list "To do", sort the list "To Do" by due date ascending, add the lime "In two weeks" label to the card, remove the yellow "In one week" label from the card, and remove the red "In three days" label from the card.

When a due date less than 7 days from now is move on a card, Move the card to the bottom of list "Doing", sort the list "Doing" by due date ascending, add the yellow "In one week" label to the card, remove the lime "In two weeks" label from the card, and remove the red "In three days" label from the card. 

I must be doing something wrong as the automation was behaving erratically. So, I am thinking of adding a Custom Field set to the value "In two weeks", "In one week", and in three days, etc., and using the automation that way.

[Danny]

Hello @Dik Liu

There is not a native solution that Trello offers to do this as far as I can see though you could use a CSS injection web browser extension and alter the font colour and style for due date text on the cards. 

I tested this and here are the summary points to follow:

1. Install a CSS injector from your web browser's extension store. It should be free.
2. go to your Trello board.
3. Inspect the test element you want to alter.
4. change the CSS you want to change and copy the altered CSS once you are happy with it. 
5. Add the copied CSS to the CSS injector and the JS path. 
6. Save your changes. Reload the page the to test. 
7. If it works for all cards, great. If not, then try again. 

Hope this helps,

Danny