Urgently need RTL (Right to Left) layout option

[Shinto_George]

Hello, is it possible add option for Right to Left (RTL) layout ? In middle east all websites need RTL layout option for Parsi, Hebrew, Arabic. Most wordpress template have both option in template Left to right and Right to Left layouts. Thank you.

[Lucian_Dinu]

Hi! Welcome to SiteJet community.

I don’t know if this helps … direction - CSS: Cascading Style Sheets | MDN based on the “direction: rtl;” css property this can be easily done.

Create a class called “rtl” and attach that class where you need.

.rtl {
  direction: rtl !important;
}

[Shinto_George]

Hello, Thank you for your reply.

That is okay but it will be time consuming if we change for each section and pages. It will be very helpful if you can add option like

this. So people can easily add RTL elements.

[zachary]

@Shinto_George in addition to what @Lucian_Dinu said, you could target by this as well

p, span, h1, h2, h3, h4, h5, h6 {
     direction: rtl!important;
}

[Shinto_George]

Hello,

Thank you for your reply.

I want to tell you more about this. Actually a website will not be RTL layout if we change only headings or texts. Right side bar will go to the left side automatically. the left side column and content will goes to right side and right side column and content will go to the left sideIf the page is 3 columns layout .

Check this samples

http://demo2.wpdance.com/oswadmarket/

http://demo2.wpdance.com/oswadmarket_rtl/

[Giaco_Sitejet_Team]

Hello guys,
@Shinto_George in addtion to what @Lucian_Dinu & @zachary said, you could apply the direction:rtl to the body and everything would change direction, but it could be possible that you have to adjust some elements if they dont fit perfectly.

Example before:

and after

[Andre]

Thank you all for the help and the clarification. I will bring this forward to our next product meeting with the developers to discuss this topic.

[zachary]

Oh I understand now, thank you for clarifying

[The_Prize_Ds_Eg]

Thank you for the answer, However, this does not work for the navigation bar.
This is the code, but simpying adding metninoed CSS rule, even with “important” included changes nothing.

// HEADER ***Referenced on: Every page except Legal Notice and Privacy .ed-element.preset-menu-v2-default { @includeincludeincludeinclude menu-v2( $menu-wrapper-padding: (1rem 0rem 1rem 0rem, 1rem 1rem 1rem 1rem, null), $menu-margin: (0.375rem, null, null), $menu-link-font: link-default-font, $menu-link-fw: 300, $menu-padding: (1.25rem 1.25rem 1.25rem 1.25rem, null, null), $menu-wrapper-shadow: (2px 2px 4px 0 rgba(0,0,0,0.2), null, null), $menu-wrapper-sticky: sticky_none, $menu-trigger-fixed: false, $menu-trigger-margin: (2vw, 3vw, null), $menu-color-active: $color-primary, $menu-wrapper-align: center_menu ); }