Wie kann ich das Design des Tabs für die Lasche ändern?
Obwohl die Version 9.408 eigentlich nur ein Bugfix-Release ohne grössere zusätzliche Funktionalitäten ist, gibt es doch eine Sache, über die es zu schreiben lohnt. So kann man den Tab des Laschenchats jetzt sehr tiefgreifend über CSS anpassen.
Dazu muss man eine CSS-Datei irgendwo auf seinem Webspace hinterlegen. Wenn die yalst-Einbindung per HTTPS gemacht wird, was sie sollte, dementsprechend auch unter HTTPS.
Die entsprechende URL wird dann im HTML-Codegenerator in der Administration unter „Einbindung“ – „HTML-Codegenerator“ – „1. Live-Support-Einbindung in Ihre Webseite“:
an der entsprechenden Stelle eingetragen:
Hier natürlich die URL zur der CSS-Datei auf dem eigenen Webspace hineinschreiben. Der Einbindungscode bekommt dann einen neuen Parameter tab_button_css_url: \x26tab_button_css_url=https%3A%2F%2Fwww.example.com%2Fcustom_tab.css
Ausgehend vom „normalen“ Tab:
kann man relativ einfach kann man nun die Textgröße, die Fontfamilie und den Fontstyle anpassen:
|
1 2 3 4 5 |
.tab .text { font-family: Verdana; /* font family style of the text in the tab */ font-size: large; /* font size style of the text in the tab */ font-style:italic;/* font style of the text in the tab */ } |
und den doppelten Rahmen entfernen:
|
1 2 3 |
.tab:before { content: initial; } |
Beides vereint sieht dann so aus:
Aber um zu zeigen, was sonst noch möglich ist, wird hier anhand einer CSS-Datei veranschaulicht, dass man durchaus in der Lage ist, auch ein eigenes Bild in die Lasche zu integrieren. Dabei wird der eigentliche Tab nur noch als Container benutzt und der Container mit dem Text wird der neue Tab. Das before-Element, welches vorher die zweite Linie enthielt, wird dabei als Container für das neue Bild benutzt. Dieses muss natürlich auch per HTTPS irgendwo auf Ihrem Webspace liegen.
Hier ist das CSS mit vielen Kommentaren:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
.tab .text { /* this element will be our new tab */ font-family: Verdana; /* font family style of the text in the tab */ font-size: large; /* font size style of the text in the tab */ font-style:italic; /* font style of the text in the tab */ background-color: #92d53f; /* new background color of the tab, background color of the integration code is set to transparent below */ padding: 15px 20px 15px 20px; /* font size style of the text in the tab */ margin: -10px; border-radius: 5px 5px 0 0; } .tab .text:hover { background-color: #639328; /* new hover color of the tab, normally calculated automatically from the background color of the integration code is set to transparent below */ } .tab:before { content: url('https://www.example.com/darkgreen.png'); /* the dark green chat bubble, replace by your own URL */ position: relative; /* that's the relative position*/ z-index: 2; /* the z-index to put in on top of the new tab*/ left: 40px; top: 2px; background: transparent; } .tab:after { background: transparent; } .tab, .tab:hover { padding: 20px 10px 0 10px; /* here the width and height of the tab will be extented to give space to the new tab and the added image*/ background: transparent; /* the original background color or hover color of the integration code is set to transparent*/ border: transparent; /* the original border color or hover border color of the integration code is set to transparent*/ } .badge-wrapper { top: 41px; /*you have to ajust that carefully while having a chat running and a minimized tab to put the badge back to the right place */ } |
Und hier ist dann das Resultat:
Mit ein bisschen Geduld lässt sich also der Tab grundsätzlich umstylen.