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-Inspektors 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 enthalten. 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:
Für die farbliche Anpassung stehen derzeit drei weitere Templates zur Verfügung: Dark, Glass und Soda. Beim Laden dieser Templates wird automatisch das Basistemplate mitgeladen, es ist also nicht notwendig beide Templates einzubinden. Die URL’s der Templates lauten:
Dark: https://api.hockeydata.net/css/?los_template_dark
Glass: https://api.hockeydata.net/css/?los_template_glass
Soda: https://api.hockeydata.net/css/?los_template_soda
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:
<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ätzlich 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:
Dies ist dann nützlich, wenn man ein Template verwendet, aber eigene Responsive Breakpoints setzen möchte.