Prestashop 1.6 Theme RTL

nashcontrol · May 16, 2014

Hi,

I was checking out Prestashop to replace my current site. I really loved the new 1.6 theme and noticed that it is not RTL by default, so I made it.

The first thing I noticed after installing Hebrew was that the rtl.css file is loaded in the middle of the other css files. I started adding "!important" attributes but then I decided to make it more elegant by adding it again, this time, put it as the last file:

I've made all the style changes in the rtl.css file, so that changing to LTR language keeps the same basic look (overwrite the original one in the css folder). The file is not well commented, but the various sections align each module.
I added a mirrored version of sprite-rtl.png: "default-bootstrap/img/jquery/uniform/sprite-rtl.png"

Update (13 Oct 2015):

Currently tested on 1.6.1.1, simply clone into your theme folder.

Github: https://github.com/nashcontrol/prestashop-default-bootstrap-rtl

Backward compatibility is not guaranteed.

That's it. Enjoy.

@nashcontrol

Edited October 3, 2015 by nashcontrol (see edit history)

asafs133 · May 25, 2014

10x man!

ipcomp1 · May 26, 2014

כל הכבוד !!! נראה מעולה

שלומי

yosssii · June 3, 2014

Great, Thx

natirose · June 11, 2014

thnk you, i will look into it

alboim · June 23, 2014

Hi,

Tried to load it but got a message: "Bad configuration file"

Any clue what is the problem?

Many thanks

alboim · June 23, 2014

Just forgot to mention that I m using 1.6.06

nashcontrol · June 23, 2014

Did it happen when you did an import? you should simply copy&paste it to your themes folder and then refresh the themes in the preference page.

yosssii · June 24, 2014

Hi There,

how do I fix the RTL in mails directory ?

Thanks alot

alboim · June 25, 2014

Yes, I did try to import it when getting this message. Anyway, I copied the files as you had suggested and it worked perfectly.

Many thanks!

nashcontrol · June 26, 2014

Hey yosssii,

If you can wait, I'm planing to do that sometime in July.

Alex.

Edited June 26, 2014 by nashcontrol (see edit history)

k_aviv · June 28, 2014

Hi

is it Work With 1.6.0.8 ?

i cant load it

Thanks

Aviv

nashcontrol · June 28, 2014

k_aviv, not yet, need to make some adjustments.

yosssii · June 28, 2014

Hello Alex,

thank you for your replay..

what code do i need to add to the mails/ html files to set it to RTL ?

tryed <html dir="rtl" lang="he">

with no luck

k_aviv · June 28, 2014

k_aviv, not yet, need to make some adjustments.

Thanks u about ur answer

do u will make this changes ?

nashcontrol · June 28, 2014

.

.

tryed <html dir="rtl" lang="he">

with no luck

I added body style:

<style> 
body {
  direction: rtl !important;}
.
.
</style>

yosssii · June 28, 2014

Thank you buddy, works great

nashcontrol · June 28, 2014

Thanks u about ur answer

do u will make this changes ?

OK, easier than I thought, just had to load the JavaScript files. I added a call for them in footer.tpl.

File updated in the original post.

natirose · June 29, 2014

this is gr8

can you make it a github project? so we can help maintain it?

dvir · July 10, 2014

thanks !!

could you help me about couple of things ?

we want to switch out shop to prestaShop.

but, we seems to have 2 major problems :

mport product with hebrew - we didn't succeed to import products with hebrew in the title or in the description . you can look in the link :

http://buyvisualstudio.co.il/presta/microsoft-exchange/157383-Exchange-Server-Standard-2013-OLP-NL-312-04261.html

prices - in our old website , we have 4,000 items

part of the product have price in shekel - ILS

and big part of the products have cot price in USD .

our old website , take the USD price , turn it into ILS and add VAT tax.

we do not want to save the price in ILS - But we want to show the price in ILS to our customers

how can we do that in presta ?.

nashcontrol · July 11, 2014

Hi Dvir,

I've seen you opened a new thread regarding this, as this really does not relate to a right to left issue.

wiseguy · August 4, 2014

Hi,

I was checking out Prestashop to replace my current site. I really loved the new 1.6 theme and noticed that it is not RTL by default, so I made it.

The first thing I noticed after installing Hebrew was that the rtl.css file is loaded in the middle of the other css files. I started adding "!important" attributes but then I decided to make it more elegant by adding it again, this time, put it as the last file:

I added the RTL check In the beginning of header.php:
{***Language check***}
{$is_rtl = false}
{foreach from=$languages key=k item=language name="languages"}
  {if $language.iso_code == $lang_iso}
    {if $language.is_rtl == 1}
			{$is_rtl = true}
	{/if}
  {/if}
{/foreach}
Then, I linked the rtl.css file again, just after the usual css files, along with an RTL version of Bootstrap (ratnic's fork).

https://github.com/ratnic/bootstrap-rtl
{if ($is_rtl)}
<link rel="stylesheet" type="text/css" href="{$css_dir}bootstrap_lib/bootstrap-rtl.min.css" />
<link rel="stylesheet" type="text/css" href="{$css_dir}rtl.css" />
{/if}
I've made all the style changes in the rtl.css file, so that changing to LTR language keeps the same basic look. The file is not well commented, but the various sections align each module.

Notice:

I added a mirrored version of sprite-rtl.png: "default-bootstrap-RTL/img/jquery/uniform/sprite-rtl.png"

I modified blocklayered to support RTL: "default-bootstrap-RTL/js/modules/blocklayered/blocklayered.js", as well as "default-bootstrap-RTL/modules/blocklayered/blocklayered.tpl"

Update:

Currently tested on 1.6.0.8, simply copy&paste.

Backward compatibility is not guaranteed.

That's it. Enjoy.

@nashcontrol

@Nashcontroll

What ver of Presta your modification is tested and working 100% ? Your Attached zip include all changes and modification in this post?

face4u · August 5, 2014

Hey, Thanks!

regarding the rtl of the mails, you say you entered the code in <style>. In what files exactly should I put this css definitions?

Is it mails/he/XXX.html? Or somewhere else?

nashcontrol · August 5, 2014

yes,mails/he/XXX.html, in the header tag.

nashcontrol · August 20, 2014

Github: https://github.com/nashcontrol/prestashop-default-bootstrap-rtl

LyoNick · August 24, 2014

thank you for sharing it via github

i am hoping to test it on a clean shop next week

and a full local instance of a shop the week after,

if i'll have anything to suggest after, it will be via github

Thank's a lot

Lyo

TheWolf · September 20, 2014

Hi all, thank you Nashcontrol for the RTL fix, but i still have a problem with the currency. when i change the currnecy to what it should be = X00,000.00 it still shows the symbol at the right side and not the left. it was ok before updating the bootstrap files.

anyone here had that problem and fixed it or is it just me?

thank you!

nashcontrol · September 20, 2014

Hi TheWolf,

I think that the easiest solution to this problem is simply reset the currency symbol and set it again (there may be some HTML RTL chars in the one that is installed by default).

TheWolf · March 3, 2015

Thank you nash, i don't know what u mean by resetting, it is not an option in prestashop BO, i just deleted and reinstalled it.

It didn't work, at the main page i see the currency in the right place but at the cart block and cart page and product page and other modules such as recent viewed and new and more the currency format is displayed on the right side of the price.

i'm using prestashop 1.6.0.11

another thing, the images with the arrows are twisted to the wrong side, the outward arrows are facing inwards and vice versa. you know something about that?

and the cart page is not RTL inside the columns, how can i fix that?

Thank you,

Wolf

Edited March 3, 2015 by TheWolf (see edit history)

yaniv14 · March 3, 2015

The correct currency format should be: 0,000.00X

About the arrows, if you talking about the fontawesome arrow icons, you can either change in tpl files (right/left) or update via css (content: '...').

If you don't use multi lang site I suggest change in tpl files.

TheWolf · March 3, 2015

Hi Yaniv, when i change the currency format the blocks i complained about stay the same, and the blocks that were fine before get twisted. so it's not the way, i think something in the css file of nash isn't working.

I'm a beginner in prestashop and with almost no coding experience, but i am a quick learner so if you could please direct me closer to what tpl files i need to edit would be great.

Do you mean the module tpl files inside the theme folder or what?

and can you explain how to rtl the columns in the cart page?

Thank you in advance.

Wolf

yaniv14 · March 3, 2015

Hi,

Can you post a link to the site?

The tpl's depends on where are you looking to change arrows.

theme tpl's are controller pages and module tpl's are related to each hooked module.

about the currency make sure you add space between symbol and price.

rabiaah · April 10, 2015

Hi,

I'm facing one issue here, I have 3 Languages Website, only those RTL (Hebrew) facing issue with the Arrows in the Buttons (Green and Gray buttons) - All the Arrows still displayed as in English so it's in the Wrong Direction.

Can you advise here where is the problem exactly?

Thanks...

Rabi

yaniv14 · April 10, 2015

Can you post link to your site or link to the specific page that shows the arrows?

rabiaah · April 10, 2015

yaniv14 · April 10, 2015

Those arrows are font awesome icons.

You can either do it in the templates by adding if statement for language (is_rtl) and changing the arrows direction (chevron-left/chevron-right)

Or with css by changed the content in the specific font (might cause problems in other pages if you don't catch specific page).

It will be easier to help you if you will provide link to the site.

nashcontrol · April 10, 2015

Hi rabiaah,

This is a known issue in prestashop 1.6.0.14, the chevron icons' display property was changed.

I've updated the github repository with the required change.

quick fix (line 2316), add display:inline-block;

.icon-phone:before,.icon-chevron-right:before,.icon-chevron-left:before,.icon-truck:before,.icon-credit-card:before {
display:inline-block;
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1); }

btw, to fix the add-to-cart notification with the bad item number, you should change the blockcart module translation in hebrew:

$_MODULE['<{blockcart}prestashop>blockcart_e5694b7726ceaf2f057e5f06cf86209e']

rabiaah · April 11, 2015

Hi NashControl,

It was perfect for both, Everything is works as design!

Happy holidays to everyone

Thanks..

Rabi

alihkhawaher · April 16, 2015

Thanks you so much nashcontrol I your ccs file made everything perfect. why are they not implementing it by default?

Many thanks,

nashcontrol · April 16, 2015

Thanks alihkhawaher!

Probably because I did not make it in SCSS/SASS format

LyoNick · April 16, 2015

Hey NashControl,

If you ever decide to submit it as SCCS,

can you split it into partials as a single _file.css per model, and one rtl.scss that combine them all?

this way it will be much easier to maintain and modify?

also this way it can be done in incremental steps.

Thank you any way.

Lyo

alihkhawaher · April 17, 2015

Hi, For RTL in top menu categories, it is not showing correctly, I tried playing with CSS and couldn't find why. I have attached a screenshot.

My prestashop version is 1.6.0.14

Many thanks,

nashcontrol · April 17, 2015

Hi,

Indeed a bug, fix by adding float:none to superfish menu (around line 1107):

@media (max-width: 767px) {
    .sf-menu > li {
 float: none;

Github repository updated.

Edited April 17, 2015 by nashcontrol (see edit history)

alihkhawaher · April 18, 2015

Thanks it is fine now after your fix.

I tired to find it using firefox debugging mode but couldn't. It is a very big CSS and I have minor idea about it how to deat with it.

Thanks,

ahi · April 27, 2015

hi

have problem with the RTL issue. cannot find the original path.

default-bootstrap/img/jquery/uniform/

this path doesnt exist in my site.

where exactly i should put the relevant files?

i'm using version 1.6.0.14

thnx

natirose · April 27, 2015

this path reside within your prestashop root folder then under themes

i.e prestashop/themes/default-bootstrap/img/jquery/uniform/

ahi · April 28, 2015

still not working.

i've extracted the files to the location (put the stripe file in the IMG folder and the CSS in the CSS folder) but still not working.

yaniv14 · April 28, 2015

Don't forget to clear your cache.

Try to open the browser in Incognito mode.

Disable CCC for css in back office.

ahi · April 29, 2015

yeah !

working now !

thnx alot !

rabiaah · May 2, 2015

Hi,

I'm facing one more issue regarding the RTL, Please see Attachment, Write a Comment popup is not RTL and the Stars CSS not valid.

Can you check and Advice please?

Thanks,

Rabia

yosssii · May 14, 2015

Hello There, I have some problem with currency symbol display, the symbol ₪‎ is on the right side. how do I change it to display on the left side

like this ₪‎123.90

I delete shekel currency and set again didn't work

Thanks in advance

alihkhawaher · May 14, 2015

I faced the issue with the review direction, after try and error I was able to fix it by adding the following to ccs file:

#criterions_list label {
float: right !important;
}

#new_comment_form {
text-align: right !important;
}

Best regards,

nashcontrol · May 15, 2015

thanks guys, updated the github repository along with some cleanups.

yosssii, what you did actually worked for me.. note that in the currency there is a small RTL symbol that you need to remove.

yosssii · May 15, 2015

thanks guys, updated the github repository along with some cleanups.

yosssii, what you did actually worked for me.. note that in the currency there is a small RTL symbol that you need to remove.

Can you point me out where do I need to remove the small RTL symbol you talking about ?

ranpergamin · May 15, 2015

Hi Friends,

Thank you for all the great information. I have applied the files (propbably need to download the latest from today).

I am a PrestaShop newbie, helping my [spam-filter] migrate to a self-hosted, self-controllered platform, after 7yrs :-)

I am trying to have the categories appear as a right column, and not at the footer, nor upper slider.

Any idea how I do that ?

Changing the right/left column preferences and selecting/deselecting the category item on the column list doesn't seem to have any effect.

Is the new RTL file disables the right/left column settings, cause right now it seems that most of the defaults are left on "left column" though they appear on the right.

Any insight will be highly appreicated.

Regards,

Ran

ranpergamin · May 16, 2015

Ok. So I got that fixed, by turning on Index on the left Column in Theme advanced options.

Left Column acts as right column for RTL ?

I now have a different problem, where when the categories do appear properly on the right, the facebook like block is cut in the frame.

Any idea where I fix that ?
(Screenshot attached)

prestaisrael · May 25, 2015

Ok. So I got that fixed, by turning on Index on the left Column in Theme advanced options.

Left Column acts as right column for RTL ?

I now have a different problem, where when the categories do appear properly on the right, the facebook like block is cut in the frame.

Any idea where I fix that ?

(Screenshot attached)

תגדיר את פייסבוק לשפה העברית, אמור להסתדר

ranpergamin · June 8, 2015

תגדיר את פייסבוק לשפה העברית, אמור להסתדר

תודה ! סידרתי את זה ב CSS

mickeymarko · July 5, 2015

thanks, works like a charm

yosssii · July 29, 2015

Hello everyone,

I wonder if this problem only on my store or someone have the same issue

in heb language the page not loading on Iphone , pc and android works fine.

in en language no problem any idea ?

thanks in advance

yaniv14 · August 2, 2015

This is not a familiar issue.

So I guess its only something with your store.

Are you using paid theme or default persta theme?

Share a link to your store and I will take a look.

yosssii · August 5, 2015

Thanks alot Yaniv..

the problem solved.. I disabled the module Sliders Everywhere..

dvir · September 23, 2015

hi to all ,

where can i download the most updated files - for changing the Prestashop 1.6 Theme to RTL ?

nashcontrol · September 23, 2015

Hi Dvir,

You can find it in the github. Just download/clone it into your theme folder.

https://github.com/nashcontrol/prestashop-default-bootstrap-rtl

shimondvir · September 30, 2015

Dear ,

How do I center the logo?

Thank you for a great RTL adjustment !!

yaniv14 · October 1, 2015

Your question is too general to answer, and you should start a new topic for that.

It's recommended that you had more details (link to your site, screenshot).

ipcomp1 · April 14, 2016

שלום לכולם

שידרגתי עכשיו לגירסה 1.6.1.5

וכמובן של כל ה RTL

התחרבש , האם בפוסט הנ"ל יש קבצים מעודכנים להורדה לגירסה זאת ?

תודה

שלומי

hai · November 16, 2016

שלום לכולם

שידרגתי עכשיו לגירסה 1.6.1.5

וכמובן של כל ה RTL

התחרבש , האם בפוסט הנ"ל יש קבצים מעודכנים להורדה לגירסה זאת ?

תודה

שלומי

יש תשובה ?

גבריאל · November 27, 2016

אכן, יש משהו שעובד בגרסה הנוכחית (הורדתי וזה לא משנה כלום...)?

ipcomp1 · May 25, 2017

יש למשיהו עדכון לתבנית החדשה של 1.7X

שהכל מיושר לימין ?

Prestashop 1.6 Theme RTL

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment