Styling

Styling

Da sich die Widgets direkt in das HTML-Dokument einnisten und nicht innerhalb eines Windows/iFrames geladen werden, wirken sich alle bestehenden CSS-Definitionen wie Schriftgröße, Schriftfarbe, Tabellenzeilenhöhe, etc. auch auf die Widgets aus. Damit ist das Styling grundsätzlich dem Webmaster, der die Einbindung der Widgets vornimmt, überlassen. Um die verfügbaren Klassen, die von den Widgets verwendet werden, zu ermitteln, empfiehlt es sich den Aufbau der Widgets mit Hilfe des in den Browser integrierten Web-Inspektor zu untersuchen. In den gängigsten Browsern lässt sich dieser entweder mit der Tastenkombination Strg+Alt+I oder F12 unter Windows bzw. Cmd+Opt+I unter macOS oder alternativ über das Menü oder mit Rechtsklick auf das Widget und "Element untersuchen" öffnen.

Alle von den Widgets verwendeten Klassen haben den Präfix -hd-.

Templates

Um das Styling zu vereinfachen gibt es vorgefertigte Templates, die als Stylesheet eingebunden werden können und bereits für alle Widgets CSS-Definitionen enthält. Das Basistemplate definiert rein die Struktur der Widgets (Abstände, Ausrichtungen, etc.), allerdings keine Farben wie Schrift-, Rahmen- oder Hintergrundfarben. Es ist daher sehr gut geeignet um komplexe Widgets wie zum Beispiel den vollständigen Spielbericht korrekt darzustellen und anschließend mit eigenem CSS farblich an die eigene Website anzupassen. Die URL des Basistemplates lautet https://api.hockeydata.net/css/?los_template_default. Beispieleinbindung per Link-Tag:

<link href="https://api.hockeydata.net/css/?los_template_default" rel="stylesheet">

Für die farbliche Anpassung stehen derzeit zwei weitere Templates zur Verfügung: Dark und Glass. Beim Laden dieser Templates wird automatisch das Basistemplate mitgeladen, es ist also nicht notwendig beide Templates einzubinden. Die URL's der beiden Templates lauten:

Dark: https://api.hockeydata.net/css/?los_template_dark
Glass: https://api.hockeydata.net/css/?los_template_glass

Template-Anpassung

Um nicht das komplette Styling der Widgets übernehmen zu müssen, kann natürlich ein Template als Grundlage verwendet und anschließend mit eigenen CSS-Definitionen erweitert werden. Zu beachten ist in diesem Fall die Reihenfolge der CSS-Definitionen sowie die Spezifität. Um zum Beispiel das Dark-Template einzubinden, jedoch die Hintergrundfarbe der Spaltenüberschriften auf schwarz zu setzen, kann folgender Code verwendet werden:

<link href="https://api.hockeydata.net/css/?los_template_dark" rel="stylesheet">
<style type="text/css">
  .-hd-util-intellitable .-hd-util-intellitable-data th {
    background-color: #000;
  }
</style>

Responsiveness

Da jede Website strukturell unterschiedlich aufgebaut ist und es dem Webmaster überlassen ist, an welchen Stellen (z.B. Hauptinhalt, Seitenleiste, Fußzeile) und mit welchen Optionen (z.B. Anzahl der Spalten, Teamlogos) die Widgets eingebunden werden, ist es nicht möglich für die Widgets vorgefertigte Definitionen für verschiedene Bildschirmgrößen festzulegen, sie also responsive zu machen. Diese Aufgabe ist somit dem Webmaster überlassen. Hier ein paar Tipps:

  • Bei der Tabelle kann zwischen dem langen und kurzen Teamnamen gewechselt werden. Mit Hilfe der Widget-Option additionalColumns kann zusätzlich zum langen Teamnamen der kurze angezeigt werden. Je nach verfügbarer Breite kann nun der lange oder kurze Teamname ausgeblendet werden um Platz zu sparen.
  • Der Game-Slider kann direkt hintereinander zweimal eingebunden werden: z.B. einmal mit sechs Spielen und einmal mit drei Spielen (Widget-Option gamesPerGroup). Je nach verfügbarer Breite kann einer der beiden Game-Slider ausgeblendet werden.
  • Bei niedriger Displaybreite kann der Innenabstand der Tabellenzeilen verringert werden, dies spart sehr viel Platz bei Widgets, die hauptsächlich tabellarisch dargestellt werden, wie zum Beispiel der Spielplan oder die Spielerliste.