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.
Boolib.Com
Example 1: 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
Boolib.Com
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.
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.
Boolib.Com
There is another way to assign those parameters to the commands without stating the directions, left or right:
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
Boolib.Com
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.
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
Boolib.Com
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{.
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.
Boolib.Com
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.
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.
Boolib.Com
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%.
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.
Boolib.Com
AUTHOR ORIGINAL SOURCE: www.joomla-book.info EDITOR: Yaser Rajabi Copyright © 2007 All rights reserved.
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.
Boolib.Com
Example 1: 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
Boolib.Com
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.
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.
Boolib.Com
There is another way to assign those parameters to the commands without stating the directions, left or right:
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
Boolib.Com
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.
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
Boolib.Com
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{.
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.
Boolib.Com
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.
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.
Boolib.Com
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%.
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.
Boolib.Com
AUTHOR ORIGINAL SOURCE: www.joomla-book.info EDITOR: Yaser Rajabi Copyright © 2007 All rights reserved.
