PIT Designs Logo

Oxygen RTL Support (Polylang or WPML)

About the author: Ninos
I'm the owner and founder of PIT Designs. I love creating digital presence and creative digital solutions for our clients.


Posted 11 months ago on August 22nd, 2019. Last modified on June 7th, 2020


Tags: |

Oxygen RTL supported front-end layout.

Creating multilingual websites is a very common practice nowadays. Maybe businesses are global, and thus may need to present their website in more than one language. For the most part, it's easy creating multilingual websites that run on the same layout direction. LTR (Left-to-Right) for example English, French, Spanish..etc. There's no real change in the direction of the texts/layouts, and even fonts may be similar.

However; it's a difference challenge creating an LTR and RTL website. For example English and Arabic version of the website.

Does Oxygen builder support RTL?

Short answer: not 100% exactly just yet!

Long answer: You can build a multilingual (RTL/LTR) website with Oxygen. We've done this already and this very website (pitdesigns.com) you're browsing now is one of them. It has perfect RTL/LTR layout. And we have tested it with the two plugins:

  • Oxygen builder with Polylang (personal preference)
  • Oxygen builder with WPML

How to implement RTL style sheet in Oxygen?

Method 1:

Using the Stylesheets add below CSS code, which targets the language. in this case (ar) = Arabic language.

You can find the language code list here : w3schools.com/tags/ref_language_codes.asp

This will load the RTL styles site-wide.

Method 2:

Add a code module to the main template, and add the CSS code to it.

This will only for the language in which the template is used.

/******* ARABIC SUPPORT *******/
*:lang(ar) {
font-family: 'Changa';
}

Oxygen Builder RTL Layout

Since Oxygen currently doesn't have an RTL layout for the back-end visual builder. You can use this Chrome extension (LTR-RTL)
to help with that.

This extension allows you to change language direction.
Shortcuts:
Ctrl+Shift+H -- switch to RTL
Ctrl+Shift+E -- switch to LTR

Here's a review of the before/ after using LTR/RTL extension.

Oxygen-builder-RTL-support

So while the given methods may not be ideal, but it's the best solutions available at the moment. Until the Oxygen team give us an update that fully support RTL layouts.

For any questions, leave a comment below.

5/5 (1 Review)
Do we all agree that Coffee is the fuel that feeds the free content creating?
How to Choose Commercial Cleaning in Erbil

How to find the right company for commercial cleaning in Erbil - Iraq? With the current global pandemic situation, work […]

Is 2020 a Good Time to Start a Career in Tech?

In terms of demand, the tech field has become what in the past used to be the stock market. Back […]

Interview & Business Lessons From Paul's Hair Port

It is a remarkable milestone when a business celebrates its 20th year anniversary in business. Paul’s Hair Port, located in […]

Should You Trust Kuraz Insurance Company in Erbil?

Kuraz insurance company based in Erbil. Claims to be professionals in the business of ensuring your health, assets, travel, and […]

How to Create Before & After Slider in Oxygen

Before & After slider is a cool effect, used to provide a real-time sense of comparison of two images. If […]

Title With Lines On Sides in Oxygen (CSS Only)

Working on a website, I needed to create a title with lines on sides. A sort of text-decoration-cool-design-thing. That looks […]

How to Create Animated Number Counters in Oxygen

Animated number counters are seen on many landing pages. They bring a cool effect (movement) to the page and convey […]

Leave a Reply

Your email address will not be published. Required fields are marked *

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

chevron-downmenu-circlecross-circle