Theming Overview - Vanilla Success
<main> <article class="userContent"> <h2 data-id="introduction">Introduction </h2><p>Foundation and the Theme Editor were introduced with the goal of allowing you and your teams to easily customize your site to give your community and knowledge bases a look and feel that showcases your brand. </p><p>Foundation has been built to ensure that your theme remains accessible, mobile friendly and compatible with any changes to our platform as we continue to improve and introduce new features. </p><p>The goal of Foundation is to give you a theming system that allows for customizability, while still allowing us to deliver new features to your sites. We also want to provide a better user experience across all devices. To accomplish this, we’ve moved away from our old theming system where you could edit the HTML, CSS and JS directly in your theme, towards a config-based system that uses <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference" rel="nofollow noreferrer ugc">Theme Variables.</a> </p><h2 data-id="advantages">Advantages </h2><p>Our previous system served us well over the years, but this new system and editor work very differently. We’re excited to show you the many advantages of this new process. Foundation is built to allow for new features to be easily enabled and introduced making Foundation more stable for the future and will allow for the theme to evolve with the community. </p><h2 data-id="how-does-this-new-system-work">How does this new system work? </h2><p>Foundation includes a set of <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference" rel="nofollow noreferrer ugc">variables</a> that control all your theme customizations. Whether you use the <a href="https://success.vanillaforums.com/kb/articles/279-theme-editor-overview" rel="nofollow noreferrer ugc">theming editor UI</a>, create your own <a href="https://success.vanillaforums.com/kb/articles/168-theming-quickstart" rel="nofollow noreferrer ugc">file based theme</a> or <a href="https://success.vanillaforums.com/kb/articles/202-apiv2-reference-endpoints#/Themes" rel="nofollow noreferrer ugc">update variables using the API,</a> those modifications get integrated into the site’s variables and get passed to the various components. </p><p>Read more on the different ways to edit themes: </p><div class="js-embed embedResponsive" data-embedjson="{"body":"Vanilla offers three ways of creating and editing a theme: Theming Editor UI The theming editor UI is the main and most common way to customize your foundation theme. You can add a new theme and edit existing themes in your dashboard via a theming UI. This is the easiest way to get started theming and make small tweaks to…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/172-ways-to-edit-themes","embedType":"link","name":"Ways To Edit Themes - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/172-ways-to-edit-themes" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/172-ways-to-edit-themes </a> </div><h2 data-id="quick-set-up">Quick Set Up </h2><p>The new system works with the configuration of assets and variables. This allows us to do a lot with very little overhead. Only a few colors and image uploads are required to skin your whole site! From there you can make more detailed customizations, but you get to a great starting point with minimal effort. </p><p>Read more: </p><div class="js-embed embedResponsive" data-embedjson="{"body":"Overview Foundation is Vanilla’s newest theme and our recommendation as the best option when creating your new theme, or for updating an existing theme. Our new Theme Editor makes it easy to create and modify custom theme templates so that your community and knowledge base can match your unique brand. Legacy Clients New…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/279-theme-editor-overview","embedType":"link","name":"Theme Editor Overview - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/279-theme-editor-overview" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/279-theme-editor-overview </a> </div><h2 data-id="mobile-experience">Mobile Experience </h2><p>Previously, you needed to manage your desktop and mobile themes separately. Our new theme and theme editor components have been made to be mobile-responsive out of the box, making your options naturally flow through on mobile as well. </p><h2 data-id="accessibility">Accessibility </h2><p>All of our components are built with accessibility in mind. By using our system, you are ensuring an inclusive experience for all your users </p><p>Read more: </p><div class="js-embed embedResponsive" data-embedjson="{"body":"Overview We strive for maximum accessibility in our product design and take defects in it seriously. ‘508 Compliance’ refers to a US law that requires that US government websites to be accessible to persons with disabilities (e.g. visual or physical impairment). Accessibility means, among many other things, that a person…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/7-accessibility-in-product-design","embedType":"link","name":"Accessibility in Product Design - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/7-accessibility-in-product-design" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/7-accessibility-in-product-design </a> </div><p><br></p><h2 data-id="qa-stability">QA & Stability </h2><p>By editing the HTML/CSS/JS directly, you are essentially creating your own custom version of Vanilla. This leads to each customer having their own unique set of code and customizations. This causes delays in support and requires developer resources in house to help troubleshoot. With this config-based system you are now applying your styles to a curated list of well tested components and variables. These components and variables are available to all customers and are frequently used. This means these components will be commonly known, regularly tested, and well documented. </p><h2 data-id="features">Features </h2><p>Here are some of the features you will be able to take advantage of with Vanilla's theming system. </p><ul><li>Easily choose fonts and colors of the site. You can start with a few colors and have them flow through the theme, then dig deeper to make specific tweaks. <a href="https://success.vanillaforums.com/kb/articles/280-configuring-global-styles" rel="nofollow noreferrer ugc">Read more on configuring global styles</a> </li><li>Customizable layouts and flexible widgets like Featured Categories and Tabbed Discussions you can place in multiple areas of the page, or even show selectively by role to help you showcase the most important aspects of your community. <a href="https://success.vanillaforums.com/kb/articles/366-using-pockets-widgets-to-enhance-your-theme" rel="nofollow noreferrer ugc">Check out our Widgets & Modules</a> </li><li>A completely responsive theme experience. Be confident that your theme will look great across all devices. </li><li>Optimized SEO and enhanced accessibility </li><li>Add your own header and footer to match your family of sites so that users clicking around your web presence feel like they are in the same place. </li><li>Add custom JavaScript for your external analytics or ads using current best practices for JavaScript security and XSS protection. </li></ul><h2 data-id="got-a-great-idea">Got a great idea? </h2><p>After reading this guide and trying your hand at building a custom theme, you may find that some controls are not available to you in the code or via the UI. Do not fret. We want to know which features and components you would like to be able to customize. This information will help inform future development sprints and initiatives. If you have questions or feedback to share, submit this via our Product Ideas category. This notifies our Product team and allows them to make informed decisions as they plan upcoming sprints and releases. </p><div class="js-embed embedResponsive" data-embedjson="{"body":"Share your Vanilla feedback, vote on ideas and help us improve our platform.","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/categories\/product-ideas","embedType":"link","name":"Product Ideas"}"> <a href="https://success.vanillaforums.com/categories/product-ideas" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/categories/product-ideas </a> </div><h2 data-id="ready-to-get-started"> Ready to get started? </h2><p>Start here: </p><div class="js-embed embedResponsive" data-embedjson="{"body":"Overview Foundation is Vanilla’s newest theme and our recommendation as the best option when creating your new theme, or for updating an existing theme. Our new Theme Editor makes it easy to create and modify custom theme templates so that your community and knowledge base can match your unique brand. Legacy Clients New…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/279-theme-editor-overview","embedType":"link","name":"Theme Editor Overview - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/279-theme-editor-overview" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/279-theme-editor-overview </a> </div><p><br></p><p> </p> </article> </main>