Zaawansowane zmiany wyglądu - przykłady kodu CSS
 

Jak dopasować wygląd do własnych potrzeb?

Czater umożliwia personalizację widgetów w dowolny sposób za pomocą kodu CSS. Instrukcja dodania arkusza styli znajduje się tutaj. Poniżej zamieszczamy przykłady kodu wraz z opisem zastosowania.

Zmiana ikony przełączania rozmowy bota do konsultanta
W miejsce kropek należy wstawić link do swojej ikony lub zdjęcia.

#e3D18r_czater .e3D18r-icon-bot-to-consultant { background-image: url(https://..........) !important; }


Zmiana treści podziękowania po zamówionej rozmowie telefonicznej
W miejsce "nowa treść" należy wpisać swój własny tekst.

#thanks-title { font-size:0; } #thanks-title:after { content: "Nowa treść"; font-size: 24px !important; }


Zmiana koloru zaproszeń do rozmowy
Fragment kodu w postaci numerycznej np. #33cc33 to kolor. W miejscu wartości należy podać własny nie usuwając fragmentu !important.

#e3D18r_czater #czater-contener div#teaser #teaser_caption { background-color: #33cc33!important; } #e3D18r_czater #czater-contener.attachment-bottom-right div#teaser:after, #e3D18r_czater #czater-contener.attachment-left-edge div#teaser:after { border-right: 12px solid transparent!important; border: 12px solid #33cc33; } #e3D18r_czater div#czatercall-teaser #czatercall-teaser_caption { background-color:#33cc33!important; } #e3D18r_czater div#czatercall-teaser.czatercall-left:after { border: 12px solid transparent !important; border: 12px solid #33cc33 !important; border-top: 12px solid transparent!important; border-bottom: 12px solid transparent!important; }


Zmiana treści tekstu na przykładzie "Prosimy o podanie danych" w formularzu offline
Właściwość content powinna zawierać nową dowolną wartość ujętą w cudzysłów pojedynczy apostrofowy.

.form-data h3 { text-indent:-9999px; } .form-data h3:before { text-indent:0; content:'Nowa treść'; float:left; }


Przesunięcie czatu na urządzeniach mobilnych
Oprócz właściwości bottom można zastosować inne parametry.

@media (max-width: 769px) { #e3D18r_czater #czater-contener[data-display=off].attachment-mobile-bottom-right { bottom: 90px; } }


Przesunięcie telefonu na urządzeniach mobilnych
Oprócz właściwości bottom można zastosować inne parametry.

@media (max-width: 769px) { #e3D18r_czater #cc-button-iframe.attachment-mobile-bottom-left { bottom: 53px !important; } }


Przeniesienie ikony słuchawki na lewą stronę nad czat
Zmieniając wartości właściwości left, right, bottom można przemieszczać widget.

#e3D18r_czater #cc-button-iframe.attachment-bottom-left, #e3D18r_czater #cc-button-iframe.attachment-mobile-bottom-left { right: 7px !important; bottom: 83px !important; left: auto; } #e3D18r_czater #czatercall-teaser { bottom: 106px !important; } #e3D18r_czater #czatercall-teaser.czatercall-left { right: 139px !important; left: auto; } #e3D18r_czater #czatercall-teaser.position-on-side.czatercall-left:after { left: auto !important; right: -18px !important; border-left: 12px solid #2f2f2f!important; border: 12px solid #2f2f2f00; }


Usunięcie wyświetlania działu w czacie
W miejsce xxx należy wpisać id działu, który jest pobierany z adresu url po przejściu do edycji działu, np. https://www.czater.pl/userPanel/sectionOperations/edit/3219
Tutaj numerem id jest 3219.

.czater-sections li[data-id="xxx"] { display: none !important; }


Twoja opinia:

Podpis:

Adres email:
(nie będzie opublikowany)

Twoja ocena:

Twój komentarz zostanie dodany po zakceptowaniu przez moderacje.