TechHub@Google Campus, 4-5 Bonhill Street, London EC2A 4BX +44 20 3286 1568 www.leaderboarded.

com

Custom Themes
Document Version 1.10

Introduction
Leaderboarded themes work using a template system. This gives you control over the design of your Leaderboard. The Leaderboarded 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.

Leaderboarded Ltd is a company registered in England & Wales number 4275579

TechHub@Google Campus, 4-5 Bonhill Street, London EC2A 4BX +44 20 3286 1568 www.leaderboarded.com Then add a link to the URL template on Custom Theme on the Display tab of the Leaderboard.

Draft template
You can download a draft template to work with at http://www.leaderboarded.com/assets/text/default_theme.html

Testing your template

A theme testing tool is available at: https://www.leaderboarded.com/developer/index

General advice
Try to keep your template ready for your general use and dont 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
Leaderboarded uses a template language called Twig. Tag Leaderboard {{ board.name }} {{ board.description }} {{ board.description|striptags }} {{ board.permalink }} {{ board.logo.img }} {{ board.logo.link }} {{ board.owner }} {{ board.owner.name }} {{ releases.current.time }} {{ releases.previous.time }} {{ board.next_release }} {{ board.board_id }} {{ board.cut }} {{board.published_by}} Players {% for player in players %} {% endfor %} Description Name of the leaderboard Description (html) Description (plain text) Link to the leaderboard Logo image src Logo link Publisher of the board (html) Publisher Full Name Date and Time this release was published Previous release date / time Next release date / time Leaderboard ID Top N players eg 10, 20, 40 or 100 we are showing Published by field

Player loop ascending (1 to 100)

Leaderboarded Ltd is a company registered in England & Wales number 4275579

TechHub@Google Campus, 4-5 Bonhill Street, London EC2A 4BX +44 20 3286 1568 www.leaderboarded.com {% for player in players|reverse %} {% endfor %} {{ player.rank.current }} {{ player.rank.previous }} {{ player.rank.img }} {{ player.rank.change }} {{ player.image }} {{ player.name }} {{ player.profile }} {{ player.secondary.username }} {{ player.secondary.link }} {{ player.post }} {{ player.score }} {{ player.bio }} {{ player.board_note}} Variables {% for column in board.columns %} {% endfor %} {{ column.name }} Player loop descending (100 to 1) Player rank Previous rank Outputs an up, down, equal or new arrow Outputs up, down, equal or new Profile image Display name Profile link Profile username Link to secondary username Most recent score eg. a tweet Total score Player bio Manager Note

Loop through displayed variables as column headings 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 {{ lb_logos() }} {{ lb_logos('full.medium') }} {{ signin }} {{ signout }} {{ near_me }} {{ pagination }} {{ report }} {{ board.manage_link }} Current User {{ player.name }} You must include a leaderboard logo on your page and the sign in / report this links Leaderboarded logo (currently 424 by 40) Leaderboarded logo sizes Sign in url Sign out url Find your rank Provides pagination for your leaderboard (must be outside the main player loop) Report this Leaderboard link Link to the manager view of the leaderboard

Name of the current player

Leaderboarded Ltd is a company registered in England & Wales number 4275579

TechHub@Google Campus, 4-5 Bonhill Street, London EC2A 4BX +44 20 3286 1568 www.leaderboarded.com {{ player.image }} {{ player.profile }} Profile picture for current player Link to the players home page for tracking and reporting

Technical {{ custom.css }} {{ custom.js }}

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

Modules {{ modules.feed }} {{ modules.sources.widget }} {{modules.sources.list}} State Flags {% is_logged_in %} {% is_owner %} {% showing_near_me %}

Pulls in an activity feed module List of data sources (mandatory) Array of data source names you can loop through Helper flags so you can show/hide the right stuff True if we have a logged in user Is_owner, Is_not_owner True if we are showing ranks near the signed in player

Leaderboarded 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 Leaderboarded is the technology that you are using to power your leaderboard. Leaderboarded 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 Leaderboarded logo should appear on the page, ideally above the fold, and be of reasonable size. 4. The Powered by Leaderboarded logo should link to http://www.leaderboarded.com. 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.
Leaderboarded Ltd is a company registered in England & Wales number 4275579

TechHub@Google Campus, 4-5 Bonhill Street, London EC2A 4BX +44 20 3286 1568 www.leaderboarded.com

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>

Leaderboarded Ltd is a company registered in England & Wales number 4275579