Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Version History

« Previous Version 7 Next »

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:

Styling

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....')
}

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....')

  • No labels