How To Style Your Leaderboard

Google Campus, 4-5 Bonhill Street, London EC2A 4BX 020 3286 1568 www.leaderboarded.
com
How to style your leaderboard

Document Version: 1.00 Features available to: Bronze edition and above The following guide outlines ways you can style your Leaderboard using the Leaderboarded service and default themes. This is a draft document and is subject to change. Customising the look and feel of your leaderboard is important to ensure it resonates with your players. Leaderboarded offers two design customisation options: 1. Leaderboarded standard template using your assets 2. Your own template with the leaderboard added in (available to customers with Palladium and above editions) In this document we cover section (1) - adding your assets to the Leaderboard standard templates.
Leaderboard standard template

Leaderboard standard templates are professionally designed templates that are responsive and SEO friendly. Four templates are currently provided: 1. Playground an animated template designed for display on a plasma screen, such as in reception, the canteen or at an event 2. Cerulean, Designa and Definitive responsive templates designed for sharing and viewing online via the web. Standard templates can have the following additions as per the table below Template / Feature Cerulean, Designa, Definitive Playground Custom Logo Yes Tweet feed No RSS images Yes RSS links Yes
Yes
Yes
Yes
No
RSS images and RSS links are pulled in from a Tumblr blog RSS feed.
Customisation options
You have the following customisation options available:
Leaderboarded Ltd is a company registered in England & Wales number 4275579
Google Campus, 4-5 Bonhill Street, London EC2A 4BX 020 3286 1568 www.leaderboarded.com Choose a theme Add a Custom Logo and Link Add your own CSS Add your own JS Add your own navigation links Add your own RSS feed of content from a Tumblr blog
Choose a theme
The themes available are: Cerulean Definitive
Designa
Playground
Cerulean, Definitive and Designa are responsive themes designed for web and mobile use. Playground is a display theme with animation designed for showing on a monitor or screen. Optimum resolutions are: 1920px x 1200px and 1920 x 1080px. The theme should degrade gracefully at lower resolutions. The Playground theme will show a tweet feed at the bottom of the screen as well as any tweets by players.
Google Campus, 4-5 Bonhill Street, London EC2A 4BX 020 3286 1568 www.leaderboarded.com
Add a custom logo and link

You can add a custom logo to your template to appear in the top left corner, this will brand the leaderboard as your own. The dimension restrictions vary by theme: Theme Max-Width (pixels) Playground 320 Cerulean 200 Definitive 150 Designa 350
Max-Height (pixels) 300 24 100 70
To add a custom logo you must upload the image to your preferred cloud and use a public link. For example a link to a file in a dropbox public folder: eg. https://dl.dropbox.com/u/59931516/INFERNO%20logo.png Your link should go to your website and should not mislead the user.
Add your own CSS code

Feature available to Palladium edition and above If you are a web developer, you can style the leaderboard further with your own CSS code which is inserted at the end of the <head> section in the HTML. For example the team at RPMERA restyled the Playground theme to have a biker image behind their rpmera leaderboard
This was achieved using the following CSS code:

.page_container { background: url(https://dl.dropbox.com/u/70491852/Rico%20images/bg_bike.j pg) center center no-repeat; background-size: cover; margin: 0px !important; width: 100% !important; } .details_container { margin-left: 250px; } .container_12, { background-color: transparent; } .backgroundImage { opacity: 0.4; } BODY { background-color: transparent !important; } .embedded_container, .description, .name H1 { background: rgba(243, 243, 243, 0.4) !important; padding: 5px !important; }
Add your own Javascript code

Feature available to Palladium edition and above If you are a web developer you can add your own javascript code to make adjustments as you require. In this example we changed the names of the first ranks on the Team GB Twitter leaderboard to Gold, Silver and Bronze. The code for this was:
$("TD.rank").slice(0,1).html('GOLD'); $("TD.rank").slice(1,2).html('SILVER'); $("TD.rank").slice(2,3).html('BRONZE');
Javascript code runs only when document is ready. View source for details.
Add your own navigation links (labs feature)

Feature available to Palladium edition and above Using the RSS content feed it is possible to add navigation links to the top of your page on some themes. To add links create a Tumblr RSS feed and add links as content posts. Then paste the RSS feed URL into the field on the Leaderboard display options tab.
Add your own RSS feed content (labs feature)

Feature available to Palladium edition and above Additionally you can add RSS feed content to themes. Depending on the theme the blog post content will be shown differently:
Theme Playground
RSS content used Image only
Cerulean Definitive Designa
Image copy and title Image, copy and title Image and Copy only
Where displayed After ten countdown animations in main animation bar Right hand panel Below leaderboard Right hand panel

How To Style Your Leaderboard

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

How To Style Your Leaderboard

Enviado por

Direitos autorais:

Formatos disponíveis

Google Campus, 4-5 Bonhill Street, London EC2A 4BX 020 3286 1568 www.leaderboarded.

How to style your leaderboard

Leaderboard standard template

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

Add a custom logo and link

Max-Height (pixels) 300 24 100 70

Add your own CSS code

This was achieved using the following CSS code:

Add your own Javascript code

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

Add your own navigation links (labs feature)

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

Add your own RSS feed content (labs feature)

RSS content used Image only

Cerulean Definitive Designa

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

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

Você também pode gostar