SolidConnect Scoreboard Displays

This project is to help designers and CSS developers create and test displays for SolidConnect Scoreboards.

Purpose

  • Provide fixed HTML scoreboard templates for supported sports with example data.
  • Show how display design work should happen in CSS.
  • Provide example themes that demonstrate different scoreboard design approaches via CSS.

Core Rules

  1. HTML structure is fixed and must not be changed.
  2. CSS files define the designs and are the place to build new displays.
  3. Theme loading is query-string based (?theme=<theme-name>) and maps to files in assets/displays/<sport>/.

Project Structure

.
├── index.html                              # Home page with featured display examples
├── documentation.html                      # Browser-friendly project documentation
├── australianrules.html                    # Fixed Australian Rules scoreboard markup
├── cricket.html                            # Fixed Cricket scoreboard markup
├── soccer.html                             # Fixed Soccer scoreboard markup
├── rugbyunion.html                         # Fixed Rugby Union scoreboard markup (same design as Soccer)
├── rugbyleague.html                        # Fixed Rugby League scoreboard markup (cloned from Rugby Union)
├── fieldhockey.html                        # Fixed Field Hockey scoreboard markup (same design as Soccer)
├── gaelicfootball.html                     # Fixed Gaelic Football scoreboard markup (same design as Australian Rules)
├── test.html                               # Generic test harness for shared display CSS
├── assets/
│   ├── main.css                            # Shared base/reset styles for scoreboard pages
│   ├── index.css                           # Styles for the home/documentation pages
│   └── displays/
│       ├── australianrules/               # Australian Rules theme files
│       ├── cricket/                       # Cricket theme files
│       ├── soccer/                        # Soccer theme files
│       ├── rugbyunion/                    # Rugby Union theme files (cloned from soccer/)
│       ├── rugbyleague/                   # Rugby League theme files (cloned from rugbyunion/)
│       ├── fieldhockey/                   # Field Hockey theme files (cloned from soccer/)
│       ├── gaelicfootball/                # Gaelic Football theme files (cloned from australianrules/)
│       ├── ads.css                        # Shared ad display styles
│       ├── slideshow-1.css                # Shared slideshow styles
│       ├── slideshow-2.css                # Shared slideshow styles
│       ├── slideshow-3.css                # Shared slideshow styles
│       └── test.css                       # Shared test display styles
├── CHANGELOG.md
└── README.md

How It Works

Each scoreboard page reads the theme query parameter and appends a matching stylesheet to the document head.

  • australianrules.html?theme=blueprint loads assets/displays/australianrules/blueprint.css
  • cricket.html?theme=basic-score-1 loads assets/displays/cricket/basic-score-1.css
  • soccer.html?theme=basic-score-1 loads assets/displays/soccer/basic-score-1.css
  • rugbyunion.html?theme=basic-score-1 loads assets/displays/rugbyunion/basic-score-1.css
  • rugbyleague.html?theme=basic-score-1 loads assets/displays/rugbyleague/basic-score-1.css
  • fieldhockey.html?theme=basic-score-1 loads assets/displays/fieldhockey/basic-score-1.css
  • gaelicfootball.html?theme=basic-score-1 loads assets/displays/gaelicfootball/basic-score-1.css
  • test.html?theme=test loads assets/displays/test.css

The pages also apply a generated class to #scoreboard so each layout can scope its rules cleanly:

scoreboard--<sport>-<theme>

This makes it possible to scope theme styles cleanly.

Getting Started

  1. Open index.html in a browser for a curated set of featured displays.
  2. Use the tabs to switch between Australian Rules, Cricket, Soccer, Rugby Union, Rugby League, Field Hockey, and Gaelic Football previews.
  3. Open a display from the link list or inspect its iframe preview.
  4. Edit the relevant stylesheet under assets/displays/ or create a new one.
  5. Refresh the page to verify the changes.

If your browser is restrictive about local file access, run a simple static server from the repository root instead.

Creating a New Display

  1. Choose the target sport:
    • australianrules.html
    • cricket.html
    • soccer.html
    • rugbyunion.html
    • rugbyleague.html
    • fieldhockey.html
    • gaelicfootball.html
  2. Copy a similar existing stylesheet as a starting point.
  3. Save it using the theme name you want to load, for example:
assets/displays/cricket/my-new-display.css
  1. Scope the rules to the generated root class, for example:
.scoreboard--cricket-my-new-display {
  background: #000;
}
  1. Preview it with the matching query string:
cricket.html?theme=my-new-display
  1. Keep selectors compatible with the existing HTML structure.

Using Custom Google Fonts

Load a custom typeface with a Google Fonts @import at the top of the theme's CSS file:

@import url('https://fonts.googleapis.com/css2?family=Khand:wght@300;400;500;600;700&display=swap');

.scoreboard--australianrules-my-theme {
  font-family: "Khand", sans-serif;
}

Only Google Fonts (fonts.googleapis.com and fonts.gstatic.com) are allowed through on venue networks — no other third-party font or CDN domains are supported. If a venue blocks these domains the display falls back to the system font, so always include a sensible fallback in your font-family stack.

Using App-Defined Color Variables

Each club's brand colors are supplied by the live app as CSS custom properties rather than hardcoded into the theme:

  • --home-primary
  • --home-secondary
  • --away-primary
  • --away-secondary

Reference them in your theme instead of hardcoding hex values, so the same theme automatically reflects each club's colors:

.scoreboard--australianrules-my-theme .scoreboard__team--home {
  background: var(--home-primary);
  color: var(--home-secondary);
}

In this sandbox, australianrules.html and cricket.html define example values for these variables in a :root block purely for local preview — the live scoreboard sets the real values per match. --bg-color, --text-color, and --border-color are different: those are design choices set inside each theme's own CSS, not provided by the app.

Delivering Your CSS to Solid

Once you are happy with the display, send the finished CSS file(s) to the Solid team so they can be deployed to the live scoreboard system.

  1. Locate the completed file(s) under assets/displays/<sport>/.
  2. Email the file(s) to your Solid contact.
  3. Include the theme name(s) and the sport(s) the display is intended for.

The Solid team will deploy the files to the server and configure them against the relevant scoreboards.

Notes for CSS Developers

  • Treat HTML class names and hierarchy as a contract.
  • Build designs with overrides/scoped selectors rather than markup changes.
  • Use existing themes as implementation examples and reference patterns.

Versioning

See CHANGELOG.md for release history.