Advanced Settings: Getting Started with Theme Variables - Vanilla Success
<main> <article class="userContent"> <h2 data-id="overview">Overview</h2><p>The "Advanced Settings" section of the theme editor brings a JSON variable editor and inline documentation for hundreds of variables that are not currently included in the visual user interface. </p><p>Using theme variables requires a fairly technical resource and an understanding of basic CSS and JSON formatting. </p><p>You can find documentation on specific theme variables here: </p><div class="js-embed embedResponsive" data-embedjson="{"body":"This document contains a reference to the various documented theming variables for use in the Theme Editor \"Advanced Settings\" variable pane.","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/370-theme-variable-reference","embedType":"link","name":"Theme Variable Reference - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/370-theme-variable-reference </a> </div><h3 data-id="the-advanced-variables-panel">The Advanced Variables Panel</h3><p>Open the variables panel by clicking on the new "Advanced Settings' button at the bottom of the theme editor. </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh6.googleusercontent.com/I6pfAECNAr2VsyoxeqAeoOkFSIQ5V49-VvWIAXKBatE2383Kd3FqcYkznKPMCO42gbWA58ZLcRUMcOTzY2FlQq_uRNj1y4s8JRiqMs0jb-rAYMxtJhF3xOwN7RgqL7GI1jHVTdMf" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh6.googleusercontent.com/I6pfAECNAr2VsyoxeqAeoOkFSIQ5V49-VvWIAXKBatE2383Kd3FqcYkznKPMCO42gbWA58ZLcRUMcOTzY2FlQq_uRNj1y4s8JRiqMs0jb-rAYMxtJhF3xOwN7RgqL7GI1jHVTdMf" alt="I6pfAECNAr2VsyoxeqAeoOkFSIQ5V49-VvWIAXKBatE2383Kd3FqcYkznKPMCO42gbWA58ZLcRUMcOTzY2FlQq_uRNj1y4s8JRiqMs0jb-rAYMxtJhF3xOwN7RgqL7GI1jHVTdMf" height="313" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>The content in this file will depend on the settings you have already changed from the defaults and will automatically be updated in both places whenever a change is made. </p><h2 data-id="previewing-theme-variables-changes">Previewing Theme Variables Changes</h2><p>Changes made in this new menu will sync back and forth between the visual editor and the advanced editor and when adding a theme variable in the menu you should see it immediately in the preview to the left: </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh3.googleusercontent.com/lod8SKy-xEN0ezF03ObwWQnJfFRz4yjVcNrbpA9-Ki3WorbUKS9uxSooxVDbtpcEl9ap345UPksHK_bdFJzkKxN3M1iMX7xrgmVai_vYkxiIlYD2tMYLWTmestZ5j4zhpaBIdhQZ" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh3.googleusercontent.com/lod8SKy-xEN0ezF03ObwWQnJfFRz4yjVcNrbpA9-Ki3WorbUKS9uxSooxVDbtpcEl9ap345UPksHK_bdFJzkKxN3M1iMX7xrgmVai_vYkxiIlYD2tMYLWTmestZ5j4zhpaBIdhQZ" alt="lod8SKy-xEN0ezF03ObwWQnJfFRz4yjVcNrbpA9-Ki3WorbUKS9uxSooxVDbtpcEl9ap345UPksHK_bdFJzkKxN3M1iMX7xrgmVai_vYkxiIlYD2tMYLWTmestZ5j4zhpaBIdhQZ" height="329" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><h2 data-id="inline-documentation">Inline Documentation</h2><p>Inline autocomplete and documentation has been added for the following sets of variables:</p><ul><li>banner</li><li>titleBar</li><li>userContent</li></ul><p>By typing any of these you should see the full set of documented variables for those components appear inline: </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh4.googleusercontent.com/_0U8RV6tdehWE8QwR2V_gMUNUHTpfAX_zEEDC9NbsWRmy2nsF-UkYZI7VodlCCsQJJzd5r66-Wyu8UI-0BWL7MYmFDIFi-2bquO5FDwcqVH5aWE69ivfV7agJfIngQzWeZmTWF32" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh4.googleusercontent.com/_0U8RV6tdehWE8QwR2V_gMUNUHTpfAX_zEEDC9NbsWRmy2nsF-UkYZI7VodlCCsQJJzd5r66-Wyu8UI-0BWL7MYmFDIFi-2bquO5FDwcqVH5aWE69ivfV7agJfIngQzWeZmTWF32" alt="_0U8RV6tdehWE8QwR2V_gMUNUHTpfAX_zEEDC9NbsWRmy2nsF-UkYZI7VodlCCsQJJzd5r66-Wyu8UI-0BWL7MYmFDIFi-2bquO5FDwcqVH5aWE69ivfV7agJfIngQzWeZmTWF32" height="155" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="updating-theme-variables-using-the-api"> Updating Theme Variables using the API </h2><p>For some use cases, it may make sense to have a technical resource update theme components using the API. All theme variables can be updated this way.</p><p>For more information, see that section of the API docs: </p><p><a href="https://success.vanillaforums.com/kb/articles/202-apiv2-reference-endpoints#/Theme%20Assets/get_themes__themeID__assets_variables" rel="nofollow noreferrer ugc">https://success.vanillaforums.com/kb/articles/202-apiv2-reference-endpoints#/Theme%20Assets/get_themes__themeID__assets_variables</a> </p><h2 data-id="using-theme-variables-with-file-based-themes">Using Theme Variables with File Based Themes</h2><p>See developer documentation: </p><p><a href="https://success.vanillaforums.com/kb/articles/278-common-theme-components" rel="nofollow noreferrer ugc">https://success.vanillaforums.com/kb/articles/278-common-theme-components</a></p><h2 data-id="troubleshooting">Troubleshooting</h2><p>If you are getting an invalid JSON message, you may be missing a quote (“) or a comma somewhere. Every line except the last must finish in a comma. </p><h2 data-id="missing-variables">Missing Variables?</h2><p>Wish there was a theme variable to do something but can’t seem to find one? Tell us about it by <a href="https://success.vanillaforums.com/categories/product-ideas" rel="nofollow noreferrer ugc">submitting an idea in the success community</a></p><p> </p> </article> </main>