Modifier taille images vignettes produits

[Céline.B]

Bonjour,

 

Voici mon problème :

 

Je souhaiterais modifier la taille des images de mes produits à l'intérieur de leur vignettes, afin qu'elles soient aussi grande que le bloc qui l'entour.

 

Il semble que la modification de la taille des images dans les préférences puis la régénération des miniatures ne soit pas la solution...

 

Quelqu'un pourrait-il m'aider ?

 

Merci.

[BriceVanZeg]

Bonjour,

ton site est il deja en ligne, que nous puissions voir quelle ligne a changé dans ton product-list.css.. si c'est sur la page categories, sinon, c'est product.css si c'est la page produit.

 

Bon courage

 

Brice

[Céline.B]

Bonjour Brice,

 

Merci pour votre réponse.

 

Non mon site n'est pas encore en ligne.

 

Dans le menu haut horizontal j'ai créé un onglet marque et un onglet univers, avec des sous catégories pour chacun de ces onglets.

Lorsque je clique sur une marque par exemple, cela me dirige vers une page avec tous les produits de cette marque.

 

Je souhaiterais qu'à ce niveau, l'image présente de chaque produit "remplisse" entièrement le bloc carré qui l'entoure.

 

Je ne suis pas experte en code, j'arrive à "bidouiller" lorsqu'on me guide !

 

De plus, je souhaiterais faire la même chose pour tous les produits de toutes les catégories et sous catégories, ainsi que pour ceux qui apparaissent sur la page d'accueil en nouveauté et populaire.

 

J'ai pris le thème par défaut que j'ai dupliqué, mais je n'ai pas apporté de très grandes modifications dans le code, sauf pour ajouter un nouveau fond d'écran, ou modifier des couleurs, ou fixer la barre de navigation.

 

A ce propos, je cherche  également à insérer mon logo dans la barre de navigation à la place du numéro de téléphone, ainsi que positionner le bloc top menu au même niveau que contact et connexion, afin de n'avoir qu'une barre de navigation fixe et "une seule ligne" sur laquelle, de gauche à droite il y aurait :

LOGO - ACCUEIL - MARQUE - UNIVERS - PANIER - RECHERCHE - CONTACT - CONNEXION

 

Pensez-vous que cela soit possible ?

 

Cela fait beaucoup de question, mais n'étant pas experte, cela m'aiderait vraiment !

 

En vous remerciant pour votre réponse,

 

Céline

[Céline.B]

Quelqu'un pourrait-il m'aider s'il vous plait ??

 

Merci par avance.

 

Céline

[Guest]

mettez votre site en ligne... et quelqu'un sera en mesure de vous aider !

 

n'ayant pas accès au thème que vous utilisez actuellement il n'est pas possible d'apporter de réponse claire, désolé.

[azer]

Pour prestashop 1.7.4.2 vous mettez ce code dans le fichier "custom.css" :

/* recadrer les images des vignettes */
#js-product-list > div.products.row > article > div > a > img {width:100%;margin-left:0px;}
#wrapper > div > section > div > article > div > a > img {width:100%;margin-left:0px;}

[Mediacom87]

Si vous utilisez le template par défaut de PrestaShop alors vous pouvez mettre ce code css dans le fichier assets/css/custom.css

#products img, .featured-products img, .product-accessories img, .product-miniature img {
	margin-left: 0;
	width: 100%;
}

Si vous utilisez un template personnalisé il faut regarder le code css appliqué sur l'image produit dans le listing. Clique droit et Examiner l'élément ou inspecter l'élément

[azer]

@Mediacom87   En pointant toutes ces classes avec le code que je proposais vous risquez de dénaturer certains éléments.

[Mediacom87]

Si vous le dites.

De toute manière cela n'a pas d'importance puisque vous avez déterré un message d'il y a 3 ans à une époque où la 1.7 n'existait, donc plouf dans l'eau de l'oubli.

[azer]

Si je le dit.. C'est parce que j'ai vu ces classes aligné dans theme.css pour désigner le cadre des vignette produits... et que je l'ai essayer... et qu'il y avait des élément qui ne se comportait pas comme convenu ... Donc ce n'est pas parceque je le dit que c'est vrai, c'est parce que je l'ai essayé.

"cela n'a pas d'importance puisque vous avez déterré un message [..] donc plouf dans l'eau de l'oubli "   Tu veux une médaille ?

A ton avis pourquoi est ce que j'ai détéré ce sujet ??

Parce que c'est un résultat pertinent qui s'affiche en première page des résultats pour le moteur de recherche Google concernant ce sujet et qu'il n y en a pas d'autre de pertinent, et donc il y aura d'autres individus qui le liront jusqu'au bout pour voir si ça leur apporte une solution ... Serieux faut réfléchir des fois! Suffit pas d'être consanguin conforme a son époque pour avoir raison !

Comme c'est agaçant tous ces random de réac qui se manifeste lorsqu'on déterre utilement un sujet..

 

 

Edited October 1, 2018 by azer (see edit history)

[Mediacom87]

Pas de soucis, si vous pensez que c’est bon, alors je ne critique pas vos tests.

perso j’ai aussi testé sans le moindre soucis, mais j’ai pu louper un truc, l’erreur est humaine.

par contre, votre code css faudra apprendre à l’optimiser pour qu’il soit encore plus fabuleux.

[azer]

C'est un forum d'entraide j'apporte ma pierre a l'ouvrage je n'ai jamais prétendu que mon code était fabuleux.

J'ai mis une ligne de code pour les vignette présente sur les pages de catégorie et une ligne de code pour les vignette présente dans la section produit complémentaire sur les fiches produits.

[Mediacom87]

Pas de soucis, vous apportez une réponse c’est déjà plus que beaucoup de participants.

Par contre, je viens de vérifier et je ne repère aucun soucis avec la proposition que j'ai faite, mais peut être que je passe à côté d'un cas particulier qui ne concerne pas le template de base de al 1.7.

Page catégorie

 

Page d'accueil

 

Produits associés

[azer]

Bon bah finalement vos sélecteurs étaient mieux. Je les utilise.

Maintenant que les images sont correctement cadré (si elles sont carrées^^) je vais supprimer l'aperçu, il me reste a trouver un bon effet de survole des vignettes.

Edited October 10, 2018 by azer (see edit history)