Versions Compared

Version Old Version 9 New Version 10
Changes made by

Stefan Schöb

Stefan Schöb

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Die Farben sowie die Grösse des Micromate-Widgets können sehr einfach über CSS Custom Properties (CSS Variables) angepasst werden. Die Variablen können an beliebiger Stelle gesetzt werden:
Info

Wofür kann das Styling des Micromate Widgets angepasst werden?

Wenn Micromate über das Widget in eine beliebige Webapplikation integriert wird, kann es sinnvoll sein die Farb- sowie Schriftgebung von Micromate an die Webapplikation anzupassen. Damit wird Micromate noch mehr zu einem Teil der Webapplikation was die Akzeptanz bei den Lernenden erhöht.

Anleitung

Tip

Das Wichtigste in Kürze

  1. Das Micromate Widget kann über CSS Custom Properties konfiguriert werden.

  2. Die Variabeln müssen global gesetzt werden.

Widget Darstellung anpassen

Die CSS Custom Properties können an einer beliebigen Stelle im Frontend der Webapplikation in welchem das Widget integriert werden gesetzt werden.

Code Block
:root {
  --micromate-font: monospace;
  --micromate-color-primary: green;
  --micromate-color-secondary: red;
  --micromate-avatar-icon: url('data:image/png;base64,iVBORw0KGgoAAAA....')
}

Das aufgeführte Beispiel führt zur folgenden Veränderung des Widgets:

Möglichkeiten

Die folgenden Variablen stehen zur Verfügung:

Name

Beschreibung

Standard-Wert

--micromate-font

Schriftart

"Open Sans", sans-serif

--micromate-color-primary

Hauptfarbe des Widgets

#334455

--micromate-color-secondary

Hauptfarbe innerhalb des Chats

#facb72

--micromate-avatar-icon

Setzt das Icon welches im Avatar (dem Button zum öffnen/schliessen des Widgets) angezeigt wird.

Beinhaltet ein Base64 encodiertes Bild.

url('data:image/png;base64,iVBORw0KGgoAAAA....')