Rich Editor 2 - Table Formatting - HL Vanilla Community
<main> <article class="userContent"> <p>To customize the visual aesthetic of your Rich Editor 2 tables, you can add a variety of <strong>theme variables </strong>to your <strong>Style Guide</strong>.</p><p>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 <strong>User Content > User Content - Tables</strong> section of <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#usercontent" rel="nofollow noreferrer ugc">this article</a>.</p><h2 data-id="how-to-add-variables-to-your-style-guide">How to add variables to your Style Guide</h2><p>When editing one of your Style Guides, use the <strong>Advanced Settings </strong>panel to display a JSON variable editor. </p><p><strong>📝 NOTE</strong>: Using theme variables requires an understanding of basic CSS and JSON formatting. </p><h3 data-id="the-advanced-settings-panel">The Advanced Settings panel</h3><p>While editing a Style Guide, click <strong>Advanced Settings</strong> in the right panel to display the variables panel. </p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/F2QV0OTI8QND/advncdsettings-button.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/F2QV0OTI8QND/advncdsettings-button.png" alt="AdvncdSettings button.png" height="451" width="393" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <p>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.</p><p>This is where you can add the table variables discussed in this article.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/ZXGH8KNXUTWQ/advncdsettings-open.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/ZXGH8KNXUTWQ/advncdsettings-open.png" alt="AdvncdSettings open.png" height="365" width="727" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="preset-table-styles">Preset table styles</h2><p>You can choose from <strong>four preset table styles</strong>. To configure your preferred table style, use the following variable:</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">userContent.tables.style</code></li></ul><h3 data-id="horizonal-border">Horizonal border</h3><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">"userContent.tables.style": "horizontalBorder"</code></li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/FC23977MN8GW/screen-shot-2023-02-07-at-14-39-30.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/FC23977MN8GW/screen-shot-2023-02-07-at-14-39-30.png" alt="Screen Shot 2023-02-07 at 14.39.30.png" height="706" width="1554" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="horizonal-border-striped">Horizonal border striped</h3><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">"userContent.tables.style": "horizontalBorderStriped"</code></li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/VHRUHP10CCCA/screen-shot-2023-02-07-at-14-41-31.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/VHRUHP10CCCA/screen-shot-2023-02-07-at-14-41-31.png" alt="Screen Shot 2023-02-07 at 14.41.31.png" height="672" width="1524" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="vertical-border">Vertical border</h3><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">"userContent.tables.style": "verticalBorder"</code></li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/EWEWVBL0TZ54/screen-shot-2023-02-07-at-14-42-36.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/EWEWVBL0TZ54/screen-shot-2023-02-07-at-14-42-36.png" alt="Screen Shot 2023-02-07 at 14.42.36.png" height="684" width="1514" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="vertical-border-striped">Vertical border striped</h3><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">"userContent.tables.style": "verticalBorderStriped"</code></li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/D1TYBL6EDT5S/screen-shot-2023-02-07-at-14-43-25.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/D1TYBL6EDT5S/screen-shot-2023-02-07-at-14-43-25.png" alt="Screen Shot 2023-02-07 at 14.43.25.png" height="690" width="1524" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="stripe-colors">Stripe colors</h2><p>When using a <strong>striped style</strong>, the <em>first row</em> will match your Style Guide's <em>background color</em>, and you can configure the stripe color via: </p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">userContent.tables.stripeColor</code></li></ul><h4 data-id="example"><strong>Example</strong></h4><p><code class="code codeInline" spellcheck="false" tabindex="0"> "userContent.tables.stripeColor": "#EBF8FF"</code></p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/P7GA58N8RZO7/screen-shot-2023-02-08-at-14-37-48.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/P7GA58N8RZO7/screen-shot-2023-02-08-at-14-37-48.png" alt="Screen Shot 2023-02-08 at 14.37.48.png" height="694" width="1714" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="borders">Borders</h2><p>There are several variables to control the look of table borders:</p><ul><li>The<code class="code codeInline" spellcheck="false" tabindex="0"> userContent.tables.borders</code> set of variables control <strong>all<em> </em>borders</strong></li><li>The<strong> </strong><code class="code codeInline" spellcheck="false" tabindex="0">userContent.tables.horizontalBorders.borders</code> set of variables target <strong>horizontal borders</strong></li><li>The <code class="code codeInline" spellcheck="false" tabindex="0">userContent.tables.verticalBorders.borders</code><strong> </strong>set of variables target <strong>vertical borders</strong></li></ul><h3 data-id="border-color">Border color</h3><p>To change the border color, use:</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">userContent.tables.borders.color</code></li></ul><h4 data-id="example-1"><strong>Example</strong></h4><p><code class="code codeInline" spellcheck="false" tabindex="0">"userContent.tables.borders.color": "#000000"</code> </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/5GAUI6ZPL1WY/screen-shot-2023-02-09-at-11-01-19.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/5GAUI6ZPL1WY/screen-shot-2023-02-09-at-11-01-19.png" alt="Screen Shot 2023-02-09 at 11.01.19.png" height="706" width="1776" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="border-styles">Border styles</h3><p>You can choose from <strong>eight table border styles</strong>. To configure your preferred border style, use the following variable:</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">userContent.tables.verticalBorders.borders.style</code></li></ul><p>Options:</p><ul><li>dashed</li><li>dotted</li><li>double</li><li>groove</li><li>inset</li><li>outset</li><li>ridge </li><li>solid</li></ul><p>To remove borders altogether, use:</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">"userContent.tables.borders.style": "none"</code></li><li><code class="code codeInline" spellcheck="false" tabindex="0">"userContent.tables.borders.style": "hidden"</code></li></ul> </article> </main>