Customize a Legacy Theme - HL Vanilla Community
<main> <article class="userContent"> <p>This article pertains to <strong>Higher Logic Vanilla</strong> (<strong>Vanilla</strong>) Legacy themes.</p><p>š <strong>NOTE</strong>: Vanilla recommends switching to our new <a href="https://success.vanillaforums.com/kb/theme-guide" rel="nofollow noreferrer ugc">Foundation theme</a>. Learn how to <a href="https://success.vanillaforums.com/kb/articles/277" rel="nofollow noreferrer ugc">migrate your Legacy theme</a> to Foundation.</p><p>Vanillaās legacy base theme HTML can be modified and CSS can be overridden. In order to modify a Vanilla theme, you must possess good knowledge of HTML and CSS.</p><p>šļ»æ <strong>IMPORTANT</strong>: Consult theĀ <a href="https://static.v-cdn.net/vfcom/docs/Vanilla-Forums-Theme-Guide.pdf" rel="nofollow noreferrer ugc">Vanilla Forums Theme Guide</a>Ā for detailed instructions.</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/065/WO4E2RE0OL5E.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/065/WO4E2RE0OL5E.png" alt="image.png" height="466" width="900" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="using-web-fonts">Using web fonts</h2><p>The easiest way to change the font in the base theme is to use a web font. You will have to add a link to the font in the theme HTML.</p><p>š <strong>NOTE</strong>: Knowledge of CSS is required to use the CSS customization features of Vanilla.</p><p>āļø <strong>EXAMPLE</strong>: To change the default font to the Google font <strong>Lato</strong>:</p><ol><li>Get the link snippet from fonts.google.com:Ā <code class="code codeInline" spellcheck="false" tabindex="0"><link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"></code></li><li>Get the CSS rule:Ā <code class="code codeInline" spellcheck="false" tabindex="0">font-family: 'Lato', sans-serif;</code></li><li>On the <strong>Edit HTML</strong> tab of the Customize Theme page in the Dashboard, add the font link snippet (from step 1) in between the tags</li><li>On the <strong>Edit CSS</strong> tab of the Customize Theme page in the Dashboard, add:Ā <code class="code codeInline" spellcheck="false" tabindex="0">body {font-family: 'Lato', sans-serif;}</code></li></ol><h3 data-id="notes">Notes</h3><ul><li>If you want to install a font that is not available as a web font, see:</li></ul><div class="js-embed embedResponsive" data-embedjson="{"body":"Loading the fonts There are 2 methods to load the fonts. You only need one of the two. Method A: Self hosting fonts If you're self hosting your fonts, you'll need to convert them to multiple formats. While two can suffice, adding all formats will ensure it can be used by a larger percentage of your users. There areā¦","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/102","embedType":"link","name":"How to Set Up a Custom Font Using Legacy Themes - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/102" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/102 </a> </div><ul><li>For safe implementation, use smarty'sĀ <a href="https://www.smarty.net/docsv2/en/language.modifier.escape" rel="nofollow noreferrer ugc">escape variable modifier</a>. Be careful when using the <strong>$Path</strong> variable.<ul><li>Unsafe implementation: <code class="code codeInline" spellcheck="false" tabindex="0">{$Path}</code></li><li>Safe implementation: <code class="code codeInline" spellcheck="false" tabindex="0">{$Path|escape:āurlā}</code></li></ul></li></ul><h2 data-id="additional-resources"><strong>Additional resources</strong></h2><div class="js-embed embedResponsive" data-embedjson="{"body":"Theme tips to customize your Vanilla Forums theme.","photoUrl":"https:\/\/blog.vanillaforums.com\/hubfs\/Imported_Blog_Media\/building-man-6.jpg#keepProtocol","url":"https:\/\/blog.vanillaforums.com\/product\/friday-theme-tips-one-list","embedType":"link","name":"[Product Post] Theme Tips: All In One List"}"> <a href="https://blog.vanillaforums.com/product/friday-theme-tips-one-list" rel="nofollow noreferrer ugc"> https://blog.vanillaforums.com/product/friday-theme-tips-one-list </a> </div><p><br></p> </article> </main>