Show Trello Card Numbers with CSS

I use Trello a lot, and so do some of my clients

If we are using a ticket plataform like Jira/Bitbucket, its easy to integrate with Trello and mention their ticket numbers.

But some clients use Trello exclusively, and so, instead of referring to “trello.com/c/cafx4wpT” I prefer to use the internal card number.

Here’s how they look:

trellocardnumbers

The code is simple: ( Gist code )

.list-card-title span {
   background-color: rgb(0, 174, 204);
   border-radius: 6px;
   color: rgb(255, 255, 255);
   display: inline-block;
   margin-right: 10px;
   min-width: 32px;
   padding: 5px;
   text-align: center;
}

It aligns with the labels:

website-trello-2017feb3_12-23-32

Just add the code to your favorite CSS injector extension.

Enjoy!

PS: I use an old chrome plugin to insert styles to several websites. While it works flawlessly, I can’t recommend it anymore due to security bugs with their social integration.

Advertisements

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