Thème par défaut, bug agrandissement des miniatures produits

[Marlènee]

Bonjour,

j'utilise le thème par défaut de Prestashop 1.5.3.1 qui a été un peu modifié par un designer.

 

Je ne suis pas un expert en code HTML, CSS et encore moins PHP mais je voudrais tester voir si j'arrive à résoudre mon problème sans faire appel à un prestataire (mon problème me semble assez minime).

 

Actuellement, les images miniatures des produits sur la page d'accueil et sur les pages des catégories font 124px*124px. Je voudrais les mettre en 200*200px. Pour cela je vais dans l'admin > preference > images et je les change.

 

Le problème c'est que sur mon site, lorsque je les changes de tailles, ça n'affiche plus certains mots qui étaient en dessous des miniatures. Je suis sous firefox et en faite, si j'agrandi les miniatures, elle se superpose au texte et donc le cachent. Le texte c'est par exemple "A partir de --€" ou le titre du produit.

 

Savez-vous quel fichier je dois modifier et si possible quelle "variable" ou bout de code je vais devoir modifier ?

 

Je vous remercie pour votre aide

[Julien64]

Bonjour,

 

Si votre site est en ligne, donnez le lien ce sera plus facile de vous dire préciser quoi changer et ou.

Sinon il faut chercher dans les fichiers CSS, il doit y avoir des tailles définies qui ne sont plus bonnes une fois la taille des images changée. En inspectant le code avec firebug vous pourrez trouver quelle partie du code est en cause et dans quel fichier trouver ce code (et même la ligne dans le fichier! )

[Marlènee]

Hello,

merci pour ton aide.

 

Voici le bout de code concerné (trouvé avec firebug):

<li class="ajax_block_product first_item ">
<a class="product_image" title="titre" href="http://www.monsite.fr/ttttt/1394-URL.html">
<img width="124" height="124" alt="ALT" src="http://www.monsite.fr/3225-home_default/nom-de-limage.jpg">
</a>
<div style="width:125px; float:left; padding-left:25px; padding-top:10px">
<p class="s_title_block">
<a title="TITRE" href="http://www.monsite.fr/ttttt/1394-URLl">Nom du produit</a>
</p>
<p class="price_container">
<span class="price">A partir de 2,00 €</span>
</p>
</div>
<div style="float:left; width:45px; height:45px; margin-top:15px;">
</li>

J'ai cherché la chose suivante des les fichiers .css "ajax_block_product" mais je n'ai pas trouvé.

 

Voici deux screenshots, celui-ci c'est lorsque les images sont en 124*124px (pas de problème):

 

Et maintenant, voici un appaerçu de ce que ça donne quand je change la taille de l'image:

 

[Marlènee]

Merci à Julien qui m'a donné la solution, je la c/c ici :

 

 

Bonjour,

 

Je viens de regarder votre site et il y a effectivement une hauteur qui est affectée aux éléments <li> des produits populaires. Comme la compression CCC des fichiers CSS est activée je ne peux pas vous dire dans quel fichier ni à quelle ligne il faut faire la modification mais il faut trouver ce morceau de code:

#featured-products_block_center li {

et y changer la valeur "height" en passant de 220px à 290px.

 

Pour le fichier qui gère la page d'accueil, je pense que c'est dans le module homefeatured.

 

Pour les autres pages (catégories, promo, recherche...) la modification à faire est la même, normalement dans le fichier product-list.css. Il faut modifier la valeur de "height de cet élément:

#product_list li {