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

Der Widget-Container, in dem sich das Widget befindet (durch die Widget-Option $domNode spezifiziert), erhält abhängig von der Breite eine bestimmte CSS-Klasse.

Responsive Breakpoints:

Breite in Pixel CSS-Klasse
>= 1200 -hd-rd-large-desktop
>= 992 -hd-rd-desktop
>= 768 -hd-rd-tablet
>= 576 -hd-rd-large-mobile
<576 -hd-rd-mobile

Beispiel: hat das Widget eine Breite von nur 200 Pixel, da es in einem Sidebar eingebunden ist, erhält es automatisch die Klasse -hd-rd-mobile.

Diese CSS-Klassen können genutzt werden um das Design auf unterschiedliche Breiten anzupassen.

Die Templates verwenden diese CSS-Klassen und passen die Darstellung auf die verschiedenen Breiten automatisch an.

Zusätzliche können verschiedene Widget-Optionen verwendet werden um die Widgets optimal in dem zur Verfügung stehenden Container darzustellen, zum Beispiel:

  • Bei den tabellarischen Widgets (Standings, Schedule, etc.) können unterschiedliche Spalten-Sets verwendet werden oder die Spalten selbst definiert werden.
  • Der Game-Slider kann mit der Widget-Option gamesPerGroup weniger Spiele anzeigen, wenn nur wenig Platz zur Verfügung steht.

Mit der Widget-Option responsive und dem Wert false können die CSS-Klassen deaktiviert werden. Beispiel:

"responsive": false

Dies ist dann nützlich, wenn man ein Template verwendet, aber eigene Responsive Breakpoints setzen möchte.