Landbot v3 - Web CSS - RTL

Pau Sanchez Updated by Pau Sanchez

If you want to adapt the design of the interface for RTL users, please add the code below to the Design / Code / Add CSS section

v.04 Last update 19th April 2021 (Spacing in text input)

body{
direction:rtl
}
.Footer, .social-button{
direction:ltr !important
}
.Header__Logo{
margin-right: 0px !important;
margin-left: 15px
}

/* Buttons */
.card-content{
direction: rtl;
}
.card-footer{
direction: rtl;
}
.input{
right: 9px!important;

}
.input-icon-send-button{
transform: rotate(180deg)!important;

}
.buttons .button:not(:last-child):not(.is-fullwidth) {
margin-right: .5rem;
}
.buttons .button:last-child {
margin-right: .5rem !important;
}
.custom-buttons .custom-button:not(:last-child):not(.is-fullwidth){
margin-right: 0px !important
}

/* End Buttons */
/* Input */

.InputNumber{
direction:rtl !important;
width: 320px!important;
}
.input-icon-send-button{
transform: rotate(180deg);
}
.InputFile{
margin-right: 155px;
}

.InputYesNo{
margin-right: 155px;
}

.InputYesNo .custom-buttons .custom-button:not(:last-child){
margin-right: 0px !important;
margin-left: 20px !important
}
.InputRating{
margin-right: 155px;
}

.InputScale{
margin-right: 155px;
}
.InputScale .control:first-of-type {
border-radius: 0px 4px 4px 0px!important;
}
.InputScale .control:last-of-type {
border-radius: 4px 0px 0px 4px!important;
margin-right:-1px;
}

.InputButtons{
margin-right: 80px
}

.input-small-header, .input-button{
margin-right: 8px
}
.input-button:nth-of-child(1){
margin-right: -1px !important
}
.InputRating__button:first-child .is-rounded{

border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-top-right-radius: 20px !important;
border-bottom-right-radius: 20px !important;
}

.InputRating__button:last-child .is-rounded{

border-top-left-radius: 20px !important;
border-bottom-left-radius: 20px !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
/*Press enter to send*/
.input-help-text{
margin-right: 50px;
}
/*End Input */

/*Change direction of message bubble */

.MessageBubble{
border-radius: 0.75rem 0.75rem 0.125rem 0.75rem!important
}

.DayPickerInput-OverlayWrapper{
margin-right: 282px;
}


.msg-grid-row-container .msg-grid-row .msg-grid-left {
margin-left: .5rem;
}

.Message .message-right .MessageDate {
padding-right: 11px;
}

.Message .is-reverse{
margin-left: 40px;
}

[class^=Input] .textarea{
padding-right: 60px; !important
}

/*Back Button*/
.BackButton_Container{
margin-right: 100px;
}
.BackButton_Label {
margin-right: 10px !important;
}
.BackButton{
bottom: 0px !important;
}
.social-button:last-of-type {
margin-right: 8px;
}

/*MOBILE - LIVECHAT*/
@media only screen and (min-device-width : 320px) and (max-device-width : 767px) {

.buttons .button:last-child {
margin-right: 0.5rem !important;
}

.is-layout-vertical .input-button:nth-of-type(odd) {
margin-right: 0.5rem !important;
}

.is-layout-vertical .input-button:last-child {
margin-right: 0.5rem !important;
}



.is-image-button:not(.is-flex-direction-column) .input-button-label {
max-width: 200px !important;
}



.msg-grid-row-container .msg-grid-row .msg-grid-left {
margin-left: .5rem;
}

.Message .message-right .MessageDate {
padding-right: 11px;
}
/*Message*/
.Message .is-reverse{
margin-left: 0px !important;
}
/*Buttons*/
.input{
right: 9px!important;

}
.InputNumber{
direction:rtl !important;
width: 60vw!important;
}
.InputButtons{
margin-right: 0px !important
}
.input-button{
margin-right: 8px !important
}
.input-button:nth-of-type(odd){
margin-right: 0px !important
}

.InputFile{
margin-right: 0px !important
}

.InputRating{
margin-right: 0px !important
}

.DayPickerInput-OverlayWrapper{
margin-left: 45px !important;
}

.InputYesNo{
margin-right: 0px;
}

.InputScale{
margin-right: 0px;
}

.InputYesNo .custom-buttons .custom-button:not(:last-child){
margin-right: 0px !important;
margin-left: 20px !important
}


/*Back Button Mobile*/
.BackButton__FooterContainer button.BackButton.custom-button{
width: 90px !important
}
.BackButton__FooterContainer {
bottom: 10px;
}



}/*End Mobile View */

In case you find something else that needs to be adapted, please let us know

How did we do?

Proactive Message Customizations with Javascript and CSS

Hide time stamp (under avatar)

Contact