2007

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.
December 27, 2007

Yaser Rajabi
Boolib.Com
12/27/2007
 Easy Steps to Convert Alignment of Joomla! Templates
Yaser Rajabi

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

Boolib.Com

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.
 Easy Steps to Convert Alignment of Joomla! Templates
Yaser Rajabi

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.
Boolib.Com

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).
 Easy Steps to Convert Alignment of Joomla! Templates
Yaser Rajabi

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:
Boolib.Com

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

>>>
 Easy Steps to Convert Alignment of Joomla! Templates
Yaser Rajabi

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
Boolib.Com

different element in the CSS affect template.

 Easy Steps to Convert Alignment of Joomla! Templates
Yaser Rajabi

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:
Boolib.Com
 Easy Steps to Convert Alignment of Joomla! Templates
Yaser Rajabi

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.
Boolib.Com
 Easy Steps to Convert Alignment of Joomla! Templates
Yaser Rajabi

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{.
Boolib.Com
 Easy Steps to Convert Alignment of Joomla! Templates
Yaser Rajabi

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.
Boolib.Com
 Easy Steps to Convert Alignment of Joomla! Templates
Yaser Rajabi

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%.
Boolib.Com
 Easy Steps to Convert Alignment of Joomla! Templates
Yaser Rajabi

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
Boolib.Com

ORIGINAL SOURCE: www.joomla-book.info

EDITOR: Yaser Rajabi

Copyright © 2007 All rights reserved.