| Info |
|---|
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
| Tip |
|---|
Das Wichtigste in Kürze
|
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....');
--micromate-chat-widget-z-index: 5000;
} |
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....') |
--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 Chatfenster | 640px |
--micromate-chat-widget-width | Breite von dem Chatfenster | 520px |
--micromate-chat-widget-position-right | Abstand des Chatfensters von rechts | 30px |
--micromate-chat-widget-position-left | Abstand des Chatfensters von links | auto |
--micromate-chat-widget-position-top | Abstand des Chatfensters von oben | auto |
--micromate-chat-widget-position-bottom | Abstand des Chatfensters 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 |