Styling des Micromate Widgets
- Stefan Schöb
- Christoph Süess
Wofür kann ich das Styling des Micromate Widgets anpassen?
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
Das Wichtigste in Kürze
Das Micromate Widget kann über CSS Custom Properties konfiguriert werden.
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.
:root {
--micromate-font: monospace;
--micromate-color-primary: green;
--micromate-color-secondary: red;
--micromate-avatar-icon: url('data:image/png;base64,iVBORw0KGgoAAAA....');
--micromate-chat-widget-z-index: 5000;
}
Das aufgeführte Beispiel führt zur folgenden Veränderung des Widgets:
Widget positionieren
Standardmässig wird das Micromate Widget unten rechts dargestellt. Je nach Integration kann es sein, dass diese Positionierung nicht optimal ist (z.B. weil es dadurch wichtigen Inhalt überdeckt).
In diesem Fall kann Micromate durch das setzen von CSS Variablen umpositioniert werden. Bei der Positionierung wird das Micromate Widget unterteilt in ein “Chat Widget” und den “Avatart”:
Für beide Bereiche stehen CSS Variablen für die Höhe/Breite sowie die Positionierung zur Verfügung.
Für die Positionierung sind jeweils 4 Variablen vorhanden:
xxx-top
xxx-bottom
xxx-left
xxx-right
Pro Ausrichtung (horizontal/vertikal) kann jeweils nur ein Wert gesetzt werden. Der zweite muss auf “auto” definiert werden. z.B. wenn “xxx-top” auf “30px” definiert ist, muss “xxx-bottom” auf “auto” gestellt werden.
Übersicht CSS Variablen
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....') |
--micromate-chat-widget-z-index | Setzt den Z-Index des Micromate Widgets. Das Widget sollte in den meisten Fällen den höchsten Wert aller Elemente auf der Webseite haben. | 5000 |
--micromate-chat-widget-height | Höhe von dem Chat Widget | 640px |
--micromate-chat-widget-width | Breite von dem Chat Widget | 520px |
--micromate-chat-widget-position-right | Abstand des Chat Widgets von rechts | 30px |
--micromate-chat-widget-position-left | Abstand des Chat Widgets von links | auto |
--micromate-chat-widget-position-top | Abstand des Chat Widgets von oben | auto |
--micromate-chat-widget-position-bottom | Abstand des Chat Widgets von unten | 135px |
--micromate-avatar-width | Breite von dem Avatar | 75px |
--micromate-avatar-height | Höhe von dem Avatar | 75px |
--micromate-avatar-border-radius | Radius des Avatars. Wenn auf 0px gesetzt, dann wird der Avatar viereckig dargestellt. Wenn auf 50% der Höhe/Breite gesetzt, dann ist der Avatar rund. | 37.5px |
--micromate-avatar-position-right | Abstand des Avatars von rechts | 30px |
--micromate-avatar-position-left | Abstand des Avatars von links | auto |
--micromate-avatar-position-top | Abstand des Avatars von oben | auto |
--micromate-avatar-position-bottom | Abstand des Avatars von unten | 30px |