Allgemeine Anpassung des Erscheinungsbilds

Der edML-Player ist vollständig in Javascript und CSS erstellt. Daher ist es möglich, mit einem eigenen Stylesheet das Aussehen grundlegend zu verändern. Dazu muss das eigene Stylesheet nach der edmlplayer.css geladen werden.

Beispiel: Einbinden eines eigenen Stylesheet

<link rel="stylesheet" href="pathtoedml/edmlplayer.css">
<link rel="stylesheet" href="pathtomystyle/mystyle.css">

edML-Elemente wie z. B. exercisebox können einerseits im css als solche adressiert werden, indem ein edml- vorangestellt wird:

Beispiel: direkter Selektor von edML-Elementen

edml-exercisebox {
    background-color: red;
}

Andrerseits ist es bei vielen edML-Tags möglich, ein name-Attribut zu definieren, welches eine gezielte Adressierung möglich macht:

Beispiel: Selektor von ausgewählten edML-Elementen

edml-exercisebox[name="important"] {
    background-color: red;
}

Dies kann auch unabhängig von einem bestimmten edML-Element definiert werden:

Beispiel: Selektor von namensgleichen Elementen

*[name="important"] {
    background-color: red;
}

Dies sind nur einige Beispiele wie die reguläre CSS-Syntax zur Formatierung ausgenutzt werden kann. Prinzipiell gibt es hier keine Einschränkungen bzgl. dem gewöhnlichen Gebrauch von CSS. Analog können auch (dynamische) Anpassungen mit Hilfe von Javascript vorgenommen werden. Zukünftig sind zentrale CSS-Variablen geplant, mit denen vereinfacht das Design verändert werden kann. Sobald diese vollständig implementiert sind, werden Sie eine entsprechende Dokumentation an dieser Stelle finden.