How to change size of pattern image in product page,category page and admin page (PS 1.6.1.0)

[hdp2101]

Hello all my lovely friends

If anybody is interested about How to change size of pattern image in product page,category page and admin page then this is a useful code for him. Please note that before changing code to this files I advise to him to take backup of all files mentioned below. Also I am not responsible for any changes or any mashup happened in site but any way this works for me so I put in our community.(advising to all my friends first do it in your demo site and once you are satisfy then finally apply on your main site)

To make our theme batter may be user will modified the code in mentioned files. So due to changes in all this files may be you will find the code in some other lines. So don't worry for that (This is a normal course to work).

Also i am attaching the modified files. But if you done any previous changes in that files then don't copy straight away or else your previous changes will be disappear.Then also if you are copy willing to copy all this files then remove the last word from file-name. (Ex product.css.modified is file name then remove modified word)

For safer side i am attaching all the images of below file as result how it will look in file after pasting or replacing. Also the final result of site how the design was before and after. And last but very important i am attaching the original files also in-case if you forget to take backup of that files. Just change the last word from file-name (Ex product.css.original is file name then remove original word) and copy back to his place again.

Once again I am not responsible for any changes or any mashup happened in site but any way this works for me so I put in our community.(advising to all my friends first do it in your demo site and once you are satisfy then finaly apply on your main site)

Original files name

   product.css       in ../themes/your theme name/css/
   ptmfix.css        in ../themes/your theme name/css/
   product_list.css  in ../themes/your theme name/css/
   admin-theme.css   in ../psadmin/your theme name/default/css/

   Please go through following step carefully.

   All the best

In file /your domain/themes/your theme name/css/product.css

Find this code :

#attributes .attribute_list #color_to_pick_list li {
  float: left;
  margin: 0 3px 3px 0;
  padding: 1px;
  border: 1px solid #d6d4d4;
  clear: none;
  width: 26px;
  height: 26px; }

And replace this code

#attributes .attribute_list #color_to_pick_list li {
  float: left;
  margin: 0 10px 10px 0;
  padding: 1px;
  border: 1px solid #d6d4d4;
  clear: none;
  width: 64px; ------------You can change the size of your pattern as per your requirement.(please note whatever size you change to your pattern then applies everywhere the same size.)
  height: 64px; }----------You can change the size of your pattern as per your requirement.(please note whatever size you change to your pattern then applies everywhere the same size.)

Again

Find this code

#attributes .attribute_list #color_to_pick_list li a.color_pick img
  display: block;
  height: 22px;
  width: 22px; }

And replace this code

#attributes .attribute_list #color_to_pick_list li a.color_pick img {
  display: block;
  height: 64px;
  width: 64px; }
=======================================================================

In file /your domain/themes/your theme name/css/ptmfix.css

Find this code

ul.product_list .color-list-container ul li {
    width: 24px;
    height: 24px;
}

And replace with this code

ul.product_list .color-list-container ul li {
    width: 64px;
    height: 64px;
    margin: 0 10px 10px 0;
}

Again

Find this code

#attributes .attribute_list #color_to_pick_list li a.color_pick {
  height: 24px !important;
  width: 24px !important;
}

And replace with this code

#attributes .attribute_list #color_to_pick_list li a.color_pick {
  height: 64px !important;
  width: 64px !important;
}
======================================================================

In file /your domain/themes/your theme name/css/product_list.css

find this code

ul.product_list .color-list-container ul li a img {
   display: block;
   width: 22px;
   height: 22px; }

And replace with this code

ul.product_list .color-list-container ul li a img {
   display: block;
   width: 64px;
   height: 64px; }

Again

find this code

ul.product_list .color-list-container ul li a {
  display: block;
  width: 22px;
  height: 22px;
  margin: 1px; }

And replace with this code

ul.product_list .color-list-container ul li a {
  display: block;
  width: 64px;
  height: 64px;
  margin: 1px; }
=========================================================================

In file /your domain/psadmin/your theme name/default/css/admin-theme.css

Find this code

.bootstrap .attributes-color-container{width:40px;height:25px;display:block;border:solid 1px #000}

And replace with

.bootstrap .attributes-color-container{width:64px;height:64px;display:block;border:solid 1px #000}
==================================================================================================

Some times if your changes will not appear in your site after modify the above file. So in that case please clear all cache from your browser and also from your back-office ---> Advanced parameters ---> Performance see on your right-hand side corner you will see the clear cache link just click on that link to clear cache. and refresh your page.

 

Finally the end comes. I hope you guys had done great job.

 

Thank you

Hemal Parikh

 

[magtom]

Dear Hemal,

thanks for that! It's exactly what we're looking for. But is it also possible for Prestashop 1.7? Is there a similar tutorial somewhere?

 

Thanks in advance,

magtom