How to create a custom theme for your embedded or TV leaderboard

← Sharing
As long as you include the "Powered by Rise" logo and link to www.rise.global  somewhere within your embed you can completely customise the embed code for your site. [Download Powered by Rise logo]

To do this:
  • 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.  Here's a custom theme example you can download to get started with.
  • Once you're happy go to Embed settings and choose Custom
  • 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.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

(thinking…)