Return to previous page

RTL page does not open correclty - by AdSh

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

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

#188210 Copied Theme version: LEGENDA - 8theme WordPress themeVersion: 3.6

5 Answers

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

#188257 Copied

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

#188271 Copied

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

#188284 Copied

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

#188296 Copied

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

#188313 Copied