Configure Global Styles - HL Vanilla Community
<main> <article class="userContent"> <p>The Styles sections of the Theme Editor is further broken down into subsections, which can be accessed by clicking elements in the theme preview (the area to the left) or by using the navigation menu (highlighted below).</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/7Y2ICOK80ICU/styles-menu.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/7Y2ICOK80ICU/styles-menu.png" alt="styles_menu.png" height="685" width="961" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>For details on the other options, check out the articles below:</p><ul><li><a href="https://success.vanillaforums.com/kb/articles/397-customizing-the-title-bar" rel="nofollow noreferrer ugc">Title Bar</a></li><li><a href="https://success.vanillaforums.com/kb/articles/402-theme-editor-banner" rel="nofollow noreferrer ugc">Banner</a></li><li>Widgets ( to be published) </li><li>Content Banner ( to be published) </li><li><a href="https://success.vanillaforums.com/kb/articles/365-quick-links-menu" rel="nofollow noreferrer ugc">Quick Links</a></li><li><a href="https://success.vanillaforums.com/kb/articles/411-theme-editor-discussion-list" rel="nofollow noreferrer ugc">Discussion List </a></li></ul><p>This article focuses on <strong>Global Styles</strong>. </p><h2 data-id="preset">Preset</h2><p>Select <strong>Light </strong>or <strong>Dark</strong> from the <strong>Preset</strong> dropdown to automatically update the <strong>Background </strong>and <strong>Text </strong>fields, as you can see in the examples below. </p><h3 data-id="light">Light</h3><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/DFCUYL6IZET9/light-preset-example.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/DFCUYL6IZET9/light-preset-example.png" alt="light_preset_example.png" height="661" width="1271" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="dark">Dark</h3><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/CE4A944RYVAP/dark-preset-example.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/CE4A944RYVAP/dark-preset-example.png" alt="dark_preset_example.png" height="662" width="1270" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>✔️ TIP</strong>: While working in the <strong>Header</strong>, <strong>Footer</strong>, <strong>CSS</strong>, <strong>JavaScript</strong>, and <strong>Advanced Settings</strong> editor, you can click the icon highlighted below to switch between a light/dark theme. These particular presets don't affect your actual theme, like the one discussed above; they are provided simply to make working in these editors easier. </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/I8DMOIADOY68/light-dark-preset.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/I8DMOIADOY68/light-dark-preset.png" alt="light_dark_preset.png" height="742" width="971" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <h2 data-id="brand-color">Brand Color</h2><p>The <strong>Brand Color </strong>option affects various styles within the application to make theming as quick and easy as possible. As you can see in the examples below, the Brand Color can affect styles like the main background, text color, and link color.</p><h3 data-id="example-1">Example 1</h3><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/DF6NCYC7J3NL/brand-color-example-1.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/DF6NCYC7J3NL/brand-color-example-1.png" alt="brand_color_example-1.png" height="661" width="1271" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="example-2">Example 2</h3><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/E7MJZKEVC8MV/brand-color-example-2.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/E7MJZKEVC8MV/brand-color-example-2.png" alt="brand_color_example-2.png" height="661" width="1312" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>✔️ TIP</strong>: If there are any elements that inherit the brand color that you want to set individually, check the appropriate article aimed at that element, as well as the theme variables articles for additional settings. </p><h2 data-id="body">Body </h2><p>The options in the <strong>Body </strong>section control most text in your community, including discussion threads.</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/6SZGYRMI804G/body-options.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/6SZGYRMI804G/body-options.png" alt="body_options.png" height="661" width="877" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="background">Background</h3><p>You can set the main background color for the community. This is typically white in lighter themes, black in dark themes. </p><p>If you have a technical resource, you can use <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#global" rel="nofollow noreferrer ugc">Theme Variables</a> to adjust this more granularly, and to set an image as the background.</p><h3 data-id="text">Text</h3><p>This controls the default colour of the text in most elements, including user discussions. This is typically black in lighter themes, white in dark themes. Certain text elements can be modified on a more granular basis. For more information, check out the article on the particular feature you are trying to change.</p><h3 data-id="links">Links</h3><p>Choose what color links should have by default. </p><p>If you have a technical resource, you can use <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#global" rel="nofollow noreferrer ugc">Theme Variables</a> to adjust this more granularly and to set individual states (such as active, focus and visited).</p><h3 data-id="link-decoration">Link Decoration </h3><p>If you set link decoration to Auto, underlining will only appear when the user hovers over the link. If you set it to Always, the underlining will always appear. </p><h3 data-id="font">Font</h3><p>Choose from a number of font options. </p><p>If you have a technical resource, you can use <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#global" rel="nofollow noreferrer ugc">Theme Variables</a> to adjust this more granularly and to update font size and weight.</p><p>For more granular information on updating your font see: </p><p><a href="https://success.vanillaforums.com/kb/articles/285-setting-your-font-in-the-theme-editor" rel="nofollow noreferrer ugc">https://success.vanillaforums.com/kb/articles/285-setting-your-font-in-the-theme-editor</a> </p><h2 data-id="buttons-inputs">Buttons & Inputs</h2><p>The options in the <strong>Buttons & Inputs </strong>section control all aspects of your community's primary and secondary buttons.</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/LRAQ5TO69C6O/buttons-inputs-options.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/LRAQ5TO69C6O/buttons-inputs-options.png" alt="buttons_inputs_options.png" height="620" width="1273" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="border-radius">Border Radius</h3><p>Border Radius controls how rounded button corners are.</p><h3 data-id="button-type">Button Type</h3><p>For both your primary and secondary buttons, you can choose to have a <em>solid </em>or <em>outlined</em> button.</p><p>Referencing the image above, the primary button is set to <strong>Solid</strong>,<strong> </strong>while the secondary button is set to <strong>Outline</strong>. This is generally recommended, to help give your primary buttons a more prominent appearance (hence their name).</p><h3 data-id="background-1">Background</h3><p>Sets the button's background color.</p><h3 data-id="text-1">Text</h3><p>Sets the button's text color. For ease of reading and accessibility, you'll want to choose an easy-to-read text color dependent on your button background color. </p><p>Again referencing the image above, you'll notice the blue primary button has white text, while the white secondary button has black text; both of these are great choices for accessibility.</p> </article> </main>