What is Trello Cards Optimizer?

Trello Cards Optimizer is a Chrome extension developed by https://trellocards.com, and its main feature is "Automatic card frontside formatting and coloring based on title and labels".

Extension Screenshots

Download Trello Cards Optimizer Extension CRX File

Download Trello Cards Optimizer extension files in crx format, manually install Chrome extensions in the browser, or share the crx files with friends to easily install Chrome extensions.

Extension Usage Instructions

Trello's Swiss Army Knife!
The Trello Cards Optimizer Chrome extension allows you to creater richer boards. Check it out on http://trellocards.com.
It supports automatic card frontside coloring and formatting based on labels and title markup, where you can use tags for a main title, subtitle, priority, starring and coloring.
TCO also supports markdown for tables in card backside description, and even in the comments, as well as code syntax highlighting.
And what about copy and paste formatted text from Microsoft Word, Excel, Outlook, Google Mail. Documents and Spreadsheets or web snippets!
Combined with productivity features like removing of the Add New List column, clickable hyperlinks in titles, collapsing lists without cards and much more, it's an indispensable Trello enhancement.

TCO can be combined with scrum extensions like Plus For Trello etc (for which it has special support to wait after Plus has processed cards).
All features can be turned on and off in the Extension Options dialog.
Trello Cards Optimizer settings can be overruled per board.

==== Plus for Trello support ====
The extension is optimized to be combined with the Plus for Trello extension.
Cards for which a Plus for Trello timer is running can be highlighted, and the extension won't interfere with title Plus for Trello's title formatting.
You also have the option to hide the Plus for Trello estimate/spend comments.

==== Lists ====
• Collapsing empty lists:
If enabled, every empty list is collapsed vertically to remove empty space.

• Resize columns to fit screen width:
If enabled, the extension adjusts the list (and cards) width for optimum screen usage.

• Sort cards in list:
If enabled, cards in a list are sorted based on exclamation priority and importance of due date (overdue, today, soon, future and completed or no date), main title name and title.
Exclamation priority is ignored if due date is completed.
You can exclude one or more listnames for sorting.

• Group cards in list based on main title:
If you enable sorting, you can also group cards based on main title (|).
If there is more than 1 card with the same main title in a list, the cards will be grouped and placed at the sort position of the most important one.
Single cards with a main title are treated just like normal cards.

• Color the background of lists:
You can enter background colors or even full css styles per list name.

==== Card backside ====
• Width of back of card:
You can set the width of the back of the card in the options.
Leave out the width to use Trello's default.

• Text coloring in description and comments:
creates red text. You can only use html color names.

• Table markdown in description and comments:
TCO also supports markdown support for tables in card backside description, and even in the comments!
To create a table, always start lines with a | (pipe) and include a header, a separator with column defitions with minimum three dashes per column, and a minimum of 1 row below the separator row (or 2 rows in case of a 2 columns table).
The total number of columns is set based upon the number of | --- | separator row.

You can control table width, column alignment, text wrap and column spanning, and you can use multiple lines in a table header or cell.
Table markdown is explained in Trello's Formatting Help, just click that button and scroll down!

• Copy/paste tables in description and comments:
If you have a table as text formatted with tabs (like you get when you copy rows from an Excel table) the table markdown is automatically formatted on paste!

• Tab support in description and comment editing:
You can use the tab key during editing, which will automatically insert 4 spaces.
The left and right arrow as well as backspace keys detect 4 spaces as a tab and jump over it.
You can also select a block of text and use the tab key to indent it or shift-tab to remove indentation.

• Syntax highlighting in ``` code blocks in description and comments:
You can tell TCO to use syntax highlighting for code blocks enclosed by ```.
To use it, specify the code language on the first line followed by a colon:, like this:
```
html:
... your code here ...
```

After the colon you can use the options 'linenumbers' and or 'wraptext'.
So to use syntax highlighting for sql with linenumbers and wrapped lines, use:
```
sql:linenumbers,wraptext
... your code here ...
```

The following language codes are available:
asp, c, c#, c++, css, cssless, html, htmlmixed, htmlphp, java, javascript, json, jsp, mariadb, mssql, mysql, objectivec, pearl, pgsql, php, plainhtml, plsql, python, ruby, sql, typescript, vb, xcss, xml.

Explanation of the syntax highlighting is just as with the table markdown included in Trello's Formatting Help, just click that button and scroll down!

==== Card frontsides =====
• Label background coloring:
If enabled, the background color of the card backside will automatically be set to a percentage of the first label color.

• Card numbers per board:
Trello's card numbers can be shown on the top-left of the cards.

• Separator cards:
You can define a small or large separator card by starting the title with > or >>.

• Coloring cards:
You can set the background color of the card by entering c:colorname or c:00FFAA (for example) in the title.
This overrules the label background coloring.

• Title markup:
***** Usage of markup tags in card title: *****
The following markup codes can be used in a card title:

"|" or "||" marks the end of a main title, which is shown in bold before or above the rest of the title
">" in the first part of the title creates a centered layout (used for seperators)
">>" in the first part of the title also creates a centered layout, but with bigger font-size.
"[between brackets]" marks a subtitle, which is shown underneath the title

"?" in the title creates a blue question icon before the title (color will be gray if card has a completed deadline)
"!", "!!" or "!!!" marks priorities, showing an alert icon and a colored border on the left of the card
" *4" (or other digits) marks a number of stars, displaying a star icon with the number next to it. The * must be preceeded with a space.
" #tagname" is considered to be a tag, printed italic and colored blue. The # must be preceeded with a space. (if Plus for Trello is installed, #tagname will be hidden!)
" c:pink" sets the background of the card to pink. You can also use c:#ff0000 or just c:ff0000. The c: must be preceeded with a space.

"*text*" creates italic text
"**text**" creates bold text
"~~text~~" creates striked out text
"`text`" creates code text
"" creates red text. You can only use html color names.
"\n" creates a new line.

Extension Basic Information

Name	Trello Cards Optimizer
ID	ipbjjbpopodbnjbjnneakhcppdocpelg
Official URL	https://chromewebstore.google.com/detail/trello-cards-optimizer/ipbjjbpopodbnjbjnneakhcppdocpelg
Description	Automatic card frontside formatting and coloring based on title and labels
File Size	431 KB
Installation Count	9,915
Current Version	3.62
Last Updated	2021-07-26
Publish Date	2020-03-29
Rating	4.32/5 Total 63 Ratings
Developer	https://trellocards.com
Email	[email protected]
Payment Type	free
Extension Website	http://trellocards.com
Help Page URL	http://trellocards.com
Supported Languages	en
manifest.json
{ "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx", "manifest_version": 2, "name": "Trello Cards Optimizer", "short_name": "TrelloCardsOptimizer", "homepage_url": "http:\/\/trellocards.com", "version": "3.62", "description": "Automatic card frontside formatting and coloring based on title and labels", "background": { "scripts": [ "background.js" ], "persistent": false }, "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" }, "content_scripts": [ { "matches": [ "https:\/\/trello.com\/" ], "js": [ "jquery-2.2.4.min.js", "fontawesome.js", "content.js", "optionpopup.js", "codemirror\/codemirror.js", "codemirror\/multiplex.js", "codemirror\/javascript.js", "codemirror\/clike.js", "codemirror\/css.js", "codemirror\/perl.js", "codemirror\/php.js", "codemirror\/python.js", "codemirror\/ruby.js", "codemirror\/sql.js", "codemirror\/vb.js", "codemirror\/vbscript.js", "codemirror\/xml.js", "codemirror\/htmlembedded.js", "codemirror\/htmlmixed.js" ], "css": [ "font-awesome-animation.min.css", "tco.css", "codemirror\/codemirror.css" ] } ], "permissions": [ ":\/\/trello.com\/", "storage" ], "web_accessible_resources": [ "images\/", "tcohelp.html", "optionpopup.html", "optionpopup.js", "changelog.txt", "changelogpopup.html", "TCOpublic.html", "logoicon.png" ], "browser_action": { "default_icon": { "16": "logoicon.png" }, "default_title": "Trello Cards Optimizer\nClick to go to the TCO website\n", "default_popup": "TCOpublic.html" }, "options_ui": { "page": "options.html", "open_in_tab": false } }