Gestalten Sie Ihr Chat-Design genau nach Maß!

CSS styling

Das Farbschema des Chats können Sie einfach in Ihrer Administration, unter den Läufer Design ändern. Neben einem eigenen Logo, können Sie auch unterschiedliche Farben für den Hintergrund und Chat-Text, bzw. Blasen einstellen. Sollte Ihnen dies nicht reichen und möchten Sie das Design genau nach Ihrem Geschmack anpassen, haben wir für Sie die Anpassungsmöglichkeit über CSS-Stile erschlossen.

 

 

Sie können das Chat-Design über einzelne Elemente im CSS oder einer komplett eigenen CSS-Datei anpassen. Wenn Sie ein fortgeschrittener User sind und Ihnen diese Begriffe geläufig sind, haben wir für Sie einen Link zu API wo Sie alle erforderlichen Informationen finden :)  

Wenn Sie das Design selber ändern wollen, aber nicht wissen wie, gehen Sie nach folgender Anleitung vor. Hier wird erklärt, wie man die Online/Offline Textfarbe in der Fußzeile von Livechatoo ändert, die standardgemäß auf grün/grau eingestellt ist. Man kann sowohl den eingefügten (Embeded) Klienten, als auch den PopUp-Klienten anpassen.

1. Ermitteln Sie den Namen des Elements, dass Sie ändern möchten.

Den Namen des Elements ermitteln Sie über die Entwickleranwendung in Ihrem Browser. Z.B. in Google Chrome öffnen Sie sie mit Hilfe der Tasten Ctrl + Shift + C oder Sie klicken auf eine beliebige Stelle auf der Seite mit der rechten Maustaste und wählen „Element untersuchen“. Klicken Sie nach dem Öffnen auf den Menüpunkt „Elements“ und dann links auf die Lupe, damit die gewählten Elemente hervorgehoben werden. Klicken Sie jetzt das Element an, das Sie ändern möchten, in diesem Fall der Online-Text. Im rechten Teil der Entwickleranwendung befindet sich der Läufer Styles, auf dem die Eigenschaften des betreffenden Elements abgebildet werden. Im nächsten Fall interessieren wir uns für .footerStart .On, bzw. .footerStart .Off, wo die Textfarbe definiert ist, die wir ändern wollen. Die Elemente .footerStart .On und .footerStart .Off unterschieden sich durch den Status, in dem sich er Chat zurzeit befindet (Online bzw. Offline).

element

2. Ermitteln Sie den Code der neuen Farbe, den Sie verwenden möchten.

Um den Farb-Code zu ermitteln, können Sie z.B. folgende Seite benutzen w3schools.com. Wir nehmen Schwarz, Schwarz hat den Code #000000.

TIP: Wenn Sie Ihren Chat mit geeigneten Farbkombinationen ausschmücken wollen, können Sie die Farbpalette auf der Seite Paletton verwenden.

3. Anpassung des Livechatoo Codes 

Wir müssen das betreffende Element im Code ändern und ihm einen neuen Wert zuschreiben. Dies erfolgt durch Eingabe des Parameters css_Text in den Livechatoo Code. In unserem Fall, wenn wir die Farbe im Online Status auf Schwarz ändern wollen, wird der Text wie folgt aussehen: css_text :‘.footerStart .On {color: #000000}‘.

Die Änderung der Textfarbe ist eine Kleinigkeit, aber auf die gleiche Weise kann jedes Chat-Element angepasst werden. So können Sie das Design genau nach Ihren Vorstellungen anpassen.

Lesen Sie mehr!

Schreibe einen Kommentar