How to create a custom theme for your leaderboard?

Introduction

Rise themes work using a template system. This gives you control over the design of your Leaderboard.

The Rise themed web page is designed to offer players the following experience:

- view top players on the leaderboard (eg. top 100)

- sign in to the leaderboard

- view players near me - see my position on the leaderboard and nearest players to me eg. if I am #230 then show players #223 to #237

- edit profile - link to social networks, edit name and profile picture for display on the leaderboard

 

How it works

You design your theme template in HTML / CSS.

Where you want Leaderboard content you insert a template tag.

We parse the document and replace the tags with Leaderboard content before displaying to the user.

For example:

<h1>{{ board.name }}</h1>

Would insert the current leaderboard name:

<h1>Gamification Gurus Leaderboard</h1>

Uploading your template

To upload your template you need to place all your asset files on a secure web server or Content Delivery Network. A public folder on Dropbox is suitable.

This must be HTTPS. 

Then add a link to the URL template on Custom Theme on the Display tab of the Leaderboard. 

Draft template

Get the latest draft templates by emailing support directly and requesting the theme templates you want. support@leaderboarded.com

General advice

Try to keep your template ready for your general use and don’t make it too specific to a campaign. For campaign specific adjustments consider using the custom css and custom js sections found in the leaderboard display tab.

Template Tags

Rise uses a template language called Twig.

Tag

Description

Leaderboard


{{ board.name }}

Name of the leaderboard

{{ board.description }}

Description (html)

{{ board.description|striptags }}

Description (plain text)

{{ board.permalink }}

Link to the leaderboard

{{ board.logo.img }}

Logo image src

{{ board.logo.link }}

Logo link

{{ board.owner }}

Publisher of the board (html)

{{ board.owner.name }}

Publisher  Full Name

{{ releases.current.time }}

Date and Time this release was published

{{ releases.previous.time }}

Previous release date / time

{{ board.next_release }}

Next release date / time

{{ board.board_id }}

Leaderboard ID

{{ board.cut }}

Top N players eg 10, 20, 40 or 100 we are showing

{{board.published_by}}

Published by field



Players


{% for player in players %} {% endfor %}

Player loop ascending (1 to 100)

{% for player in players|reverse %} {% endfor %}

Player loop descending (100 to 1)

{{ player.rank.current }}

Player rank

{{ player.rank.previous }}

Previous rank

{{ player.rank.img }}

Outputs an up, down, equal or new arrow

{{ player.rank.change }}

Outputs up, down, equal or new

{{ player.image }}

Profile image

{{ player.name }}

Display name

{{ player.profile }}

Profile link

{{ player.secondary.username }}

Profile username

{{ player.secondary.link }}

Link to secondary username

{{ player.post }}

Most recent score – eg. a tweet

{{ player.score }}

Total score

{{ player.bio }}

Player bio

{{ player.board_note}}

Manager Note

 

 

Variables


{% for column in board.columns %} {% endfor %}

Loop through displayed variables as column headings

{{ column.name }}

Name of the variable


Total score



Scores


{% for score in player.scores %} {% endfor %}

{{ score.name }}

Name of the variable

{{ score.score }}

Variable Score

{{ number_format(score.score, 0) }}

Variable Score (no decimal places)



Links and Logos

You must include a leaderboard logo on your page and the sign in / report this links

{{ lb_logos() }}

Rise logo (currently 424 by 40)

{{ lb_logos('full.medium') }}

Rise logo sizes

{{ signin }}

Sign in url

{{ signout }}

Sign out url

{{ near_me }}

Find your rank

{{ pagination }}

Provides pagination for your leaderboard (must be outside the main player loop)

{{ report }}

Report this Leaderboard link

{{ board.manage_link }}

Link to the manager view of the leaderboard

 

 

Current User


{{ player.name }}

Name of the current player

{{ player.image }}

Profile picture for current player

{{ player.profile }}

Link to the players home page for tracking and reporting

 

 



Technical

 

{{ custom.css }}

Custom CSS for this board

{{ custom.js }}

Custom JS for this board (run when document is ready)

 

 

Modules

 

{{ modules.feed }}

Pulls in an activity feed module

{{ modules.sources.widget }}

List of data sources (mandatory)

{{modules.sources.list}}

Array of data source names you can loop through

State Flags

Helper flags so you can show/hide the right stuff

{% is_logged_in %}

True if we have a logged in user

{% is_owner %}

Is_owner, Is_not_owner

{% showing_near_me %}

True if we are showing ranks near the signed in player

         

Twig filters

You can also apply Twig filters you can use:

·       Converturls - {{ player.bio | converturls }}  - will show player bio and convert any URLs into hypertext links

Rise minimum requirements

Please bear in mind the following rules when creating your template:

1.     It should be clear that you are the publisher of the leaderboard while Rise is the technology that you are using to power your leaderboard.  Rise must always be a sub-brand.

2.     As publisher you are responsible for the accuracy of your data and the ranks displayed.

3.     A Powered by Rise logo should appear on the page, ideally “above the fold”, and be of reasonable size.

4.     The Powered by Rise logo should link to http://www.rise.global.

5.     The {{report}} | “report this leaderboard” template tag must also be somewhere on the page.

Useful snippets

The following are some useful snippet code to use in your themes.

Header Meta Tags

<title> {{board.name}} </title>

Nav

              <li {% if not showing_near_me %}class="active"{% endif %}><a href="{{ board.permalink }}">Top {{ board.cut }}</a></li>

              <li {% if showing_near_me %}class="active"{% endif %}><a href="{{ near_me }}">Near Me</a></li>

              {% if is_owner %}

              <li><a href="{{ board.manage_link }}">Manage</a></li>

              {% endif %}

              {% if is_logged_in %}

                     <li><a href="{{signout}}">Sign Out</a></li>

              {% else %}

                    <li><a href="{{signin}}">Sign In</a></li>

                   

              {% endif %}

Format the score nicely

{{ number_format(player.score, 0) }}

Format to a specific time zone

{{ releases.current.time | date (‘m/d/Y h:i:s’,’America/New_York’)}}

List the sources

                    <div class="data-sources">

                              {% for source in modules.sources.list %}

                                                  <span class="pull-left"><a href="http://www.{{source}}.com"><img src="https://www.leaderboarded.com/assets/v3/img/platform-icons/{{source}}-32.png"/></a></span>

                              {% endfor %}

                             

                    </div>

Feedback and Knowledge Base