Last Updated: April 12, 2016
· szymonkor

Trello hacking with custom CSS

I am the great fan of Stylebot. It is a Google Chrome extension (I am fan of browser's extensions too) that enables CSS edition on every web page. When I don't like some features, I can always easily get rid of them with a few lines of CSS.

My hacks for Trello, the popular kanban board software:

Hide small description badge under the card title.

.badge.is-icon-only {
    display: none;

Resize card title font

a.list-card-title.js-card-name {
    font-size: 13px;
    line-height: 16px;

Resize list width to adjust it to my laptop.

div.js-list.list-wrapper {
    margin-right: 1px;
    width: 212px;

Make labels stick to the top border of the card

div.list-card-details {
    overflow: hidden;
    padding: 6px;
    padding-bottom: 1px;

div.list-card-labels {
    margin-left: -7px;
    margin-top: -7px;
    width: 195px;

span.card-label {
    height: 6px;
    margin-top: 0px;
    width: 100%;