The Style Column

Same but different

Sometimes you want a card or a few cards in your component to be different to the layout template. There are two ways to achieve this:
  • Using the individual card editor inside Dextrous
  • The style column (usually used from Google Sheets).
Tip: Use this approach if you need to change something (like e.g. a zone's border, text or background color) on a card by card basis. If you want a whole different look for some cards, you're better off making a new layout instead of changing individual cards.

Tutorial

This tutorial shows you how to change the layout for individual cards/tokens/tiles within a component by using a special style column in the component editor.

Changing individual cards from Dextrous

To change properties of a single card right inside Dextrous, double-click on that card's preview from the Component Editor (in the card row above the table). Any changes will only be applied to the card you double-clicked.
Such card-specific changes to card zones are stored in the style column. See below for how to view and use it.

Viewing the style column

To see the style column for a particular zone in the table, click the little paint brush icon beside that column's title at the top:
That will open the style column for that zone.
Tip: If you're mostly working with the table, another way to open the card editor to edit an individual card is to click on the little icon in that card's row:

https://slite.com/api/files/7BNeWitMOvklK5/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoidTNXOFZvZ3VOTFVBVmUiLCJpYXQiOjE3NzEwNzg5NDIsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiU0pXRVVMeUFvVU9vdTYiLCJleHAiOjE3NzM2NzA5NDJ9.brNME6YCyDOMKQe9vjtGuQH9iEZhMC7yem-LixYsDqw

Populating the style column from Google Sheets

You can control individual cards' properties via the style column from Google Sheets. The name of the style column is [zone name] style. For example, if your column's title is "Card Effect", its style column's name will be "Card Effect style". Thus, you can create a style column in your Google Sheet for any zones you want to apply card-specific styling to.
If you don't know the property names and syntax to configure a property you want to control, here's an easy way to find out:
    Open the individual card editor for any card in Dextrous (as described above).
    Temporarily change the zone(s) as desired.
    Close the card editor.
    Open the style column for the zone(s) you changed (see above). It will now contain the property and value you need, which you can easily copy over to Google Sheets.
    (Revert the change you made to the individual card, or simply reload your CSV to override it again.)
As an example, to set the text color for a text zone, the style column for that particular card would contain:
{color:hsla(30, 70%, 30%, 1)}
This color takes precedence over the text color set for that zone in the card's original layout template.