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 “” I prefer to use the internal card number.

Here’s how they look:


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:


Just add the code to your favorite CSS injector extension.


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.


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s