Zaawansowane zmiany wyglądu - przykłady kodu CSS

Przydatne porady

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;
}

Usunięcie wybranego działu w oknie callback (lista)
Wartość pola value, to numer działu. Należy tam wstawić id działu, który ma zostać ukryty.

#section-select option[value="3393"] {
display: none !important;
}

Usunięcie wybranego działu w oknie callback (przyciski)
Wartość pola value, to numer działu. Należy tam wstawić id działu, który ma zostać ukryty.

.section-button[id-section="3395"] {
display: none !important;
}

Usunięcie wyświetlania działów offline w widgecie czatu

.sections-offline { display:none !important; }

Twój komentarz zostanie dodany po zakceptowaniu przez moderacje.

Zaawansowane zmiany wyglądu - przykłady kodu CSS

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

Twoja opinia:

Podpis:

Adres email:
(nie będzie opublikowany)

Twoja ocena:

Zaawansowane zmiany wyglądu - przykłady kodu CSS

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

Twoja opinia:

Podpis:

Adres email:(nie będzie opublikowany)

Twoja ocena:

Adres email:
(nie będzie opublikowany)