To customize the visual aesthetic of your Rich Editor tables, you can add a variety of theme variables to your Style Guide.
In this article, we'll examine several of the most common table variables, which will likely be sufficient for your needs. However, if you want to dive a little deeper, you can find the complete list of table variables in the User Content > User Content - Tables section of this article.
How to add variables to your Style Guide
When editing one of your Style Guides, use the Advanced Settings panel to display a JSON variable editor.
📝 NOTE: Using theme variables requires an understanding of basic CSS and JSON formatting.
The Advanced Settings panel
While editing a Style Guide, click Advanced Settings in the right panel to display the variables panel.
The content in this panel will depend on the settings you've already changed in what we'll call the "visual editor," and will automatically be updated in both places whenever a change is made.
This is where you can add the table variables discussed in this article.
Preset table styles
You can choose from four preset table styles. To configure your preferred table style, use the following variable:
Horizonal border
"userContent.tables.style": "horizontalBorder"
Horizonal border striped
"userContent.tables.style": "horizontalBorderStriped"
Vertical border
"userContent.tables.style": "verticalBorder"
Vertical border striped
"userContent.tables.style": "verticalBorderStriped"
Stripe colors
When using a striped style, the first row will match your Style Guide's background color, and you can configure the stripe color via:
userContent.tables.stripeColor
Example
"userContent.tables.stripeColor": "#EBF8FF"
Borders
There are several variables to control the look of table borders:
- The
userContent.tables.borders set of variables control all borders - The
userContent.tables.horizontalBorders.borders set of variables target horizontal borders - The
userContent.tables.verticalBorders.borders set of variables target vertical borders
Border color
To change the border color, use:
userContent.tables.borders.color
Example
"userContent.tables.borders.color": "#000000"
Border styles
You can choose from eight table border styles. To configure your preferred border style, use the following variable:
userContent.tables.verticalBorders.borders.style
Options:
- dashed
- dotted
- double
- groove
- inset
- outset
- ridge
- solid
To remove borders altogether, use:
"userContent.tables.borders.style": "none""userContent.tables.borders.style": "hidden"
