How to create a custom theme for your embedded or TV leaderboard
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 %}