How to customize your leaderboard

Keepthescore.com offers a range of customization options. This guide will show you how to change the colors, fonts, layout and behavior of your leaderboard.

Making your leaderboard look like one of the examples below is pretty straightforward. Let's look at how it's done.

1. Creating a leaderboard

First of all, you'll need to create a leaderboard. If you have already done that, skip to the next step

1. Click on the above 👆 button and enter some basic data about your leaderboard.
2. Enter the participant names in the appropriate field.
3. Click on "CREATE LEADERBOARD" and you will see your newly created leaderboard.
4. That's it, you're done 🎉

You can change the scores using the page you are now on.

Note: The post is about leaderboards, but everything described here also applies to scoresheets, goal trackers, and counters.

2. The Control Panel

Once you have created your leaderboard, you will see the "Control panel" at the top. This is where you can change the appearance and behavior of your board.

Click on the SETTINGS button in the control panel. This will open up the settings dialog.

3. The Settings dialog

In this dialog, there is a list of sections on the left, each of which allows you to open a different section.

After changing anything in this dialog, you will see a preview on your board. However, you still need to click on the SAVE CHANGES button to actually apply these changes. Once you have saved your changes, they will become visible on the public view of your board.

If you click CANCEL, nothing will be changed and your board will revert to its original settings.

Let's take a look at each section in turn.

1. Layout and Design

Here's what you can change in this section:

Select a theme from the dropdown: A new theme is the quickest way of changing the look of your board. Changing the theme will change the colors, fonts and background image all at once.

Add a title and description. The title and description will be shown at the top of your board. This can be used, for instance, to show rules and instructions if you are running a contest. You can give your description text some basic formatting like bold, italics, or adding a table.

Upload a board logo. If you want to brand your board, adding a logo is a great way of doing so. Once a logo is uploaded, you will also be able to choose its width on your board.

2. Colors and fonts

Changing colors and fonts is essential if you want to align the board with your corporate image. In this section, you can do both.

You can also set colors for players that have a specific rank, e.g., for first, second and third place. To do so, click ADD NEW RANK COLOR at the bottom.

NOTE: You can also set fixed colors for each player. Do this by closing the setting dialog and clicking on the player's name in the leaderboard. This is also how you set a profile image per player.

3. Background

This is where you can set a background image or texture for your board. You can choose an image from the gallery or upload your own.

When uploading your own image, be sure to understand all the options in the "Image Fit Options" dropdown. These options will have a big effect on how good the result looks. The options are as follows

• Fill Space: Covers the entire area with your image and may crop parts of it.
• Original Size: Displays your image at its original size.
• Fit Entire Image: Fits your entire image into the space, ensuring all parts are visible.
• Fit to Width: Covers the full width of the container with your image, adjusting the height to maintain the aspect ratio.
• Stretch to Fill: Stretches your image to fill the entire container, possibly distorting it.
• Tile Image: Repeats your image across the space to create a tiled effect.

4. Rankings and scores

This is where you can change how your board behaves.

NOTE: Depending on the type of board you choose, not all of these options may be available.

Choose a format for the scores: You can choose between integer scores (the default), 1 or 2 decimal places, or two time formats (hours, minutes, seconds or minutes, seconds, milliseconds). Please note that you should avoid changing the format if you've already entered scores, because the scores will change.

Score suffix and prefix: Allows you to add a text that always appears before (prefix) or after (suffix) all scores on your leaderboard. If your scores have units (e.g. "miles", "km" or "deals closed"), you would add them here.

Sorting of players: This dropdown allows you to specify how players should be sorted: ascending, descending or alphabetical.

Ranking of players: This dropdown allows you to change how ranks behave:

• Tied ranking: players with the same score are given the same rank
• Sequential ranking: each player is given a unique sequential number based on their position in the list, irrespective of tied scores

Increment buttons: These are the blue buttons that are visible for each player on the admin view of your leaderboard. You can change the values of these buttons here or hide them entirely by clicking on "RESET".

5. Engagement

This is where you change some more advanced settings.

Enable live chat: This is switched on by default. It allows people to add comments (including GIFs and images) to the bottom of your leaderboard. You can switch it off here.

Show a search filter: When this is enabled, a box is displayed at the top of your board allowing people to search all the names on the board. This is useful when you have a large number of players and people want to find out what their score or rank is.

Show time elapsed sind last update: This displays a text at the top of your board telling people when the last change was made to the board (e.g. "Last updated 28 minutes ago")

Show box with overall total for the whole board: When this is activated a total score for all players on the leaderboard is shown at the top.

Show Progress bar: When you enter a value here, it will display a progress bar at the top of your board. The progress shown is the sum of all scores towards the value you entered here.

Automatically scroll public board: If you are showing your leaderboard in a public setting and not all names fit, then this option is for you: it scrolls all the way through the names and then restarts at the top.