Introduction

ImpressCMS since version 1.1 has the BUILT-IN RTL SUPPORT feature, and since this is a new step in ImpressCMS development, theme designers might need to read this article to make their themes RTL compatible! An ImpressCMS_theme is basically a html document with instructions specially make for Smarty and it has two main sections: HTML code and Smarty Code. This changes automatically according site content; however the HTML code stay without modifications and normally the images, links and texts that are not to generate by ImpressCMS (they are not dynamic) stay thus in all sections. So all we have to do is to create a new html file and bring the theme structure in it.

Step 1

Create a copy of your theme.html and rename this new copy to theme_.html

.

Step 2

Create a new folder and rename it for instance "rtl". Create a copy of all your stylesheet (CSS) file and bring them all to this new folder.

Step 3

Open theme_.html and change paths of CSS files to their new directory.

Let's do it

Now I will show you some examples based on impresstheme so you can better follow the structure: So following the changes explained earlier, you have already opened theme and have changed style (CSS) files path to the new place, like this: Now we need to change blocks places in RTL theme thus, search for these lines (around line 64): <{if $xoBlocks.canvas_left}> <{includeq file="$theme_name/blockszone.html" blocks=$xoBlocks.canvas_left zoneClass='icms-canvas-column' zoneId='icms-canvas-leftcolumn' }> <{/if}> and replace them with: <{if $xoBlocks.canvas_right}> <{includeq file="$theme_name/blockszone.html" blocks=$xoBlocks.canvas_right zoneClass='icms-canvas-column' zoneId='icms-canvas-rightcolumn' }> <{/if}> So now we have changed the place of right blocks, they are placed at the left side Now we search for (around line 93): <{if $xoBlocks.canvas_right}> <{includeq file="$theme_name/blockszone.html" blocks=$xoBlocks.canvas_right zoneClass='icms-canvas-column' zoneId='icms-canvas-rightcolumn' }> <{/if}> And replace it with: <{if $xoBlocks.canvas_left}> <{includeq file="$theme_name/blockszone.html" blocks=$xoBlocks.canvas_left zoneClass='icms-canvas-column' zoneId='icms-canvas-leftcolumn' }> <{/if}> Remember: The reason we do this, is just because of block places in ImpressCMS and Also to keep compatibility with multilanguage, for example with a site runs with both English (non RTL) and Persian (RTL) languages, a block in the left side of English must go to the right side of Persian, otherwise it`s no more dynamic and site won't be looking good in one of the languages!! Now it's time to change CSS files in order to make them work under RTL mode! Open theme/rtl/style.css The first thing you must have in mind about RTL themes, is that the usual fonts used here are different, to give a better look: So change: font-family: Verdana, Arial, Helvetica, sans-serif; into: font-family: Tahoma, Arial, Helvetica, sans-serif; An other important thing, as our styles are no more in the theme root folder, you have to change image paths like this: background-image: url(img/hbar.gif); into: background-image: url(../img/hbar.gif); Or for example in styles of header you have to change all aligned stuffs to their opposite place, like: #icms-headerlogo { float: left; } into: #icms-headerlogo { float: right; } And change: #icms-headerbanner { position:relative; top:10px; right:20px; float: right; } into: #icms-headerbanner { position:relative; top:10px; left:20px; float: left; } And change: #icms-globalnav { border-bottom: 1px solid #ddd; background-image: url(img/hbar.gif); clear: both; height: 20px; padding-left: 11px; } into: #icms-globalnav { border-bottom: 1px solid #ddd; background-image: url(../img/hbar.gif); clear: both; height: 20px; padding-right: 11px; } And change: #icms-globalnav ul { list-style-type: none; margin: 0px; padding: 2px 0 0 0; } into: #icms-globalnav ul { list-style-type: none; margin: 0px; padding: 2px 0 0 0; float: right; } Now open theme/rtl/layoute.css Just like in header, we need to change the alignments to make everything be at the correct place, so change: #icms-canvas-leftcolumn { float: left; width: 170px; margin-left: -170px; } into: #icms-canvas-leftcolumn { float: right; width: 170px; padding-left: 5px; margin-right: -180px; } Remember, we changed the place of right and left blocks, now this change and the next ones are to finalize them Now change: #icms-canvas-rightcolumn { float: right; width: 170px; padding-left: 5px; margin-right: -180px; } into: #icms-canvas-rightcolumn { float: left; width: 170px; margin-left: -170px; } And change: #icms-canvas.leftcolumn-layout #icms-canvas-columns, #icms-canvas.threecolumns-layout #icms-canvas-columns { padding-left: 170px; } #icms-canvas.rightcolumn-layout #icms-canvas-columns, #icms-canvas.threecolumns-layout #icms-canvas-columns { padding-right: 190px; } into: #icms-canvas.leftcolumn-layout #icms-canvas-columns, #icms-canvas.threecolumns-layout #icms-canvas-columns { padding-right: 190px; } #icms-canvas.rightcolumn-layout #icms-canvas-columns, #icms-canvas.threecolumns-layout #icms-canvas-columns { padding-left: 170px; } And change: #icms-page-topblocks.icms-lcrpageblocks .icms-blockszone, #icms-page-bottomblocks.icms-lcrpageblocks .icms-blockszone { float: left; clear: none; width: 31.2%; } into: #icms-page-topblocks.icms-lcrpageblocks .icms-blockszone, #icms-page-bottomblocks.icms-lcrpageblocks .icms-blockszone { float: right; clear: none; width: 31.2%; } So as you have seen we have changed alignments in different places to let all contents be at their correct place! These two files were responsible for alignments and content places in theme, but it can be different in different themes ... An useful way to test if you have correctly implemented these changes is to activate RTL in your local copy of ImpressCMS by going to "ICMS_ROOT/language/your_language/global.php" and change the value of "_ADM_USE_RTL" to "1" like this: define("_ADM_USE_RTL","1");

This is all you might need to know about how to create a RTL theme, if you have any question, feel free to ask them in our forum. Category: Themes Category: Getting Started

Last modified on 2010/11/11 by Anonymous
Comments
The comments are owned by the poster. We aren't responsible for their content.