Thèmes

Pars d’un thème et ajuste-le aux couleurs de ton club. Chaque choix est une variable CSS : tu la mets une fois sur ton site et tous les widgets suivent.

Thèmes

À partir des couleurs du club

Donne une ou deux couleurs de ton club ; nous en faisons un thème lisible.

Couleur principale Deuxième couleur

Fond sombre

Tout régler soi-même

Couleurs

Fond

Cartes

Ton équipe, listes de choix

Une ligne sur deux

Lignes

Lignes fortes

Texte

Texte secondaire

En-tête des tableaux

Texte de l’en-tête

Accent (ton club)

Texte sur l’accent

Liens

Victoire

Texte sur la victoire

Défaite

Texte

Police

Police des chiffres

Taille du texte

Taille du titre

Forme

Arrondi

Bordure du widget

Espace intérieur

Aperçu avec de vraies données

Fond sombre

Lisibilité

Texte sur le fond 16,5:1 · Bien lisible
Texte secondaire 5,9:1 · Bien lisible
En-tête des tableaux 7,9:1 · Bien lisible
Liens 7,9:1 · Bien lisible
Victoire 5,4:1 · Bien lisible
Accent 7,9:1 · Bien lisible

Ton thème

: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;
}

Mets ceci dans le CSS de ton site, par exemple dans Apparence › Personnaliser › CSS additionnel sous WordPress. Il vaut pour tous les widgets de ton site.

Lien vers ce thème

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

Garde ce lien pour retoucher ton thème plus tard.

Utiliser dans le configurateur