Jump to content
Laurent NODOVA

Modifier les icônes couleur des déclinaisons produit

Recommended Posts

Bonjour tout le monde,

Je viens vers vous car je ne suis pas un grand expert de Prestashop et j'aimerais faire quelques petites modifs sur la version test de notre site.

Pour info, notre site est le suivant: https://www.nodova.com/fr/

Nous faisons des bijoux fantaisie à partir d'une graine d'Amazonie, en fair-trade avec une coopérative de femmes en Equateur.

Je suis très satisfait du site qui a été fait par le développeur (qui ne travaille malheureusement plus avec nous depuis la sortie du site), mais j'ai quelques soucis avec les icônes de couleur des différentes déclinaisons de nos produits. Voici par exemple ce que cela donne sur l'e-shop ou sur une page produit:

1303108678_Capturedecran2019-01-31a11_46_11.thumb.png.ad4cc24535a7eee86eb73b5f653661cb.png  1924585514_Capturedecran2019-01-31a11_46_26.thumb.png.fcfa32b75030fd475e52d691f62fac46.png  1029068404_Capturedecran2019-01-31a11_54_53.png.b9ee10e8f9b76d634a23bbf9b1bc4bb3.png

En fait, les icônes utilisés pour les déclinaisons sont des images PNG en 500x500 ou 215x215, et comme vous pouvez le voir elles ne sont pas centrées dans la pastille.

J'aurais voulu savoir s'il était possible de:

- centrer l'image dans la pastille
- modifier la taille de la pastille (pour afficher les icônes un peu plus gros pour plus de lisibilité)
- Afficher le nom de la déclinaison (ie le nom du duo/trio de couleur écrit dans les Attributs) quand on passe la souris sur l'icône

 

Merci beaucoup de votre aide 😊

Share this post


Link to post
Share on other sites

Bonjour,

Quel navigateur utilisez vous, car je viens de regarder sur fiirefox et c’est bien centré.

Share this post


Link to post
Share on other sites
il y a 26 minutes, Mediacom87 a dit :

Bonjour,

Quel navigateur utilisez vous, car je viens de regarder sur fiirefox et c’est bien centré.

J'utilise Chrome, et en effet en ayant consulté via Firefox et Safari, les icônes sont centrés. Le soucis doit donc venir de Chrome + niveau de zoom sur la page (80% au lieu de 100).

Merci pour cette remarque 😀

Share this post


Link to post
Share on other sites

Pour la dimension :

fichier custom.css de ton template tu peux mettre ces règles et modifier les dimensions comme tu le souhaites

.input-color {
	width: 1.375rem;
	height: 1.375rem;
}
.color, .custom-checkbox input[type="checkbox"] + span.color {
	width: 1.375rem;
	height: 1.375rem;
}

bien entendu mettre les même valeurs dans les 2 règles CSS.

Pour l'affichage en hover du nom là je ne sais pas trop, car l'élément semble être présent de base

<span class="show-for-sr">Trio PopArt (T46) Jaune Acide/Bleu Denim/Noir</span>

après je ne sais pas comment cela doit fonctionner.

Share this post


Link to post
Share on other sites

Merci beaucoup pour toutes ces astuces et conseils.

Je viens de faire quelques tests pour changer la taille des icônes.

Premièrement, ce qui est étrange c'est que le fichier custom.css est entièrement vierge, mais les lignes indiquées sont présentes dans theme.css du même dossier (themes/[nom du thème]/assets/css).

Ensuite, changer les valeurs indiquées n'impacte pas la taille des icônes dans l'E-shop pour moi. Mais les lignes "width" et "height" suivantes oui:

.variant-links .color {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 0 2px;
  background-repeat: no-repeat;
  background-position: center;
  border: solid 2px #f5f5f7; }
  .variant-links .color:hover, .variant-links .color:focus {
    border-color: #5a8f43; }

Par contre, en effet sur les pages produits, ce sont les 2 règles CSS que vous m'avez indiqué qui marchent.

C'est assez contre-intuitif, puisque dans un menu ce sont des mesures en "rem" qui comptent (je ne connais pas cette unité d'ailleurs), et dans l'autre c'est en px.

 

Et pour l'affichage en hover, en effet je n'arrive pas à trouver où cela a peut être pu être désactivé :S

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More