Looking for rtl css

[LinhNguyen]

As topic said, Im looking for rtl.css file for prestashop 1.7. Any suggestions friends ?

[Andrej Stas]

This is the code I have created for Presta Builder and it improves the RTL behaviour. 

 

This code doesn't turn your theme into RTL theme automatically, but you have to set your active language as RTL language in your back office.

 

Insert it into "/your_theme/assets/css/custom.css" or at the end of "/your_theme/assets/css/theme.css"

 

Please let me know how it worked out.

body.lang-rtl {
    text-align: right!important;
}
body#checkout.lang-rtl section.checkout-step .radio-block {
    text-align: right!important;
}
body#checkout.lang-rtl section.checkout-step.-reachable.-complete h1 .step-edit {
    float: left
}
body#checkout.lang-rtl section.checkout-step .payment-options .custom-radio {
    margin-right: 0!important;
    margin-left: 1.25rem!important
}
body#checkout.lang-rtl section.checkout-step .payment-options .custom-radio,
body#checkout.lang-rtl section.checkout-step .payment-options label {
    float: right!important;
}
body#checkout.lang-rtl .condition-label,
body.lang-rtl #product-availability {
    margin-left: 0!important;
}
body#checkout.lang-rtl .condition-label {
    margin-right: 2.5rem!important;
}
body.lang-rtl .pull-xs-left,
body.lang-rtl .product-quantity .qty,
body.lang-rtl .product-actions .add-to-cart {
    float: right!important;
}
body.lang-rtl .product-quantity .qty {
    margin-right: 0!important;
    margin-left: 10px!important;
}
body.lang-rtl #product-availability {
    margin-right: 0.625rem!important;
}
body.lang-rtl .product-quantity .add,
body.lang-rtl .tabs .nav-tabs .nav-item {
    float: right!important;
}
body.lang-rtl .social-sharing {
    -webkit-justify-content: flex-end!important;
    -moz-justify-content: flex-end!important;
    -ms-justify-content: flex-end!important;
    -o-justify-content: flex-end!important;
    justify-content: flex-end!important;
}
body.lang-rtl .social-sharing ul {
    margin-right: 10px!important;
}
body.lang-rtl .page-my-account #content .links {
    -webkit-box-pack: end!important;
    -moz-box-pack: end!important;
    box-pack: end!important;
    -webkit-justify-content: flex-end!important;
    -moz-justify-content: flex-end!important
    -ms-justify-content: flex-end!important;
    -o-justify-content: flex-end!important;
    justify-content: flex-end!important;
}
body#checkou.lang-rtl section.checkout-step #delivery-addresses,
body#checkout.lang-rtl section.checkout-step #invoice-addresses {
    -webkit-box-pack: end!important;
    -moz-box-pack: end!important;
    box-pack: end!important;
    -webkit-justify-content: flex-end!important;
    -moz-justify-content: flex-end!important;
    -ms-justify-content: flex-end!important;
    -o-justify-content: flex-end!important;
    justify-content: flex-end!important;
}
body.lang-rtl .products-sort-order .select-title,
body.lang-rtl input.form-control,
body.lang-rtl input[type=text],
body.lang-rtl .search-widget input[type=text]:focus + button .search,
body.lang-rtl textarea {
    text-align: right;
}
body.lang-rtl .form-group .form-control-label,
body.lang-rtl .form-group .col-md-6 {
    float: right!important;
    text-align: left!important;
}
body.lang-rtl .form-group .col-md-6.form-control-valign {
    text-align: right!important;
}
body.lang-rtl .form-group .form-control-comment {
    float: left!important;
}
body.lang-rtl .custom-checkbox label {
    float: right!important;
    text-align: right!important;
}
body.lang-rtl .form-group span.custom-checkbox span {
    float: right!important;
    margin-left: 10px!important;
}
body.lang-rtl .contact-rich .block .icon {
    float: right!important;
}
body.lang-rtl .page-content .col-sm-6 {
    float: right!important;
}
body.lang-rtl .block_newsletter form input[type=text] {
    padding-right: 60px!important;
}
body.lang-rtl .quickview .social-sharing {
    margin-left: 0!important;
    margin-right: 2.5rem!important;
}
body.lang-rtl .header-top .search-widget form input[type="text"] {
    padding-right: 40px!important;
}
body.lang-rtl .top-menu .sub-menu ul[data-depth="1"] > li {
    float: right!important;
}
body.lang-rtl .top-menu .sub-menu ul[data-depth="1"] > li {
    text-align: right!important;
}
body.lang-rtl .carousel .carousel-control .icon-next i,
body.lang-rtl .carousel .carousel-control .icon-prev i {
    float: left!important;
}
body.lang-rtl #header .header-nav .blockcart .header,
body.lang-rtl .carousel-inner {
    direction: ltr!important;
}
body.lang-rtl .footer-container .links .collapse,
body.lang-rtl .top-menu .collapse ul {
    padding-right: 0!important;
}
body.lang-rtl #products .product-miniature .discount-percentage,
body.lang-rtl #products .product-miniature .on-sale,
body.lang-rtl #products .product-miniature .online-only,
body.lang-rtl #products .product-miniature .product-flags .new,
body.lang-rtl .featured-products .product-miniature .discount-percentage,
body.lang-rtl .featured-products .product-miniature .on-sale,
body.lang-rtl .featured-products .product-miniature .online-only,
body.lang-rtl .featured-products .product-miniature .product-flags .new,
body.lang-rtl .product-accessories .product-miniature .discount-percentage,
body.lang-rtl .product-accessories .product-miniature .on-sale,
body.lang-rtl .product-accessories .product-miniature .online-only,
body.lang-rtl .product-accessories .product-miniature .product-flags .new,
body.lang-rtl .product-miniature .product-miniature .discount-percentage,
body.lang-rtl .product-miniature .product-miniature .on-sale,
body.lang-rtl .product-miniature .product-miniature .online-only,
body.lang-rtl .product-miniature .product-miniature .product-flags .new {
    float: right;
}

Edited February 11, 2018 by Andrej Stas (see edit history)