Themes

Start from a theme and adjust it until it fits your club. Every choice is a CSS variable: set it once on your site and every widget follows.

Themes

From your club colours

Give one or two colours of your club; we turn them into a readable theme.

Main colour Second colour

Dark background

Set everything yourself

Colours

Background

Cards

Own team, selectors

Every other row

Lines

Strong lines

Text

Secondary text

Table header

Header text

Accent (own club)

Text on accent

Links

Win

Text on win

Loss

Text

Font

Font for numbers

Text size

Title size

Shape

Rounding

Border around the widget

Space inside

Preview with real data

Dark background

Legibility

Text on background 16,5:1 · Easy to read
Secondary text 5,9:1 · Easy to read
Table header 7,9:1 · Easy to read
Links 7,9:1 · Easy to read
Win 5,4:1 · Easy to read
Accent 7,9:1 · Easy to read

Your theme

:root {
  --ppong-bg: #ffffff;
  --ppong-surface: #ffffff;
  --ppong-sunken: #fff1c2;
  --ppong-stripe: #f2f5fa;
  --ppong-line: #d5dbe5;
  --ppong-line-strong: #8a96a8;
  --ppong-text: #1a1f29;
  --ppong-muted: #5a6577;
  --ppong-head-bg: #1d4f9e;
  --ppong-head-text: #ffffff;
  --ppong-accent: #1d4f9e;
  --ppong-on-accent: #ffffff;
  --ppong-link: #1d4f9e;
  --ppong-win: #1f7a3f;
  --ppong-on-win: #ffffff;
  --ppong-loss: #b8261b;
  --ppong-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ppong-font-num: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ppong-size: 14px;
  --ppong-title-size: 17px;
  --ppong-radius: 4px;
  --ppong-border: 1px;
  --ppong-pad: 12px;
}

Put this in your site’s CSS, for example under Appearance › Customize › Additional CSS in WordPress. It applies to every widget on your site.

Link to this theme

https://widgets.ppong.be/en/themes/#theme=eyJiZyI6IiNmZmZmZmYiLCJzdXJmYWNlIjoiI2ZmZmZmZiIsInN1bmtlbiI6IiNmZmYxYzIiLCJzdHJpcGUiOiIjZjJmNWZhIiwibGluZSI6IiNkNWRiZTUiLCJsaW5lLXN0cm9uZyI6IiM4YTk2YTgiLCJ0ZXh0IjoiIzFhMWYyOSIsIm11dGVkIjoiIzVhNjU3NyIsImhlYWQtYmciOiIjMWQ0ZjllIiwiaGVhZC10ZXh0IjoiI2ZmZmZmZiIsImFjY2VudCI6IiMxZDRmOWUiLCJvbi1hY2NlbnQiOiIjZmZmZmZmIiwibGluayI6IiMxZDRmOWUiLCJ3aW4iOiIjMWY3YTNmIiwib24td2luIjoiI2ZmZmZmZiIsImxvc3MiOiIjYjgyNjFiIiwiZm9udCI6InN5c3RlbS11aSwgLWFwcGxlLXN5c3RlbSwgXCJTZWdvZSBVSVwiLCBSb2JvdG8sIEFyaWFsLCBzYW5zLXNlcmlmIiwiZm9udC1udW0iOiJzeXN0ZW0tdWksIC1hcHBsZS1zeXN0ZW0sIFwiU2Vnb2UgVUlcIiwgUm9ib3RvLCBBcmlhbCwgc2Fucy1zZXJpZiIsInNpemUiOiIxNHB4IiwidGl0bGUtc2l6ZSI6IjE3cHgiLCJyYWRpdXMiOiI0cHgiLCJib3JkZXIiOiIxcHgiLCJwYWQiOiIxMnB4In0=

Keep this link to adjust your theme later.

Use in the configurator