Leaderboard Template | Communifire Documentation

Display a leaderboard on your homepage to publicly reward engagement and offer additional incentives for people that reach a top level of contribution.

Add CSS Overrides

1. Click the gear icon > Control Panel > System > CSS Overrides.
2. Add the following code, at the bottom.

   /*Style for Leaderboard template*/
   .x-leaderboard{list-style:none;margin: 0;}
   .x-leaderboard li{margin-bottom: 0;overflow: hidden;box-sizing: border-box;padding: 15px 20px;border-top: 1px solid #efefef;}
   .x-leaderboard li .x-points{float:right;text-align: right;margin-top: 15px;}
   .x-leaderboard li .x-points .num{font-size:20px;}
   .x-leaderboard li .x-points .inf{display:block;margin-top: 5px;}
   .x-leaderboard li .x-rank{font-size: 40px;display: inline-block;width: 50px;text-align: center;height: 75px;float: left;line-height: 75px;width: 75px;}
   .x-leaderboard li .x-person{float:left;margin-left: 30px;}
   .x-leaderboard li .x-person .x-avatar{float: left;}
   .x-leaderboard li .x-person .x-avatar a{display:block;}
   .x-leaderboard li .x-person .x-avatar a img{display: block;border-radius: 400px;max-width: 75px;}
   .x-leaderboard li .x-person .x-name{float: left;line-height: 75px;font-size: 20px;margin-left: 15px;}
   .x-leaderboard li .x-person .x-name a{color:inherit;}
   
   @media (max-width: 767px) {
       .x-leaderboard li{padding: 10px 0px;}
       .x-leaderboard li .x-rank,
       .x-leaderboard li .x-person .x-name,
       .x-leaderboard li .x-points .num{font-size:15px}
       .x-leaderboard li .x-points{margin-top: 0;line-height: normal;}
       .x-leaderboard li .x-points .num{font-size:13px;}
       .x-leaderboard li .x-points .inf{font-size:13px;}
       .x-leaderboard li .x-rank{width: 30px;height: 45px;line-height: 45px;text-align: left;}
       .x-leaderboard li .x-person{margin-left: 0px;}
       .x-leaderboard li .x-person .x-name{line-height:50px;margin-left: 10px;}
       .x-leaderboard li .x-person .x-avatar a img{max-width:45px;}
   }

3. Click Save CSS Overrides.

Add Template

1. Click System > Page Builder Templates.
2. Click Add a new template.
3. Enter Leaderboard as the Template name.
4. Select People as the Widget Type.
5. Select Top People List as the Widget Sub Type.
6. In Resource Keys CSV, enter GlobalPointText.
7. In the editor, add the following code.

   <div class="axero-widget {{CustomCSSClass}}{{#if HideContainerBorder}} axero-widget-no-border{{/if}}">
       {{#if ShowWidgetHeader}}
       <div class="axero-widget-header">
           <h3>{{{WidgetTitle}}}</h3>
       </div>
       {{/if}}
       <div class="axero-widget-content axero-widget-content-padded">
           <ul class="x-leaderboard">
           {{#each Contents.AllTime}}
           <li>
               <div class="x-points">
                   <div class="num">{{Points}} {{../Resources.GlobalPointText}}</div>
                   <div class="inf"><img alt="{{{RankName}}}" src="{{RankImage}}">&nbsp;<span class="axero-user-rank-name">{{{RankName}}}</span></div>          
               </div>
               <div class="x-rank">
                   {{math @index "+" 1}}
               </div>
               <div class="x-person">
                   <div class="x-avatar">
                       <a class="axero-user-card-link" href="{{ProfileURL}}" title="{{{UserInfoDisplayName}}}" data-user="{{UserID}}">
                           <img alt="{{{UserInfoDisplayName}}}" src="{{AvatarImageURL}}">
                       </a>
                   </div>
                   <div class="x-name">
                       <a class="axero-user-card-link" href="{{ProfileURL}}" data-user="{{UserID}}">{{{UserInfoDisplayName}}}</a>                         
                   </div>
               </div>
           </li>
           {{/each}}
           </ul>
       </div>
   </div>

8. Click Save Template.

How to Use the Template

1. Add or edit a Page Builder page in Control Panel > System > Page Builder.
2. Click the Layouts tab and add a layout onto the page.
3. Click the Widgets tab.
4. Drag a People widget onto the page. This template is best used in wider columns - 6 or greater.
5. On the People widget, click the gear icon > Edit properties.
6. Update the widget Title.
7. Select Top People List as the Widget Type.
8. Select an option in the Default tab menu to set the leaderboard date range.
9. Click Template.
10. Select the Leaderboard template.
11. Click Save Widget.
12. Click Publish changes.
13. Click Go to page.