RTL Joomla Templates Guide from

De

ce

mb

er

27

, 2

00

7

Easy Steps to Convert Alignment of Joomla! Templates From Left-to-Right to Right-to-Left For using Joomla or any other CMS themes with Middle Eastern languages such as Hebrew, Arabic, the template must be designed for right-to-left writing. This short tutorial enables you to convert originally Left-to-Right templates to Right-to-Left ones.

2007

Yaser Rajabi Boolib.Com 12/27/2007

Easy Steps to Convert Alignment of Joomla! Templates

Yaser Rajabi

Bo

oli

b.C

om

GENERAL EXPLANATION OF WRITING DIRECTION

For using Joomla or any other CMS themes with Middle Eastern languages such as Hebrew and Arabic, the template must be designed for right-to-left writing.

RTL interface require a different layout then left-to-right user interfaces: the direction of writing and the placing of the different items of the template (menus, modules, photos).

SETP2

Converting template is not only about aligning the text to the right, but also changing the position of the text inside the template and the direction of the writing, the spacing and the placing of images and icons.

Converted template is actually a mirror of the original template. If, on the original template the menu was on the left site, on the modified template it will be on the right.

TEMPLATEDETAILS.XML FILE

The templateDetails.xml file can be edit in HTML editor or Notepad. This file holds data and information about the template, the names of the files that are part of the template and, most important when converting the template: the site encoding.

On the first line in this file we can find the template encoding. Sometimes it need to be change to UTF-8 or other encoding that will suit the site language (and the Database) encoding.

NOTES ABOUT UTF-8 ENCODING

For non-Latin languages we can use the specific language encoding or UTF-8 encoding (Unicode).

If the template is in a different encoding then UTF-8 and we would like to adjust the template to be suitable for UTF-8, it would be enough to indicate that on the templateDetails.xml file, but we will need to save the index.php file in UTF-8 encoding.


Yaser Rajabi

Bo

oli

b.C

om

The same will be true for the opposite situation, when we want to make a UTF-8 template to be suitable for a different encoding. Then we will also need to save the index.php file as ANSI.

ADJUSTING THE TEMPLATE FOR UTF-8 OR FROM UTF-8

This next action is needed only when adjusting a UTF-8 template to a different encoding, or in the opposite situation when adjusting a template from a non UTF-8 encoding to a UTF-8 encoding.

IF the template encoding was UTF-8 and we would like to adjust it for a different encoding, we will open the index.php file (in the template folder) with Notepad and save it using "save as", only this time, while saving we will choose the option ANSI in the saving dialog encoding options.

We will do the same for adjusting a template from UTF-8 encoding to a different encoding, while saving the index.php file in notepad, only this time, while saving the file we will choose the option UTF-8 in the saving dialog encoding options.

EDITING THE CSS FILE

The CSS file contains the design definitions for the template. Those definitions set the site, color, background, spacing of the text the other elements and could also set the position of the elements in the template (top, bottom, left and right).


Yaser Rajabi

Bo

oli

b.C

om

DIRECTION: RTL;

The command direction: rtl;

This will set the writing direction of the site (from the right to the left). It will not cause the text to align to the right, but will only define the direction. For example, without this command the punctuation marks like full stop, question mark and exclamation mark will appear at the beginning of the sentence instead at the end.

It is most important to use the direction: rtl; command in a place where it will affect the whole template. The natural place will be in the body tag (which will affect the whole template).

Should we use the body tag for direction: rtl; ?

One of the RTL affect of this command in the body tad will be that the browser scroll bar will appear on the left (instead on the right). Some don't like it, even on RTL interface. A way to get across the will be to open the index.php file and look for a cell (TD) or layer (DIV) that contains the whole template (many template will use <div id="main"> or <div id="wrapper"> to hold the body of the template). Now, the direction: rtl; could be added to this DIV/TD class on the CSS file and affect it RTL on all of the template and on the other hand keep the browser scroll bar on the right side. If you find this too complicate and for beginners it will be recommended to put the command in the body tag.

LEFT=RIGHT

As mention before, the conversion is actually a mirroring action. We would like to get everything that's on the left side, to be on the right site and vise versa. On the CSS file every left will change to be right, and every right will turn to be left on commands and parameters.

Example 1:

On this case the word right is part of a command and needed to be change to left.

>>>


Yaser Rajabi

Bo

oli

b.C

om

Example 2:

On this case the word left is part of a parameter and needed to be change to right.

>>>

AUTOMATIC FIND AND REPLACE

Using automatic find and replace method in the CSS for chancing all the right to left and vise versa can cause problems For example, in automatic find and replace, a file named top_logo_left.jpg will change its name to top_logo_right.jpg (and maybe there is no file in that name in the images folder...) A class called header_left{ will change its name to header_right{ (and a class in that name might not be exist in the template).

When chancing left=right and right=left, we would like to change only the words inside the commands and in the parameters but not in the names of files (images) and classes.

Example:

In this case if we use automatic find and replace in the CSS file the class td.topright_mods will change its name and will corrupt the template.

EVERYTHING IS A MESS

If in this stage every thing is a mess, the template is corrupted and positions show one on top of another, don't despair (yet... there will be time for that later...).

Other actions might get the template to show correctly in any case. It will be good to make a change or two in the CSS and then to check the site, and so on. In that way it’s easy to see what cause a problem and to learn how the different element in the CSS affect template.


Yaser Rajabi

Bo

oli

b.C

om

TEXT-ALIGN= RIGHT

The command text-align state the text aligning (left, center or right). In fact, after the stage of left=right (where we went over the CSS file and changed all the left to right and vise versa, all the aligning commands that were showing the text align to the left and state: text-align=left;, are spouse to be correct now and state : text-align=right;.

To apply this command on the whole site we can add it in the tags: p, td. div, tr, th.

Adding the : text-align=right; on the body tag or like the example, on the p, td, div, tr or th tags can corrupt the template and shift element in the template to the left, also such element that soused to be align to the center or to the left.

NUMBERS THAT APPLY TO DIRECTIONS

On the CSS file there are certain commands that can accept numbers to state a direction or spacing. Those parameters are: margin, border and padding. For each of those commands it’s possible to assign parameters like that:

On this example, it has been state if the values are for right or left. This cases has already taken care of earlier, in the left=right stage.

There is another way to assign those parameters to the commands without stating the directions, left or right:


Yaser Rajabi

Bo

oli

b.C

om

In this way, every number relate to a different position: top, right, bottom and left. We need to take care of these cases too.

CHANGING THE NUMBERS

As we learned, every number represents a value for a specific direction.

To replace the left to right and vise versa, we need to replace between the number of the left position and the number of the right position.

If we will change the 4th number to the 2nd number, and vise versa, we are actually doing a left=right action.

ONLY TWO NUMBERS

We can also find such a way of writing (with only to numbers), which we don't need to change. When using two numbers, the first number apply to the top and bottom and the second number apply to the left and right.


Yaser Rajabi

Bo

oli

b.C

om

ALIGNING THE TEXT IN THE MAIN MENU

The main mane (and the other menus, accept the top menu), if not stated else, will show the text aligned to the left. To change that we have to add the command text-align: right; for the menu definitions. The menu tad is called mainlevel. We can add this command in other element in the CSS that are relevant to the main menu, like a.mainlevel and so on...

ALIGNING THE DATES

Like the main menu, if was not stated for create date and modify date, they will be shown aligned to the left. We need to add the command text-align: right; in the tags modifydate{ and createdate{.


Yaser Rajabi

Bo

oli

b.C

om

ALIGNING THE AUTHOR NAME

For the author name ("written by") the command text-align: right; will not be enough. The author name is controlled by the tad small{, we will need to add the command float: right; to this tag.

IMAGES POSITION

The position of images (usually icons, arrow and bullets) can be state by words or numbers.

On this example the position of the image is stated by the word left. Those cases has already been taken care of at the left=right stage.


Yaser Rajabi

Bo

oli

b.C

om

POSITION OF IMAGES BY NUMBERS

In case where numbers are being used to state the position of an image, the first number will define the number of pixels from the left border, to place the image.

There is no way to state the number of pixel from the right border so instead we use percents.

0 (or 0px) is actually equal to the word left, meaning, placing an image on the left border (of the div, td…)

When we want to place the image in a mirror method, to place it in the exact distance from the right border, because we don’t have a way to define the number of pixel from the right border, we use percents.

Writing 100% is like writing "right"; the image will be placed on the right border.

In the same logic, 6px means placing the image 6 pixels from the left border.

Since we can't define the number of pixels to place the image from the right border, we will use the percent, guessing how many to use (remember 100%=right, so 99% can be equal to few pixels from the left).

There is no specific rule to determent how many percent to use.

As I mentioned there is no "scientific" way to know how many percent to use. Usually, when allayed to arrows and bullets we want to place to image just a little bit from the border. In this case we can set the percent in rang of 99%-95%. If we see that the image is showing on top of the text we can use higher percent, towards 100%.


Yaser Rajabi

Bo

oli

b.C

om

FLIPPING THE IMAGES

Many of the template images are part of the structure and design of the template. Usually Images that are used as borders to shadowing will not show correct after converting the template. Those images need to be horizontally flipped.

In this demonstration, the images that surrounding the main area and use as borders, switch places, right border become left border and vies versa. Here the border is not symmetric so as we can see, after switching places, we need to flip the border.

The images that are not symmetric need to be flipped horizontally, like in a mirror.

AUTHOR

ORIGINAL SOURCE: www.joomla-book.info

EDITOR: Yaser Rajabi

Copyright © 2007 All rights reserved.

http://www.joomla-book.info

Documents

RTL Joomla Templates Guide from