Discussion List Widget - HL Vanilla Community
<main> <article class="userContent"> <p>The List widgets allow you to showcase content that is in your <strong>Higher Logic Vanilla</strong> (<strong>Vanilla</strong>) community. Each list-based widget is dedicated to one of the following discussion types.</p><ul><li>List - Announcements</li><li>List - Articles</li><li>List - Discussions (see also <a href="https://success.vanillaforums.com/kb/articles/419-tabs-widget" rel="nofollow noreferrer ugc">Tabs Widget</a>)</li><li>List - Events</li><li>List - Ideas</li><li>List - Questions</li></ul><p>📝 <strong>NOTE</strong>: You can add several of these widgets in order to showcase various types of user-contributed content.</p><h2 data-id="set-up-the-lists-widgets">Set up the Lists widgets</h2><p>To use these widgets, you must add them via a Pocket.</p><p>✔️ <strong>TIP</strong>: Be sure to test on your staging site before committing to your production site.</p><p>To add and configure a Pocket:</p><p>1. Navigate to <strong>Dashboard > Settings > Pockets</strong>.</p><p>2. Click the <strong>Add Pocket</strong> button.</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/K4FQHB0F4MBQ/add-pocket-button.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/K4FQHB0F4MBQ/add-pocket-button.png" alt="Add Pocket button.png" height="462" width="1222" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>3. Specify a Name (e.g., <em>Discussions List</em>, <em>List of Ideas</em>, or <em>Upcoming Events</em>) for your pocket.</p><p>4. Select the appropriate <strong>List -</strong> option as the Type. </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh3.googleusercontent.com/6490PMFAVrGi2BxdsJYjofP_9xo9NEhJ3Ew9vYBe-aDgpfE6Lp5C8S1hJl8yCALRvwuppzGMQSO2z9eWcDh3D4RjgWCctzVEoZSqxk5f2RsY2zpJLAe3ABpp0M96-W3r8B8TKdmQ" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh3.googleusercontent.com/6490PMFAVrGi2BxdsJYjofP_9xo9NEhJ3Ew9vYBe-aDgpfE6Lp5C8S1hJl8yCALRvwuppzGMQSO2z9eWcDh3D4RjgWCctzVEoZSqxk5f2RsY2zpJLAe3ABpp0M96-W3r8B8TKdmQ" alt="6490PMFAVrGi2BxdsJYjofP_9xo9NEhJ3Ew9vYBe-aDgpfE6Lp5C8S1hJl8yCALRvwuppzGMQSO2z9eWcDh3D4RjgWCctzVEoZSqxk5f2RsY2zpJLAe3ABpp0M96-W3r8B8TKdmQ" height="318" width="523" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>The fields that populate the lower part of the dialog will depend on which <strong>List -</strong> widget you choose.</p><p>✔️ <strong>TIP</strong>: We recommend that you complete even the optional fields (e.g., Description) with information that is helpful to other Admins. </p><p>📝 <strong>NOTE</strong>: The optional <strong>Category to display from</strong> and <strong>Subcommunity to display from</strong> fields are mutually exclusive; you cannot use both of these fields.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh4.googleusercontent.com/tUGGulGFFXy9PxKc8zm3UrxWdEd6994W-DfAKfAFr_GNbV3surCCbL8igOgvsjzPJGMowuObunnxvMDjDPEP1s7PxYFd-J_XJAGF8Y_RyjHsQn588nDh2__xcNuEd1h9qG80jfLz" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh4.googleusercontent.com/tUGGulGFFXy9PxKc8zm3UrxWdEd6994W-DfAKfAFr_GNbV3surCCbL8igOgvsjzPJGMowuObunnxvMDjDPEP1s7PxYFd-J_XJAGF8Y_RyjHsQn588nDh2__xcNuEd1h9qG80jfLz" alt="User: "tUGGulGFFXy9PxKc8zm3UrxWdEd6994W-DfAKfAFr_GNbV3surCCbL8igOgvsjzPJGMowuObunnxvMDjDPEP1s7PxYFd-J_XJAGF8Y_RyjHsQn588nDh2__xcNuEd1h9qG80jfLz"" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>5. Complete the fields and click <strong>Save</strong>.</p><p>6. Click the <strong>Placement & Conditions</strong> tab to set the placement options as described in <a href="https://success.vanillaforums.com/kb/articles/19-pockets#working-with-pockets" rel="nofollow noreferrer ugc">working with pockets</a>.</p><h3 data-id="list-widget-details">List widget details</h3><p>The sections that follow provide information on each of <strong>List -</strong> widgets.</p><h2 data-id="list-discussions-widget"><strong>List - Discussions </strong>widget</h2><p>Use this widget to showcase a list of <strong>community discussions</strong>. Configure the settings to curate its content. You can:</p><ul><li>Showcase discussions from a specific subcommunity or category</li><li>Sort your content; e.g., by most recent, top, or trending<ul><li>Most recent means most recently commented on or created</li><li>Top means most votes</li><li>Trending is a combination of votes and comments</li></ul></li></ul><p>⭐️ <strong>EXAMPLES</strong>: Use this widget to display a list of:</p><ul><li>Recent discussions for a category and its children, and place it on the top-level category page.</li><li>Top discussions to showcase those with the highest score, based on <a href="https://success.vanillaforums.com/kb/articles/22-reactions" rel="nofollow noreferrer ugc">reactions</a>.</li><li>Trending discussions to showcase the content that is receiving a lot of comments and reactions.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/2242GM12DDD2/discussions.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/2242GM12DDD2/discussions.png" alt="Discussions.png" height="387" width="859" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="list-questions-widget">List - Questions widget</h2><p>Use this widget to showcase a list of <strong>community </strong><a href="https://success.vanillaforums.com/kb/articles/20-questions-answers-q-a" rel="nofollow noreferrer ugc"><strong>questions</strong></a>. Configure the settings to curate its content. You can:</p><ul><li>Showcase questions from a specific subcommunity or category</li><li>Filter the list to show only questions of a specified status; e.g., unanswered, answered, or accepted</li><li>Sort your content; e.g., by most recent, top, or trending</li></ul><p>⭐️ <strong>EXAMPLES</strong>: Use this widget to display a list of:</p><ul><li>Unanswered questions for a specific subcommunity</li><li>Most recently answered questions for a category and more</li></ul><p>📝 <strong>NOTE</strong>: This widget replaces the Questions & Answers widget. If you were using the Questions & Answers widget, you must reconfigure it in your Dashboard's Pocket 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/VMKZTH2JV35H/questions.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/VMKZTH2JV35H/questions.png" alt="Questions.png" height="431" width="901" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="list-ideas-widget">List - Ideas widget</h2><p>Use this widget to showcase a list of <strong>ideas submitted to your community</strong>. Configure the settings to curate its content. You can:</p><ul><li>Showcase ideas from a specific subcommunity or category</li><li>Create a personalized list of ideas so users can see the ideas they've submitted and/or voted on</li><li>Sort your ideas; e.g., by newest, most recently active, top, or trending</li></ul><p>⭐️ <strong>EXAMPLES</strong>: Use this widget to display a list of:</p><ul><li><em>Top Ideas</em> to showcase those with the highest vote counts</li><li><em>My Ideas</em> to provide users with a personalized list of ideas they've voted on</li><li>Most recent ideas for a category so that users can more easily see and vote on new ideas</li></ul><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/2RHB41IVN9KS/ideas.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/2RHB41IVN9KS/ideas.png" alt="Ideas.png" height="479" width="397" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <h2 data-id="list-announcements-widget">List - Announcements widget</h2><p>Use this widget to showcase a list of <strong>discussions that have been announced</strong> in a community, subcommunity, or category. Configure the settings to curate its content.</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/7ICPW0SVYS0Z/announcements.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/7ICPW0SVYS0Z/announcements.png" alt="Announcements.png" height="566" width="612" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="list-articles-widget">List - Articles widget</h2><p>Use this widget to showcase a list of <strong>articles from a selected Knowledge Base</strong>. Configure the settings to curate its content.</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/IYAYJATYWB6P/articles.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/IYAYJATYWB6P/articles.png" alt="Articles.png" height="619" width="1176" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="list-events-widget">List - Events widget</h2><p>Use this widget to showcase a list of <strong>upcoming events</strong> from either your categories or groups. Configure the settings to curate its content.</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/9BSA2ZMO9LNR/events.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/9BSA2ZMO9LNR/events.png" alt="Events.png" height="510" width="852" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="widget-display-settings"><strong>Widget display settings</strong></h2><p>The widget and its contents inherit their properties from the <strong>Global Styles</strong> settings in <a href="https://success.vanillaforums.com/kb/articles/279-style-guide-editor-overview" rel="nofollow noreferrer ugc">Theme Editor</a>. These settings determine the appearance of the widgets on your community pages.</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/KBX7PQW1WFAP/theme-globalstyles-for-widgets.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/KBX7PQW1WFAP/theme-globalstyles-for-widgets.png" alt="Theme_GlobalStyles for widgets.png" height="622" width="1255" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>📝 <strong>NOTE</strong>: Currently, it is <strong>not</strong> possible to format (i.e., change the properties) the widget elements individually.</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/SBFUMVMHXD1I/theme-globalstyles-settings.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/SBFUMVMHXD1I/theme-globalstyles-settings.png" alt="Theme_GlobalStyles_settings.png" height="390" width="360" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <p>The widgets in your Vanilla community inherit most of their properties from the <strong>Global Styles</strong> settings. Some examples of this that are on several widgets are:</p><ul><li><em>Background</em> color is inherited from the <strong>Background</strong> setting.</li><li><em>Title</em>, <em>Description</em>, and <em>article link</em> colors are inherited from the <strong>Text</strong> setting.</li><li><em>View All link</em> and <em>username link </em>colors are inherited from the <strong>Links</strong> setting.</li><li><em>Subtitle</em> and <em>hover-over</em> colors are inherited from the <strong>Brand Color</strong> setting.</li></ul> </article> </main>