RTL page does not open correclty - by AdSh

This topic has 6 replies, 2 voices, and was last updated 6 years, 1 month ago ago by Rose Tyler

  • Avatar: AdSh
    AdSh
    Participant
    March 14, 2018 at 17:43

    Hi,

    I am using WPML plugin to translate my website to RTL language.
    After translating the main page I have problems in:
    – Top menu: should be from right to the left.
    – Right menu: should be on the right hand side.
    – search bar: in the header.
    – Position of the cart.
    – The footer.

    Please let me know how can I do that?

    Thanks

    Please, contact administrator
    for this information.
    5 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 15, 2018 at 09:26

    Hello,

    Please add this code in custom.css file:

    .rtl .top-bar .languages-area {
        float:  right;
        margin-right:  30px;
    }
    .rtl .top-bar .top-links {
        float:  left;
        margin-right:  0;
        margin-left:  40px;
    }
    .rtl .top-bar .wishlist-link {
        right:  auto;
        left:  0;
        float: left !important;
    }
    .rtl .links li.my-account-link, .rtl .links li.logout-link, .rtl .links li.login-link,.rtl  .links li.register-link, .rtl 
     .links li.checkout-link {
        margin-right:  20px;
        margin-left:  0;
        background-position:  right center;
    }
    .rtl .wishlist-link i {
        float:  left;
    }
    .rtl .shopping-cart-widget .cart-summ .price-summ {
       margin-right:  5px;
    }
    .rtl .shopping-cart-widget .cart-bag {
        display:  flex;
    }
    .rtl .shopping-cart-widget .cart-summ > .cart-bag:before {
        margin-right:  0;
        margin-left:  10px;
        top: 5px;
    }
    .rtl .search .et-mega-search form .button {
        right: auto;left: 6px;
    }
    .rtl .footer .vc_column_container {
         float:  right;
    }
    .rtl .copyright .span6 {
        float:  right;
    }
    .rtl .copyright .footer-sidebar-widget .textwidget p {
        text-align:  left;
    }
    .rtl .copyright .footer-sidebar-widget .textwidget img {
        float:  right;
    }

    Regards

    Avatar: AdSh
    AdSh
    Participant
    March 15, 2018 at 10:16

    Hi,

    thank you. It is better not but still need some improvement.
    Please check the attachment and let me know how to do the changes shown in the screenshot.

    https://www.dropbox.com/s/b2yizefr2waezhp/1.png?dl=0

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 15, 2018 at 11:26

    Hello,

    Please change the previous code to this one:

    .rtl .top-bar .languages-area {
        float:  right;
    }
    .rtl .top-bar .top-links {
        float:  left;
        margin-right:  0;
        margin-left:  40px;
    }
    .rtl .top-bar .wishlist-link {
        right:  auto;
        left:  0;
        float: left !important;
    }
    .rtl .links li.my-account-link, .rtl .links li.logout-link, .rtl .links li.login-link,.rtl  .links li.register-link, .rtl 
     .links li.checkout-link {
        margin-right:  20px;
        margin-left:  0;
        background-position:  right center;
    }
    .rtl .wishlist-link i {
        float:  left;
    }
    .rtl .search .et-mega-search form .button {
        right: auto;left: 6px;
    }
    .rtl .footer .vc_column_container {
         float:  right;
    }
    .rtl .copyright .span6 {
        float:  right;
    }
    .rtl .copyright .footer-sidebar-widget .textwidget p {
        text-align:  left;
    }
    .rtl .copyright .footer-sidebar-widget .textwidget img {
        float:  right;
    }
    .rtl .shopping-cart-widget {
        text-align:  left !important;
    }
    .rtl .shopping-cart-widget .widget_shopping_cart_content {
        right:  auto;
        left:  0;
    }
    .rtl .links .login-link, .rtl .links .register-link {
        position:  relative;padding-left: 20px;
    }
    .rtl .login-link:before, .rtl .register-link:before {
        position:  absolute;
        left:  0;
        top: 5px;
    }
    .rtl .register-link {
        position:  relative;
    }
    .rtl .side-area-icon {
        right:  auto;
        left:  0;
        margin-left:  0;
        margin-right:  25px;
    }
    .rtl.wide .side-area {
        right:  auto;
        left: 0;
    }
    .shopping-cart-widget .widget_shopping_cart_content {
        top: 45px;
    }
    .top-bar .wishlist-link a i:before {
        position:  relative;
        top: 1px;
    }

    Regards

    Avatar: AdSh
    AdSh
    Participant
    March 15, 2018 at 11:59

    Hi,

    thanks. BUT the icon for “My account” and “Logout” still on the right (after logging in).

    Thanks

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 15, 2018 at 13:00

    Hello,

    Oh I see, no problem:

    .rtl .links .logout-link, .rtl 
    .links .my-account-link {
        padding-left:  20px;
        position:  relative;
    }
    
    .rtl .links .logout-link:before, .rtl .links .my-account-link:before {
        position:  absolute;
        left:  0;
        top: 5px;
    }

    Regards

  • Viewing 6 results - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.