Leaderboard Widget - HL Vanilla Community
<main> <article class="userContent"> <p>The Leaderboard widget is a great way to showcase the top contributors in your <strong>Higher Logic Vanilla</strong> (<strong>Vanilla</strong>) community. These are the users who have earned the most activity-based points during a selected time period (daily, weekly, and monthly) as well as your all-time point earners!</p><p>✔️ <strong>TIP</strong>: This widget is a good tool for "nudging" other users to become more engaged in community activities.</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/YFMD5ZAUDA39/intro-image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/YFMD5ZAUDA39/intro-image.png" alt="Intro image.png" height="369" width="512" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>📝 <strong>NOTE</strong>: The Leaderboard widget is available <em>only if the </em><strong><em>Badges</em></strong><em> addon is enabled</em>.</p><p>To learn about the Badges addon, see:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"Higher Logic Vanilla (Vanilla) Badges are a great way to encourage and award desirable behaviours in users of a Vanilla community. Awarding a badge is not intended as an indicator of “the best.” Rather, badges should be one reward among many within a comprehensive gamification strategy that is designed to encourage…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/15-badges","embedType":"link","name":"Badges - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/15-badges" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/15-badges </a> </div><h3 data-id="earning-points">Earning points</h3><p>Your Vanilla community members can earn points in a number of ways, including:</p><ul><li>positively reactions to their posts</li><li>answering other members' questions</li><li>having their answers accepted (if this option is enabled in Q&A settings)</li><li>receiving badges</li></ul><p>To learn about <em>setting up a point-awarding program</em> to reward your community's top contributors, see the knowledge base articles in:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"© Vanilla Foundation Theme 2022","url":"https:\/\/success.vanillaforums.com\/kb\/categories\/51","embedType":"link","name":"Gamification - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/categories/51" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/categories/51 </a> </div><h2 data-id="leaderboard-widget-settings">Leaderboard widget settings</h2><p>This widget can be used in a variety of places across your community site. Before placing a Leaderboard widget, it is important that you:</p><ul><li>Set the <strong>number of users</strong> to display and</li><li>Choose <strong>which timeframe</strong> (<em>daily</em>, <em>weekly</em>, <em>monthly</em>, <em>all-time</em>) the widget displays.</li></ul><h3 data-id="leaderboard-list-resets">Leaderboard list resets</h3><p>The Leaderboard widgets check the database for users' point totals and then reset the lists in order to ensure that the leaderboards remain current. The resets occur every:</p><ul><li>Day for the Daily leaderboard,</li><li>Monday for the Weekly leaderboard, and</li><li>First day of the month for the Monthly leaderboard.</li></ul><p>📝 <strong>NOTE</strong>: The All-Time leaderboard updates every time the page is loaded and displays the leader list accordingly.</p><h2 data-id="default-leaderboards-on-the-activity-page">Default Leaderboards on the Activity page</h2><p>By default, two Leaderboard widgets ("leaderboards") display on your site’s Activity page.</p><ul><li><strong>This Week's Leaders</strong> lists the users who have earned the most points in the past week.</li><li><strong>All Time Leaders</strong> lists the users who have earned the most points since the inception of your community.</li></ul><p>⭐️ <strong>EXAMPLE</strong>: Members can see examples of these leaderboards on our Success Community, <a href="https://success.vanillaforums.com/activity" rel="nofollow noreferrer ugc">https://success.vanillaforums.com/activity</a>.</p><h3 data-id="leaderboard-widgets-on-other-pages">Leaderboard widgets on other pages</h3><p>Leaderboard widgets can be placed on other pages in your community. How you do this depends on which theme you are using. Refer to the appropriate section below to learn how.</p><ul><li><em>Leaderboard Widgets in the Foundation Theme</em></li><li><em>Leaderboard Widgets in Legacy Themes</em></li></ul><h2 data-id="leaderboard-widgets-in-the-foundation-theme">Leaderboard widgets in the Foundation theme</h2><p>In the Foundation theme, leaderboard widgets can be added via Pockets and have two view options: <strong>List</strong> and <strong>Grid</strong>.</p><h4 data-id="list-view">List view</h4><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh4.googleusercontent.com/op3sLGfPXJon1BhBhmbv2fnQ6UJgRdMWr1-dWlCr_ha1rt7PIa57m_xZNrXSN63iJuaLUquqp7eBr5NTY8L84TWqGArtKWBWDHlxvAjK-CD29adEVpLXPPBMDf_vzsBHa3z9O45i" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh4.googleusercontent.com/op3sLGfPXJon1BhBhmbv2fnQ6UJgRdMWr1-dWlCr_ha1rt7PIa57m_xZNrXSN63iJuaLUquqp7eBr5NTY8L84TWqGArtKWBWDHlxvAjK-CD29adEVpLXPPBMDf_vzsBHa3z9O45i" alt="op3sLGfPXJon1BhBhmbv2fnQ6UJgRdMWr1-dWlCr_ha1rt7PIa57m_xZNrXSN63iJuaLUquqp7eBr5NTY8L84TWqGArtKWBWDHlxvAjK-CD29adEVpLXPPBMDf_vzsBHa3z9O45i" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h4 data-id="grid-view">Grid view</h4><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/V45TPCFL5TQV/screen-shot-2021-06-28-at-11-55-52-am.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/V45TPCFL5TQV/screen-shot-2021-06-28-at-11-55-52-am.png" alt="Screen Shot 2021-06-28 at 11.55.52 AM.png" height="308" width="1270" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <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/KOL4FSGOOY17/screen-shot-2021-06-28-at-11-56-02-am.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/KOL4FSGOOY17/screen-shot-2021-06-28-at-11-56-02-am.png" alt="Screen Shot 2021-06-28 at 11.56.02 AM.png" height="480" width="1240" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>3. Specify a Name for your pocket.</p><p>4. Select either <strong>LeaderBoard (List)</strong> or <strong>LeaderBoard (Grid)</strong> as the Type.</p><p>5. Select a Timeframe and a Limit for the widget.</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/LUV3FCWB5RIT/screen-shot-2021-06-28-at-11-56-15-am.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/LUV3FCWB5RIT/screen-shot-2021-06-28-at-11-56-15-am.png" alt="Screen Shot 2021-06-28 at 11.56.15 AM.png" height="784" width="1270" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>6. Click <strong>Save</strong>.</p><p>7. Click the <strong>Placement & Conditions</strong> tab to target an audience and/or area of the community 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><p>✔️ <strong>TIP</strong>: Be sure to test the widget in various locations on your staging site to decide where it looks best; then set it up on your production site.</p><h2 data-id="leaderboard-widgets-in-legacy-themes">Leaderboard widgets in Legacy themes</h2><p>Leaderboards can be added to other pages in your community using the module code: </p><p><code class="code codeInline" spellcheck="false" tabindex="0">{module name="LeaderBoardModule" SlotType="w"}</code></p><p>You can set the leaderboard for different timeframe with the <code class="code codeInline" spellcheck="false" tabindex="0">SlotType</code> variable that is shown above.</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">SlotType="w"</code> produces the Weekly leaderboard</li><li><code class="code codeInline" spellcheck="false" tabindex="0">SlotType="m"</code> produces the Monthly leaderboard</li><li><code class="code codeInline" spellcheck="false" tabindex="0">SlotType="a"</code> produces the All Time leaderboard</li></ul><p>The following code can be added right after {asset name="Panel"} in your theme:</p><p><code class="code codeInline" spellcheck="false" tabindex="0">{if !InSection ("ActivityList")}</code></p><p><code class="code codeInline" spellcheck="false" tabindex="0">{module name="LeaderBoardModule" SlotType="w"}</code></p><p><code class="code codeInline" spellcheck="false" tabindex="0">{/if}</code></p><h2 data-id="additional-widget-options"><strong>Additional widget options</strong></h2><h3 data-id="exclude-admins-and-moderators">Exclude admins and moderators</h3><p>You can choose to exclude administrators and moderators from your leaderboards so that they more accurately reflect <em>user activity</em>.</p><p>To set widget exclusions:</p><p>1. Navigate to <strong>Dashboard > Settings > Addons</strong>.</p><p>2. Scroll down to Badges and click the <strong>settings</strong> icon.</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/AV487XQ3YJOV/screen-shot-2021-06-28-at-11-56-27-am.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/AV487XQ3YJOV/screen-shot-2021-06-28-at-11-56-27-am.png" alt="Screen Shot 2021-06-28 at 11.56.27 AM.png" height="498" width="1272" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>3. Make a selection from the <strong>Exclude users from leaderboards</strong> option.</p><p>4. Click <strong>Save</strong>.</p><h2 data-id="widget-display-settings">Widget display settings</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 Vanilla 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/L54LBQCPSCW4/theme-globalstyles-for-widgets.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/L54LBQCPSCW4/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/2U15PI9PK822/theme-globalstyles-settings.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/2U15PI9PK822/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><h3 data-id="theme-variables">Theme variables</h3><p>If you have a technical resource to implement theme variables, you can customize other elements, such as:</p><ul><li>Borders and border radius</li><li>Background color</li><li>Title background color or image, font, spacing, and alignment</li><li>Count color and font</li><li>Item spacing</li><li>Username color, alignment, and font</li><li>Username margins</li><li>Photo (avatar) size</li></ul><p>Access the following article and click the <strong>Leaderboard</strong> dropdown to expand the section and access the variables.</p><div class="js-embed embedResponsive" data-embedjson="{"body":"This document contains a reference to the various documented theming variables for use in the Theme Editor \"Advanced Settings\" variable pane.","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/370-theme-variable-reference#leaderboard","embedType":"link","name":"Theme Variable Reference - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#leaderboard" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#leaderboard </a> </div><p><br></p> </article> </main>