Automatic card frontside formatting and coloring based on title and labels
Trello Cards Optimizer Extension
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:
• 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 a new line.
Source Manifest.json
How to download and manually install Trello Cards Optimizer extension for Chrome
Looking for a way to install Trello Cards Optimizer extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.
However, you may need to install Trello Cards Optimizer extensions manually, this article outlines two simple methods to effortlessly install Trello Cards Optimizer extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.
Method 1: Download Trello Cards Optimizer extension and manually install through Drag &Drop
If you ever need to manually install a Trello Cards Optimizer extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.
Step 1: Download the Trello Cards Optimizer Extension by clicking the "Download CRX" button on the website.
Look for the Trello Cards Optimizer extension you wish to install. Go to the website and download the Trello Cards Optimizer extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for Trello Cards Optimizer extension that contains all the data.
Step 2: Extract &Arrange Files
Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.
Step 3: Go to the Chrome Extensions Page
Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.
Step 4: Drag and Drop the Extension
Now, go to the folder where you extracted the Trello Cards Optimizer extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.
Step 5: Complete the Installation
Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.
Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.
Method 2: Download Trello Cards Optimizer extension for Chrome and install in Developer Mode
This is another method to install Trello Cards Optimizer extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.
Step 1: Download the Trello Cards Optimizer extension file
Select and download the Trello Cards Optimizer extension by clicking the 'Download CRX' button on the website.
Step 2: Extract the downloaded contents
Convert the file to a ZIP file if it is in CRX format then extract the Trello Cards Optimizer extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your Trello Cards Optimizer extension running.
Step 3: Open Chrome Extension Setting Page
In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.
Step 4: Enable Developer Mode
After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.
Step 5: Load the Unpacked Extension
Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."
Step 6: Select the Extension Folder
Once the pop-up opens upon clicking Load unpacked, select the Trello Cards Optimizer extension directory and click on the "Select Folder "button.
Step 7: Confirm and Install
After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.
Conclusion
Here we've made a step-by-step guide on How to manually install Trello Cards Optimizer extension in 2 ways. We hope this guide proves helpful.
Similar Extensions

Trello List Resizer 8,000+ 2 ★ 3.15KiB
Card Colors for Trello 8,000+ 104 ★ 37.98KiB
Trello Grids 8,000+ 14 ★ 26.18KiB
TrelloX 8,000+ 4 ★ 149KiB
Trello Pluso 8,000+ 8 ★ 735KiB
Visual Enhancements for Trello 8,000+ 3 ★ 14.22KiB
Background Colors Cards for Trello 8,000+ 5 ★ 50.04KiB
Trello Boosted Boards 8,000+ 21 ★ 479KiB
Trello To-do Notes 8,000+ 11 ★ 109KiB
Trello Folds (Kanban for Trello) 8,000+ 33 ★ 83.1KiB
Trello Card Colors 8,000+ 13 ★ 8.37KiB
[DEPRECATED] List Layouts for Trello 8,000+ 191 ★ 10.65KiB
Strelloids - Trello on steroids 8,000+ 17 ★ 108KiB
Trello Table Markdown 8,000+ 2 ★ 255KiB
List Highlighter for Trello 8,000+ 49 ★ 114KiB
Collapsible Trello Lists 8,000+ 63 ★ 13.57KiB
Trello Compact Mode 8,000+ 10 ★ 3.86KiB
Trellists: Trello Lists Master 8,000+ 123 ★ 549KiB
Card Color Titles for Trello 8,000+ 149 ★ 3.26KiB
Trello Birds-eye 8,000+ 38 ★ 2.24MiB
FlexyTrello 8,000+ 47 ★ 103KiB
GTD: Trello Card Links 8,000+ 28 ★ 47.28KiB
Planyway for Trello: Calendar, Timeline, Time Tracking and Reports 8,000+ 550 ★ 10.83MiB
Slim Lists for Trello 8,000+ 60 ★ 11.01KiB
User reviews
Martin Price (ID: 0000005d60c6796e) Voted 1 ★ - Updated 05/17/2023
Arq. Fabio Formighieri (ID: 000000d1f727f0ad) Voted 5 ★ - Updated 12/04/2022
Junior Colson (ID: 0000007d25d0f86f) Voted 1 ★ - Updated 10/05/2022
Tobias Schürer (ID: 000000b1ffdc7822) Voted 4 ★ - Updated 09/27/2022
Orlando Perrone (ID: 00000030652bdcdf) Voted 3 ★ - Updated 09/26/2022