Trello – Hiding all the little icons on Trello cards in the main view

trello

I love the clean and simple look of Trello's main view where I could see all the lists and cards clearly on a board. As I have been getting more deeply into Trello, each of my cards has a bunch of little icons for stuff like checklist, comments, subscribe, etc.
The main view of my board is looking more and more cluttered!

Is there any way to go into settings and hide those icons for that view?

Best Answer

You can do it if you get your hands a bit dirty and are willing to do something to modify the way the page renders.

Trello uses jQuery so a little bit of quick code can do the trick, either running $('div.badges').hide(); once all the cards have loaded, or modify the page's CSS:

$("<style type='text/css'> .badges{ display: none;} </style>").appendTo("head");

Actually using this information is another matter.

The following userscript will work if the Tampermonkey browser extension is installed:

// ==UserScript==
// @name         Hide Badges in Trello
// @version      0.1
// @description  Remove the badges attached to icons
// @match        https://trello.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Modify the stylesheet to automatically hide the badges
    $("<style type='text/css'> .badges{ display: none;} </style>").appendTo("head");
    // Could also hide loaded badges, but these are loaded via AJAX
    // $('div.badges').hide();
})();

A Chrome browser extension is also an option.

Bear in mind that this will hide all the contextual indicators of descriptions, people, etc., that are part of how Trello marks up its cards.

Related Topic