Discussion List - HL Vanilla Community
<main> <article class="userContent"> <p>When editing a theme, the Theme Editor <strong>Discussion List</strong> settings allow you to update the look and feel of discussion lists in your community, such as the Recent Discussion list or a list of discussions for a particular Category.</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/514Z4ABCBBX4/access-discussion-list.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/514Z4ABCBBX4/access-discussion-list.png" alt="access_discussion_list.png" height="575" width="1243" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>📝 NOTE</strong>: Keep in mind your layout settings also impact the look of these pages. All options noted below are available for the <a href="https://success.vanillaforums.com/kb/articles/430-layout-settings" rel="nofollow noreferrer ugc">Foundation Layout</a> type. </p><h2 data-id="border">Border</h2><p>There are two <strong>border </strong>styles you can use to add a border to:</p><ul><li>the entire discussion list (the <strong>outer </strong>border shown as a shadow below)</li><li>and/or to individual list items (the <strong>inner </strong>border shown as a solid below)</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/K2H2W6OVV5JF/border-styles-example.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/K2H2W6OVV5JF/border-styles-example.png" alt="border_styles_example.png" height="665" width="1203" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="title-color">Title Color</h2><p>There are two styles you can use to customize the color of <strong>discussion titles</strong>:</p><ul><li><strong>Title Color</strong> controls the base color of all discussion titles</li><li><strong>Title Color (Hover)</strong> controls the color displayed when titles are hovered over.</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/IIQJ0OV07YQC/title-color-example.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/IIQJ0OV07YQC/title-color-example.png" alt="title_color_example.png" height="665" width="1203" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="profile-photo">Profile Photo </h2><p>These options determine <strong>where </strong>user avatars are displayed in the discussion list (or whether they're displayed at all).</p><h3 data-id="default">Default</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/2BECDW8UDIAS/profile-photo-default.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/2BECDW8UDIAS/profile-photo-default.png" alt="profile_photo_default.png" height="665" width="1203" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="meta-row">Meta Row</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/T51UF8EBGV1D/profile-photo-metarow.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/T51UF8EBGV1D/profile-photo-metarow.png" alt="profile_photo_MetaRow.png" height="680" width="1201" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="hidden">Hidden </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/RC42SP407FJM/profile-photo-hidden.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/RC42SP407FJM/profile-photo-hidden.png" alt="profile_photo_hidden.png" height="669" width="1202" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="tag-presets">Tag Presets</h2><ul><li><strong>User Tag</strong> presets apply to the tags that appear in the tag clouds that users can add to individual discussions. If you're not using the tagging feature, this will not apply. </li><li><strong>Label Tag </strong>presets apply to everything else, such as announcement, questions, and ideation statuses.</li></ul><p><strong>📝 NOTE</strong>: The New tag is separate, and follows the global theme settings (brand color).</p><h3 data-id="label-tag-as-primary-and-user-tag-as-standard">Label Tag as Primary and User Tag as Standard</h3><ul><li><strong>Primary </strong>color is inherited from the global style settings.</li><li><strong>Standard </strong>is plain black and white. </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/CP7VMDQNATJW/label-tag-preset-example.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/CP7VMDQNATJW/label-tag-preset-example.png" alt="label_tag_preset_example.png" height="812" width="1202" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="label-tag-as-colored-and-user-tag-as-grayscale">Label Tag as Colored and User Tag as Grayscale</h3><ul><li><strong>Colored </strong>inherits the brand color and adds a light background. </li><li><strong>Greyscale </strong>is a grey background with black text.</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/JWO8VOZPNBYI/label-tag-preset-example-2.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/JWO8VOZPNBYI/label-tag-preset-example-2.png" alt="label_tag_preset_example-2.png" height="809" width="1202" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="excerpt">Excerpt </h2><p>Choose to show or hide the first few lines of text from each discussion in the list. By default, this will show the first 100 characters and append an ellipsis if the text exceeds that.</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/YZC62NXT61ZZ/excerpt-example.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/YZC62NXT61ZZ/excerpt-example.png" alt="excerpt_example.png" height="637" width="1205" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="display-metas-as-icons">Display Metas as Icons</h2><p>This option allows you to control whether <strong>words </strong>or <strong>icons </strong>are used for the meta options you've enabled in the <strong>Meta Options</strong> area (below). </p><h3 data-id="as-words-(default)">As words (default)</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/8FH6WCHNZNSG/meta-words-example.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/8FH6WCHNZNSG/meta-words-example.png" alt="meta_words_example.png" height="534" width="1263" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="as-icons">As icons</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/KPMMZ0S536DP/meta-icons-example.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/KPMMZ0S536DP/meta-icons-example.png" alt="meta_icons_example.png" height="532" width="1262" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="meta-options">Meta Options </h3><p>You can choose to display or hide certain meta options:</p><ul><li><strong>Category</strong>: Category the post is in. </li><li><strong>Author</strong>: The author of the discussion.</li><li><strong>Last Comment User</strong>: The user who posted a comment most recently on the thread.</li><li><strong>View Count</strong>: How many views the post has received.</li><li><strong>Comment Count</strong>: How many comments the post has received.</li><li><strong>Score</strong>: The sum of <a href="https://success.vanillaforums.com/kb/articles/22-reactions" rel="nofollow noreferrer ugc">reactions</a> this post has received (likes, upvotes, etc.). </li><li><strong>User Tags</strong>: Tags that have been added to this discussion. </li><li><strong>Unread count</strong>: How many new comments have been added since the currently logged in user last viewed this discussion.</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/SIUPA76AAU2I/meta-options.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/SIUPA76AAU2I/meta-options.png" alt="meta_options.png" height="800" width="1202" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>If you have a technical resource, you can change additional meta options using <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#categorylist" rel="nofollow noreferrer ugc">theme variables</a> such as:</p><ul><li>Last Comment date</li><li>QnA Statuses</li></ul><p>You can also get more granular with the alignment, font settings, spacing, and sizing using <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#metas" rel="nofollow noreferrer ugc">theme variables</a>.</p><h2 data-id="advanced-theme-settings">Advanced Theme Settings</h2><p>If you have a technical resource, you can also amend the background, get more granular with the positioning (spacing): </p><p><a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#list" rel="nofollow noreferrer ugc">https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#list</a></p><h2 data-id="troubleshooting">Troubleshooting</h2><p>The options will only apply to those using the Foundation Layout. Be sure to check whether you're are using this layout option. </p> </article> </main>