Problem with product pictures

[jaimegomez]

My Prestashop version is 1.5.6.2 and my template is this one http://www.templatemonster.com/demo/47522.html.

I got a clone of the store with some changes here http://boysandgirlsfashion.com/anbX43WX7k3y7k/ar/

Basically the problem is in the home page when it displays new products in the arabic version. New and sale images doesn't turn up properly. I tried to change translations displaying New in english (it wasn't a huge problem) but the problem continues. It doesn't matter if its in english or arabic.

This template didn't come with arabic and I had to add and traslate it without problems but this particular feature of the home page I couldn't manage to find out how to solve it.

 

[jaimegomez]

Any idea??

[benjamin utterback]

Hi, when I visited your store in the link you provided, it was mostly English but some items were Arabic. I changed the language to English and everything changed to English.

 

When I changed the language to Arabic, the descriptions were still in English and the product names but the default menu options like the footer were in Arabic.

 

It doesn't seem like you have translated the product names/descriptions etc into Arabic.  

[jaimegomez]

Thanks to have a look. I translated everything in the main website. This one is just a clone to make changes and try different things. My problem comes when you change to the arabic and in the home page products images are displayed with the new and sale pics moved.I translated New and leave Sale in english and translated both but the problem is still there.

When you click on the different categories it also happens.

Sorry if I've explained wrong.

[PascalVG]

Ok, so I understand you want to move the red and green 'ribbons' that say something like sale and something in arabic, to the edges, right?

 

One problem is, that the theme pretends to be 'responsive', i.e. changes according to the screen width.

 

 

for bigger screens, change this:

 

http://boysandgirlsfashion.com/anbX43WX7k3y7k/themes/theme834/css/responsive.css (line 126):

@media only screen and (min-width: 767px)

...

#product_list.grid .new-box span.new, .main_page_products .new-box span.new {

   left: 10px;                   <- change this value to 10px;

   -webkit-transform: rotate(-45deg);

   -moz-transform: rotate(-45deg);

   -ms-transform: rotate(-45deg);

   -o-transform: rotate(-45deg);

   transform: rotate(-45deg);

}

 

this will move the green ribbon to the correct place, on the left side.

 

 

then : same file, line 139:

@media only screen and (min-width: 767px)

...

#product_list.grid .sale-box span.on_sale,.main_page_products .sale-box span.on_sale {

   left: 30px;                               <- change this value to 30px;

   -webkit-transform: rotate(45deg);

   -moz-transform: rotate(45deg);

   -ms-transform: rotate(45deg);

   -o-transform: rotate(45deg);

   transform: rotate(45deg);

}

 

This will move the red 'sale' ribbon to the correct place, right hand side.

 

 

for window widths 992-1229, the theme doesn't look well. The product boxes are jumping all over the place. Contact the theme developer about this. The ribbons stay ok because of the above change, though.

 

 

at window width is 767 exactly, the theme already changes to small, but the ribbons are still for wide screen. The theme is not defined correctly at this exact point.   (i.e. theme changes to 'small' at 767, but some css changes at 766). Contact developer for that. (or try to fix self in line 79:   @media only screen and (min-width: 768px)

 

 

For smaller screens, the ribbons change to ovals next to the picture, and look ok.

 

 

 

Hope this is what you wanted.

 

pascal