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 preview links and iframe previews
├── documentation.html                      # Browser-friendly project documentation
├── australianrules.html                    # Fixed Australian Rules scoreboard markup
├── cricket.html                            # Fixed Cricket scoreboard markup
├── 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
│       ├── 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
  • 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.
  2. Use the tabs to switch between Australian Rules, Cricket, and Other previews.
  3. Open a display from the link list or inspect its iframe preview on the home page.
  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
  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.

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.