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                    # Theme selector / preview links
├── australianrules.html          # Fixed Australian Rules scoreboard markup
├── cricket.html                  # Fixed Cricket scoreboard markup
├── assets/
│   ├── main.css                  # Shared/global base styles
│   ├── index.css                 # Styles for index page
│   └── displays/
│       ├── australianrules/      # Australian Rules theme examples
│       ├── cricket/              # Cricket theme examples
│       ├── ads.css               # Shared ad display styles
│       └── slideshow-*.css       # Shared slideshow styles
└── CHANGELOG.md

How It Works

  • australianrules.html and cricket.html read the theme query parameter.
  • The page then loads assets/displays/<sport>/<theme>.css.
  • The scoreboard root gets a class in this format:
scoreboard--<sport>-<theme>

This makes it possible to scope theme styles cleanly.

Getting Started

  1. Open index.html in a browser.
  2. Choose a theme link to preview an existing design.
  3. Edit or create CSS in the relevant folder:
    • assets/displays/australianrules/
    • assets/displays/cricket/
  4. Refresh the page to view updates.

Creating a New Display

  1. Pick the target sport (australianrules or cricket).
  2. Copy an existing theme CSS file as a starting point.
  3. Rename it using your new theme name, for example:
assets/displays/cricket/my-new-display.css
  1. Preview it by visiting:
cricket.html?theme=my-new-display
  1. Keep selectors compatible with the existing HTML structure.

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 and updates.