Modifier les icônes couleur des déclinaisons produit

[Laurent NODOVA]

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:

    

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 😊

[Mediacom87]

Bonjour,

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

[Laurent NODOVA]

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 😀

[Mediacom87]

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.

[Laurent NODOVA]

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