Customizing your leaderboards

Geosophic’s leaderboards can be customized to match your games look and feel. Our leaderboards are developed using HTML, so you can download our default leaderboard template and edit it easily using LESS or CSS to suit your needs.

In this zip file you will find the following content:

  • leaderboard.html: an example of leaderboard that would be displayed inside your games.
  • editable/: on this folder you will find the files you can add and edit to customize your desired style. By default, you’ll find here:
    • lb_bg.png: Default background image.
    • style.less: We are LESS lovers and that is why we are offering the style file on this format, especially for allowing the use of variables, nested rules and ease of compatibility with different browsers.
    • style.css: This file represents the compilation of ‘style.less’ and is the file you should use if you don’t want to use LESS directly.
  • resources/: here there are some files needed to make our leaderboards work.

Let’s start!

First of all, select whether you want to work with LESS or CSS. On leaderboard.html you can comment/uncomment lines 10 to 15 to configure the use of one of them. By default LESS is selected.

<!-- Use following lines to use LESS files (DEVELOPMENT ONLY) -->
<link rel="stylesheet/less" type="text/css" href="editable/style.less">
<script src="resources/less-1.3.1.min.js" type="text/javascript"></script>

<!-- Use following line to use CSS files -->
<!--<link rel="stylesheet" type="text/css" href="editable/style.css">-->

Then prepare your own style

This file is divided into three main parts: the variables, layout and styles.

Variables

Here there are the variables used to configure color of background, texts, table borders… You can edit just @base and @color and mostly all the aspect of the leaderboard will change.

/* Variables */
@base:              #1e1d1d;
@color:             #ffffff;
@bodyBackground:    lighten(@base, 20%) url('lb_bg.png');
@tabBackground:     darken(@base, 10%);
@tabColor:          @color;
@tabSelectedBackground: darken(#90d400, 5%);
@tabBorder:         #333;
@tableColor:        @color;
@tableBackground:   fade(#000, 30%);
@tableBorder:       lighten(#000, 20%);
/* END Variables */

Here you can see an example:

Geosophic default leaderboard

Geosophic default leaderboard

Changing base color to #0072b1

Changing base color to #0072b1

Styles

This is the core of customization. To start you can set the default font and color you want to use and set the main background in body tag.

/* Base */
body {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    text-align: center;
    background: @bodyBackground;
    color: @color;
}

Then select how tabs menu will look like. The main style is applied over each link <a>, and you can select how it would look when selected and hover (although on mobile hover is not used).

/* Location tabs menu */
.menu {
    li {
        a {
            border: 1px solid @tabBorder;
            .gradient(@tabBackground, @tabBackground, saturate(@tabBackground, 10));
            color: @tabColor;
            font-size: 14px;
            font-weight: bold;
        }

        &.selected a {
            .gradient(@tabSelectedBackground, @tabSelectedBackground, saturate(@tabSelectedBackground, 10));
        }

        &:hover a {
            background: fade(@tabSelectedBackground, 70%);
        }
    }
}

/* END Location tabs menu */

Finally set styles for result table.

  • .lbTitle correspond with the title that appears just below tabs menu, ‘Scores for Adeje’ in the previous screenshot.
  • table.leaderboard correspond with the ranking table itself. Here you can:
    • Set different style for even or odd rows.
    • Highlight the style for the row of .current-user.
    • If your leaderboard has a label (that you can set on game leaderboards settings in the dashboard), its style on class .lb-header-label.
/* Leaderboard content by location */
.lbTitle {
    text-align: center;
    margin: 1.5em 0;
}

table.leaderboard {
    text-align: left;
    font-size: 14px;
    font-family: courier;
    color: @tableColor;

    tr {
        &:nth-child(even) {
            background: @tableBackground;
        }

        &:nth-child(odd) {
            background: lighten(@tableBackground, 20%);
        }

        &.current-user {
            td {
                font-size: 1.2em;
            }
        }

        .position {
            text-align: center;
        }

        .value {
            text-align: right;
        }
    }

    th {
        border: 1px solid @tableBorder;
        padding: 7px 15px;
        background: @tableBackground;

        &.lb-header-label {
            text-align: center;
        }
    }

    td {
        border: 1px solid @tableBorder;
        padding: 7px 15px;
    }
}
/* Leaderboard content by location */

Just edit style.css, the structure is the same than LESS file, so you might be able to identify each block with their CSS code.

I have everything ready, what should I do now?

We are working on an automatic system to upload and set your style on your leaderboards, but on the meanwhile, please, send your modified editable/ folder to support@geosophic.com and we will prepare it for you.

For a better performance we will upload CSS files to production. We will appreciate if you tell us if your style.css is updated (you compiled LESS file or you just edited on CSS), or if we should do it (if you were using just LESS).