Custom Theme functionality is available for Rise approved business partners. This allows you to fully customise the display of a Rise leaderboard for you or your clients.


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


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 data-fr-src="https://www.leaderboarded.com/assets/v3/img/platform-icons/{{source}}-32.png"/></a></span>

                              {% endfor %}

                             

                    </div>


Common Errors

If you keep getting the message: "Please make sure the file exists, is accessible and is valid HTML" then check:
1. That your file is on a publically accessible URL 
2. It has not been corrupted (some providers convert > to &gt; for example)
3. The filename ends with .html rather than .twig