Trello: show label names on the front of cards

readme.md

Show labels on the front of Trello cards:

To set it up:

1. Install a Chrome Extension like Stylebot which lets you add CSS to a website.
2. Add the CSS from style.css (below) to the Chrome extension.
3. In Stylebot, after it's installed:
4. Right-click on the background in Trello, choose StyleBot > Style Element
5. At the bottom of the pane that opens on the right side of the page, choose Edit CSS
6. Paste in the CSS from style.css
7. Enjoy!

Thanks to Hamid, head of the mobile team at Trello, for the CSS!

style.css

.list-card-labels .card-label {
    line-height: 16px;
    height: auto;
    padding: 0 4px;
    width: auto;
    font-size: 9px;
    font-weight: normal;
    text-shadow: 0px 0px 0px #000;
    margin: 0;
}

Trello_show_label_names_on_the_front_of_cards.user.js

// ==UserScript==
// @name         Trello: show label names on the front of cards
// @namespace    https://gist.github.com/sdecima/
// @version      0.2
// @description  Show label names on the front of cards
// @author       Sebastian Decima <sdecima@gmail.com>
// @match        https://trello.com/*
// @include      https://trello.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var css = [
    ".list-card-labels .card-label {",
    "    line-height: 16px;",
	"    height: auto;",
	"    padding: 0 8px;",
	"    width: auto;",
    "    font-size: 12px;",
    "    font-weight: normal;",
//    "    text-shadow: 0px 0px 0px #000;",
    "    margin: 0 4px 0 0;",
    "}",
    ".card-composer .card-label {",
    "    width: 42px;",
    "    height: 8px;",
    "}"
].join("\n");
if (typeof GM_addStyle != "undefined") {
	GM_addStyle(css);
} else if (typeof PRO_addStyle != "undefined") {
	PRO_addStyle(css);
} else if (typeof addStyle != "undefined") {
	addStyle(css);
} else {
	var node = document.createElement("style");
	node.type = "text/css";
	node.appendChild(document.createTextNode(css));
	var heads = document.getElementsByTagName("head");
	if (heads.length > 0) {
		heads[0].appendChild(node);
	} else {
		// no head yet, stick it whereever
		document.documentElement.appendChild(node);
	}
}
})();