Layout Settings - Vanilla Success
<main> <article class="userContent"> <p>When setting up your <strong>Higher Logic Vanilla</strong> (<strong>Vanilla</strong>) community, you can choose from a variety of layouts in order to control the appearance of your community pages.</p><p>The layouts are available to set the design of three main pages of your community site:</p><ul><li><strong>Homepage</strong> - your community's "landing page." Here, your users are welcomed to your community, so it's your chance to make the proverbial "first impression."</li><li><strong>Discussions page</strong> - displays a list of recent Discussions; users can click a Discussion to view its full details.</li><li><strong>Categories page</strong> - displays a list of your community Categories, which are the high-level organizers of your Discussions.</li></ul><h2 data-id="access-layouts">Access layouts</h2><ol><li>Navigate to <strong>Dashboard > Appearance</strong>.</li><li>In the left navigation, click one of the options under <strong>Layout Editor</strong>.</li><li>Click <strong>Legacy Layouts</strong>.</li></ol><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/P5NJZGE3LF2T/nav-legacylayouts.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/P5NJZGE3LF2T/nav-legacylayouts.png" alt="NAV-LegacyLayouts.png" height="480" width="782" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>🛑 <strong>WARNING</strong>: When you apply a layout, <em>the change is immediate</em>. There is no "save" action required, nor is there a confirmation prompt.</p><p>✔️ <strong>TIP</strong>: Vanilla recommends testing these changes in your staging site before committing them to your production site.</p><p>After you've chosen a page layout, you can customize it with your brand's styling and colors to create a user experience that is unique to your community and in sync with your organization's brand.</p><p>📝 <strong>NOTE</strong>: You can choose different layouts for these pages and then <em>customize each chosen layout for the page</em>. There is no interdependency between these pages.</p><h2 data-id="homepage">Homepage</h2><p>Your homepage is typically the first page visitors and members of your community see, so it should proudly present and represent your brand.</p><ul><li>Hover on a layout and click <strong>Apply</strong>.</li></ul><p>🛑 <strong>WARNING</strong>: The layout is <em>immediately applied to the page</em>. You are <strong>not</strong> prompted to save or confirm the action.</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/Z4OXKOH7H7S5/layouts-homepage.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/Z4OXKOH7H7S5/layouts-homepage.png" alt="Layouts-Homepage.png" height="516" width="864" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>The layouts are described in the sections below.</p><h3 data-id="discussions">Discussions</h3><p>This layout populates your homepage with a list of all your discussions in order of most recent, with no particular grouping.</p><h3 data-id="categories">Categories</h3><p>This layout populates your homepage with your entire Category structure with headings that allow for greater organization.</p><h3 data-id="best-of">Best Of</h3><p>This layout showcases your top content, based on user reactions, in a tiled view. </p><p>📝 <strong>NOTE</strong>: Using this layout requires the <a href="https://success.vanillaforums.com/kb/articles/296" rel="nofollow noreferrer ugc"><em>Best Of</em> page</a> to already be set up.</p><h3 data-id="knowledge-base">Knowledge Base</h3><p>This layout changes your homepage into your Knowledge Base.</p><p>This layout is often preferred by Support-based communities that want to promote a self-serve approach to their members looking to solve issues or learn about a topic on their own.</p><p>📝 <strong>NOTE</strong>: Using this layout might decrease engagement in your main community.</p><h2 data-id="discussions-page">Discussions page</h2><p>The Discussions page lists your community discussions; users can click discussion titles to view the entire thread (the original discussion and any associated comments).</p><ul><li>Hover on a layout and click <strong>Apply</strong>.</li></ul><p>🛑 <strong>WARNING</strong>: The layout is <em>immediately applied to the page</em>. You are <strong>not</strong> prompted to save or confirm the action.</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/6ALM95TSYLCW/pasted-image-0-2824-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/6ALM95TSYLCW/pasted-image-0-2824-29.png" alt="pasted image 0 (24).png" height="305" width="851" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>The selected layout is used wherever your list of discussions is shown, such as a <strong>Categories </strong>page (if discussions are allowed), the <strong>Recent Discussions</strong> page, the <strong>My Bookmarks</strong> page, your <strong>Homepage </strong>(if the Discussions Layout is applied as described above), and even within a <strong>Group</strong>.</p><p>📝 <strong>NOTE</strong>: This layout does <strong>not</strong> apply to the "tabbed" discussions list in the <a href="https://success.vanillaforums.com/kb/articles/419" rel="nofollow noreferrer ugc">Tabs Widget</a>, which always displays in the <em>Foundation Layout</em>.</p><p>The layouts are described in the sections below.</p><h3 data-id="modern-layout">Modern Layout</h3><p>A simple and clean layout that succinctly displays the activity data in a row.</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/OSXYFY84Q6Y1/modern-discussions.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/OSXYFY84Q6Y1/modern-discussions.png" alt="modern discussions.png" height="325" width="863" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="table-layout">Table Layout</h3><p>A table-type structure with columnar separations and images.</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/ANXD1CAV0UVS/pasted-image-0-2825-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/ANXD1CAV0UVS/pasted-image-0-2825-29.png" alt="pasted image 0 (25).png" height="365" width="861" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="foundation-layout">Foundation Layout</h3><p>Vanilla’s latest layout builds on Modern Layout by giving the user more information in a snippet of the discussion.</p><p>Other features include the ability to:</p><ul><li><em>configure properties</em> like border styles and text colours,</li><li><em>enable/disable the display of metadata</em> (e.g., view count, comment count, and avatars), and</li><li><em>display meta info as icons</em>.</li></ul><p>See <a href="https://success.vanillaforums.com/kb/articles/411-discussion-list" rel="nofollow noreferrer ugc">Discussion List</a> to learn more about the configuration options that are available in <strong>Theme Editor > Discussion List</strong>.</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/CNB2J3GOS4BC/screen-shot-2021-09-17-at-2-05-09-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/CNB2J3GOS4BC/screen-shot-2021-09-17-at-2-05-09-pm.png" alt="Screen Shot 2021-09-17 at 2.05.09 PM.png" height="496" width="864" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="categories-page">Categories page</h2><p>Your Categories page lists your Categories, which are the high-level groupings of your community discussions.</p><ul><li>Hover on a layout and click <strong>Apply</strong>.</li></ul><p>🛑 <strong>WARNING</strong>: The layout is <em>immediately applied to the page</em>. You are <strong>not</strong> prompted to save or confirm the action.</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/0C1MHDFTYICA/categories.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/0C1MHDFTYICA/categories.png" alt="categories.png" height="562" width="849" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>The selected layout is used wherever your list of categories is shown, such as on your Homepage (if the Categories Layout is applied as described above), and on any top-level or parent category page that contains child categories.</p><p>The layouts are described in the sections below.</p><h3 data-id="modern-layout-1">Modern Layout</h3><p>A simple and clean layout that succinctly displays the activity data in a row.</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/XC0TAHIG6E5U/modern-categ.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/XC0TAHIG6E5U/modern-categ.png" alt="modern categ.png" height="316" width="863" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="table-layout-1">Table Layout</h3><p>A table-type structure with columnar separations and images.</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/4CAC28TFKQIW/screen-shot-2021-09-17-at-2-30-38-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/4CAC28TFKQIW/screen-shot-2021-09-17-at-2-30-38-pm.png" alt="Screen Shot 2021-09-17 at 2.30.38 PM.png" height="335" width="877" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="mixed-layout">Mixed Layout</h3><p>Displays <strong><em>all </em></strong>your categories and their <strong>top five </strong>discussions. Category names display as headings above the five discussions to simplify navigation to new content.</p><p>📝 <strong>NOTE</strong>: Mixed Layout is content-heavy and therefore is <strong>not recommended</strong> if your community has a large number of Categories as this may impact page load times and site performance. If your site is loading slowly, consider a different layout.</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/IWGUKL4L6P21/screen-shot-2021-09-17-at-2-48-20-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/IWGUKL4L6P21/screen-shot-2021-09-17-at-2-48-20-pm.png" alt="Screen Shot 2021-09-17 at 2.48.20 PM.png" height="882" width="783" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="tiled-layout">Tiled Layout</h3><p>This layout displays your Categories <strong>as tiles</strong>.</p><p>In <strong>Theme Editor > Widgets</strong>, you can:</p><ul><li><em>configure properties</em> like borders, images, and colours,</li><li><em>enable/disable the display of metadata</em> (e.g., counts and category descriptions), and</li><li><em>set the number of columns</em>.</li></ul><p>📝 <strong>NOTE</strong>: Category descriptions will <strong>not</strong> display (as seen below) if <em>Background</em> is selected as the <strong>Image Type</strong>.</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/1JG2H7ULRRHT/layouts-category-tiled.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/1JG2H7ULRRHT/layouts-category-tiled.png" alt="Layouts-Category-Tiled.png" height="488" width="642" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="additional-category-styling"><strong>Additional Category styling</strong></h3><p>There are several additional styling options for your Categories:</p><ol><li>Add a <strong>description</strong></li><li>Add a <strong>photo</strong></li><li>Add a <strong>banner image</strong></li></ol><p>All of these can be configured in your Dashboard, on the <strong>Settings > Forum > Categories</strong> page. From there, create or edit a Category to configure its settings.</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/WQPTY6LOUYRQ/untitled.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/WQPTY6LOUYRQ/untitled.png" alt="Untitled.png" height="1208" width="1362" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <ul><li><strong>(1) Description </strong>- the description will show on the main Category page (if using the Tile Layout option, it will only appear with the Icon tile style). The description will also show in the specific category page under the Category name.</li><li><strong>(2) Photo </strong>- the photo will show on the main Category page if you use the Icon Tile style.</li><li><strong>(3) Banner Image </strong>- the banner image will show on the main Category page if you use the Background or Image Tile style. It will also replace the <a href="https://success.vanillaforums.com/kb/articles/402-customizing-the-banner#category-specific-banners" rel="nofollow noreferrer ugc">standard banner image</a> for that Category page.</li></ul><h3 data-id="examples">Examples</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/54GGRYZ2FDMP/untitled-281-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/54GGRYZ2FDMP/untitled-281-29.png" alt="Untitled (1).png" height="1031" width="1600" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></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/EH4RZTE1KKDP/untitled-282-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/EH4RZTE1KKDP/untitled-282-29.png" alt="Untitled (2).png" height="720" width="1600" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></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/BFWF0UC4NEZB/untitled-283-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/BFWF0UC4NEZB/untitled-283-29.png" alt="Untitled (3).png" height="1002" width="1600" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p> </article> </main>