The most secure and easy way to go about this is to not do this work on a live site, but to prepare a local test copy of your website.

1. Install XAMPP, WAMP, MAMP or similar to set up a local server. Create an empty database in that local installation.
2. Using Akeeba Backup, create a full backup of your website.
3. Using an FTP client (like FileZilla or similar), copy the site backup and save it locally.
4. Copy Akeeba kickstart.php to your local test site root.
5. Copy the backup you created from your live website (.jpa file) to your local test site root.
6. Point your browser to https://localhost/kickstart.php
7. Follow the on-screen instructions to recreate a local copy of your live website.

Find your main template and sub template files. Create copies of them and rename them to reflect their use.

For example:

• "template.css" - copy to "template-rtl.css"
• "ie9.css" - copy to "ie9-rtl.css"
• "print.css" - copy to "print-rtl.css"
• etc.

If you are on Windows, NEVER use Notepad or WordPad or Word to edit your text files. These save your files in a format which does not sit well with Joomla. Joomla language files for example need to be absolutely saved without a Byte Order Mark, or they will simply not work (and you go crazy finding out what is wrong).

So do yourself a favor and make sure you have a good UTF-8 capable coding editor installed, like PSPad or Notepad++, which will save your files in the proper format and without the BOM (Byte-Order-Mark). These editors come with many handy formatting functions, have code highlighting for many programming languages and can even do file side-by-side comparisons (diffs).

The RTL template files will be loaded INSTEAD OF the regular LTR template when an RTL language is active, so you need to have an entire duplicate of the normal template file with the needed changes for RTL. The Joomla core includes RTL-capability for the Bootstrap parts natively, so you don't need to specify those changes.

It is a good idea to mark changes for RTL with a comment in the CSS, like this:

/* RTL */

That way you can easily spot later on what was changed.

So what will you be looking for to keep and adapt in your RTL template files?

Remember, the site will have to look like it's seen in a mirror, so right becomes left and left becomes right.

• Text direction
• Floats
• Padding
• Margins
• Shadows
• Image alignments
• Absolute and relative positioning

The best way to go about this is to do it manually. Avoid using search and replace, as it may change a lot more than you want. This process will be outlined a bit more in Step 8.

As mentioned, if you don't speak any RTL languages, installing RTL language packs is not an option for testing your RTL adaptations to the CSS. There is however an easy solution to make English (or any other LTR language) behave as if it was RTL.

In your local installation, find the file [joomlaroot]/language/en-GB/en-GB.xml

At the bottom of this file you find:

English (United Kingdom)en-GB0en_GB.utf8, en_GB.UTF-8, en_GB, eng_GB, en, english, english-uk, uk, gbr, britain, england, great britain, uk, united kingdom, united-kingdom0 

Change:

0

to:

1

and save.

If you look at the site front end now, you will have an English language website behaving as if it was RTL for easy testing.

Once you are completely done, you set the switch back to 0 (zero) and save.

This is accomplished by studying the example provided in the Beez3 core template:

 if ($this->direction == 'rtl') { $doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template-rtl.css'); } 

This piece of code will switch to the correct template file whenever RTL is detected.

The CSS property 'direction: rtl' is the command which will accomplish most of the work for you. It defines the direction, but does not affect the alignment. Add this to the template-rl.css and view then reload the pages to view the differences.

It is possible to set this property in the template’s BODY tag. If you do this however, then the scroll bar will appear on the opposite side of the window. You may also set it in a “container” DIV tag, then the scroll bar will remain on the right, but the text will be mirrored.

Just add:

direction: rtl;

in the body tag.