Customizing Your Legacy Theme - Vanilla Success
<main> <article class="userContent"> <p>This documentation refers to our legacy theming system. It is strongly recommended to use our<a href="https://success.vanillaforums.com/kb/theme-guide" rel="nofollow noreferrer ugc"> new Foundation theming system</a>.</p><p><a href="https://success.vanillaforums.com/kb/articles/277-moving-my-theme-over-to-the-new-theming-system" rel="nofollow noreferrer ugc">You can read about migrating to the new theming system here</a>.</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. Please 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 theming 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"></img></a> </div> </div> <p><br></p><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 and target the</p><p>For example, to change the font to the Google Font Lato:</p><ul><li>Get the link snippet from fonts.google.com: <code class="code codeInline" spellcheck="false" tabindex="0"><link href="<a href="https://fonts.googleapis.com/css?family=Lato"" rel="nofollow noreferrer ugc">https://fonts.googleapis.com/css?family=Lato"</a> 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>Go to HTML tab on the Customize Theme page of the Vanilla Dashboard</li><li>Add the font link snippet above in between the tags</li><li>Add the following to the CSS tab: <code class="code codeInline" spellcheck="false" tabindex="0">body {font-family: 'Lato', sans-serif;}</code></li></ul><p>Notes: </p><ul><li>Knowledge of CSS is required to use the CSS customization features of Vanilla </li><li> If you would like to install a font that is not available as a webfont, please see <a href="https://success.vanillaforums.com/kb/articles/102-how-to-set-up-a-custom-font" rel="nofollow noreferrer ugc">How to Setup Up a Custom Font</a>.</li><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>. </li><li>Be careful when using the $Path variable: Unsafe implementation:{$Path}. Safe implementation: {$Path|escape:‘url’}.</li></ul><h3 data-id="additional-resources%3A"><strong>Additional Resources:</strong></h3><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>