Wie ändere ich per CSS Kleinigkeiten im Tab-Chat oder im Chat für mobile Geräte?

Wie wir bereits in einem anderen Blog-Artikel geschrieben haben, kann man mit jQueryMobile ThemeRoller recht unkompliziert komplette Themes für den Tab-Chat oder Chats für mobile Clients erstellen. Diese Themes sind reine CSS-Dateien. Damit kann man alle Eigenschaften (Hintergrund, Ränder, Textfarben) der Eingabefelder, Checkboxen, Radiobuttons, Buttons usw. usw. ändern.

Diese CSS-Datei kann man in der Administration unter „Konfiguration“ – „Einstellungen“ – „CSS und Themes“ hochspielen:

In einer solche Datei können Sie natürlich auch selbst manuell Änderungen vornehmen oder eigene spezielle CSS-Anpassungen dazufügen.

Aber was machen wir, wenn wir nur kurz eine kleine CSS-Änderung vornehmen wollen, ohne ein komplettes Themeroller-Theme zu bauen?

In den „normalen“ Themes gibt es nun zusätzlich zu dem -Abschnitt, der für den PopUp-Chat ist, einen neuen CSS-Abschnitt , der dies ermöglicht.

Hier ist beispielhaft gezeigt, wie man die Farbe der Chatbubbles des Besuchers ändern kann.

Ein Theme ist grundsätzlich eine normale XML-Datei:

Nähere Informationen über Themes kann man in der Dokumentation (Anschnitt: Alles über Themes) finden.

In unserem Beispiel besteht das XML-Theme aus dem komplett umschließenden Parent-Tags <theme> und den Child-Tags <metadata> und <css_tab>. Der <css_tab>-Tag enthält wiederum ein Child-Tag <content> und dieser dann die entsprechenden CSS-Eigenschaften. In diesem Fall sind das die Eigenschaften fill und stroke für die SVGs der Chatbubbles der Besuchserseite, die die Klasse bubble_right_svg haben.

Diese Datei kann man da als neue Theme-Datei hochspielen oder man ergänzt die bereits vorhandene Theme-Datei. Auch diese muss dann entsprechend hochgespielt werden:

Ein weiteres Beispiel zeigt, wie man es schafft, das man die Logos, welche man direkt in den Einstellungen NUR für den Chat für mobile Geräte auswählen kann:

auch im Tab-Chat angezeigt werden:

Die Struktur ist dieselbe wie im ersten Beispiel, nur die CSS-Eigenschaften sind andere. Die beiden div-Elemente mit den Klassen „yalst-custom-image“ und „yalst-top-custom-image“ bzw. „yalst-custom-image“ und „yalst-bottom-custom-image“ werden einfach auf „block“ gesetzt, da diese im Tab-Chat nur ausgeblendet waren.

So lassen sich schnell Elemente im Tab-Chat und mobilen Chat umstylen, ohne den Weg über ein komplettes Themeroller-Theme gehen zu müssen.