Customisation

Customisations available for the Medal Table widget

960960

Customisable elements in the Medal Table widget

General

❗️

Mandatory keys

Keys in bold are required

<div class="pa-medaltable" data-auth-token="<your embed token>" data-games-code="OWG2018" data-font-size="1.25rem"></div>
<script async src="//olympics-embed.pamedia.io/static/medal-table.js" charset="UTF-8"></script>
KeyDescriptionExamples
data-auth-tokenThe token used to authorise the embed (note: this is typically only permitted for whitelisted domains)hs6iCFXsTz8ok3sE
data-games-codeA valid Olympics games code; used to filter API callsOWG2018
data-font-familyOne or more comma-separated font familiesHelvetica, Arial, sans-serif
data-font-sizeMain font size; may be any valid CSS size42px or 1.5rem
data-font-colourMain font colour; may be any valid CSS colour, #00ff00, #0f0, green
data-font-weightMain font weight; may be any valid CSS font weight700 or bold

Medals

There are four suites of medal icons for use across both widgets. Within the medal table, your chosen icons will display in the header to denote the medal colours.

256256
KeyDescriptionExample
data-medal-icon-typeThe set of medal icons to be used in the widget; may be one of default, inverted, round, or blue-ribboninverted

Header

KeyDescriptionExamples
data-header-heightHeight of the header; may be any valid CSS size42px or 1.5rem
data-header-backgroundHeader background colour; may be a valid CSS colour for a solid background, or two comma-separated CSS colours for a gradient, #ff0000 or #300,#foo
data-header-font-colourHeader font colour, #00ff00, #0f0, green
data-header-font-familyHeader font familyHelvetica, Arial, sans-serif
data-header-font-sizeHeader font size2em
data-header-font-weighteader font weight100

Body

KeyDescriptionExamples
data-row-backgroundTable row or list item background colour; may be a single valid CSS colour, or two comma-separated CSS colours for alternating odd/even row colourswhite, or #000,#333
data-row-border-colourTable row or list item border colour; may be any valid CSS colour, #00ff00, #0f0, green
data-row-border-widthTable row or list item border width; may be any valid CSS size2px

Footer

KeyDescriptionExample
data-footer-font-colourFooter font colour; may be any valid CSS colour, #00ff00, #0f0, green

Set a default country

A default country can be set in the medal table widget which will then be highlighted when the widget is loaded.

KeyDescriptionExamples
data-org-codeA valid Olympics country code; will pin the given country's medal row to the top of the tableUSA or JPN
data-row-highlight-backgroundBackground colour of the highlighted row, #00ff00, #0f0, green
data-row-highlight-font-colourFont colour of the highlighted row, #ffffff, #fff, white

Having problems?

See our FAQ Page