Farbschema

Legen Sie eine Integration von der Art "Farbschema" an. Nach Auswahl der Art der Integration erhalten Sie oben rechts im Fenster den Reiter "Erscheinungsbild". Klicken Sie den Reiter an, um Einstellungen in diesem vorzunehmen.

Die Ansicht teilt sich in zwei Bereiche: links befinden sich die Gruppen "Box und Texte", "Buttons", "Elemente", "Segmente", "Datepicker" und "Erweiterte Einstellungen". Rechts erhalten Sie eine Vorschau Ihres Erscheinungsbildes.

Zum Anpassen der Farben können Sie zwischen zwei Vorgehensweisen wählen:

Klappen Sie die Gruppen in der linken Ansicht die Kategorie-Gruppen auf, in denen Sie die Farbe ändern möchten. Sie erhalten eine Auflistung mit den anpassbaren Elementen der Remote-Integrationen. Rechts neben jeder Element-Bezeichnung befindet sich ein Farbfeld mit der gewählten Farbe. Klicken Sie ein Farbfeld an, damit sich ein neues Fenster zur Eingabe einer Farbe öffnet.

oder:

Klicken Sie rechts in der Vorschau auf das Element, welches Sie ändern möchten, damit sich ein neues Fenster zur Eingabe einer Farbe öffnet.

In diesem Fenster können Sie links eine Farbe per Klick aus einer der zuletzt gewählten definieren. Oder nutzen Sie den Farbwähler, mit dem Sie Farbton und Transparenz regeln können. Auch können Sie händische Eingaben folgender Farbwertdefinitionen eingeben und auf den Button "Übernehmen" klicken:

Bezeichung	Syntax	Beispiele
Hexcode	#rrggbb; #rgb jeweils 0-f	#668822; #682
RGB-Wert (rot-grün-blau)	rgb(r, g, b) jeweils 0-255	rgb(111, 159, 36)
RGBA-Wert (mit Alpha-Kanal / Transparenz)	rgba(r, g, b, a) rgb: 0-255; a: 0-1	rgb(111, 159, 36, .75)
HSL-Wert (Farbton, Sättigung, Luminanz)	hsl( h, s%, l%) h: 0-360; s,l: 0%-100%	hsl(83, 77%, 62%)
HSLA-Wert (mit Alpha-Kanal / Transparenz)	hsla( h, s%, l%, a) h: 0-360; s,l: 0%-100%; a: 0-1	hsla(83, 77%, 62%, .75)
Farbname	CSS3-Farbname	lawngreen; aqua, brown

Ist das grau-weiss-karierte Muster mit dem großen X gewählt, greift das System auf das Standardfarbschema der vioma Integrationen zu. Um Ihre jeweilige Farbauswahl zurückzusetzen, können Sie entweder den Wert im Texteingabefeld löschen oder oben rechts auf das grau-weiss-karierte Kästchen mit dem großen X klicken.

Hinweis: Buchungsstrecken können nicht über Farbschemata eingefärbt werden, hier werden die Farbeinstellungen in der Buchungsstrecke Integration vorgenommen.

Inhalt

Erweiterte Einstellungen und LESS

In der letzten Gruppe können Sie erweiterte Einstellungen treffen. Im Texteingabefeld rechts neben "Font-Family" können Sie eine oder mehrere Schriftarten eintragen, welche für die Integration verwendet werden soll. Standardschrift der Integrationen ist "Open Sans". Wenn Sie Ihre Hausschriftart (wenn diese keine Systemschriftart ist) auch für die Integrationen verwenden möchten, sollte diese auf der eingebundenen Seite bereits über CSS oder Javascript eingebunden bzw. importiert sein.

Möchten Sie das CSS Ihrer Integration anpassen, so können Sie Ihre Anweisungen im "Custom LESS"-Texteingabefeld eintragen. Unsere Style-Definitionen schreiben wir mit der Stylesheet-Sprache LESS. Ebenso können Sie auf diese Technik zurückgreifen und gemäß LESS-Syntax das Aussehen Ihrer Integration anpassen.

Farbschema oder eigenes Erscheinungsbild?

Mit Anlegen einer Integration ist beim Feld "Farbschema" standardmäßig der Wert "- Eigenes Erscheinungsbild verwenden -" gesetzt. Dies bedeutet, dass die eigenen Farbeinstellungen der jeweiligen Integration verwendet werden, wie Sie im oberen Reiter unter "Erscheinungsbild" gepflegt sind. Wenn die Intergrationen jeweils ein anderes Farbschema haben sollen, kann dies pro Integration gepflegt werden. Haben alle Integrationen dieselbe Farbgebung, vereinfacht ein Farbschema die Arbeit, da es nur einmal gepflegt werden muss.