How to create a custom theme for your embedded leaderboard

As long as you include the "Powered by Rise" message somewhere within your embed you can completely customise the embed code for your site.

To do this:
  • First make sure you have at least Bronze access (this is free - just ask the Rise support desk to upgrade you)
  • Create your embed html code (it uses a combination of HTML, CSS and TWIG) see the available tags below and start customising it as you would prefer.  We'd be happy to email you an example of a custom theme.
  • Once you're happy go to Embed settings and choose Custom  (this option only appears if you have Bronze access or above)
  • Provide a URL link to your custom embed code and hit save.

  • Now your embed will use your embed code to display the leaderboard.


To ensure speedy performance, Rise takes a copy of your code and stores it on our server. So each time you want to make a change to your code you'll need to hit the refresh button on the Embed Settings page so Rise takes the latest copy to use when serving your embed.

Here's a minimum custom embed theme code for you to get started with:
<table>
    {% for player in players %}
        <tr>
            <td>{{ player.name }}</td>
            <td>{{ lb_score_formatter(player.score, board.total_score_format) }}</td>
        </tr>
    {% endfor %}
</table>
<small>Powered by <a href="https://www.rise.global">Rise</a></small>

A list of custom theme tags and commands is below:

{{ board.name }}

Name of the Rise board

{{ board.description }}

Description (html)

{{ board.description|striptags }}

Description (plain text)

{{ board.permalink }}

Link to the Rise Board



{{ 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 }}

Board 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

 {{ lb_score_formatter(player.score, board.total_score_format) }}

Formatted Total Score 

Metrics

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

Loop through visible metrics   as column headings

{{ column.name }}

Name of the metric

{{ board.score_display_name }}

Total score display name

Scores

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

{{ score.name }}

Name of the metric

{{ score.score }}

Metric Score

{{ lb_score_formatter(score.score, score.score_format)    }}

Formatted Score

Technical

 

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

{{ custom.css }}

Custom CSS for this board

{{ custom.js }}

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



Displaying Teams and Divisions

You can also show which division or team is associated with a player. These are stored in the player.tags array:
 {% if (player.tags) %}
    <p>
        {% for division,team in player.tags %}
            <span class="badge" title="{{ division }}">{{ team }}</span>
        {% endfor %}
    </p>
{% endif %}

Feedback and Knowledge Base