Styler boutons radio en CSS pour sélection de taille

[iPoussin]

Bonjour tout le monde !

 

Je travaille pour un site qui vend des chaussures.

A l'heure actuelle, j'ai réussi à changer la sélection de la taille dans une liste déroulante dans la fiche produit par des boutons radio.

 

Je voulais un rendu tel que celui-ci : http://www.laredoute.fr/ppdp/prod-500950667.aspx?docid=00000000000001

Si jamais le lien ne marche plus, jetez un oeil sur une fiche produit chaussure de la Redoute.

 

J'ai remarqué avec le thème que le code du formulaire s'articule de la façon suivante :

<div>

   <span>

      <input ....> <!-- Le bouton radio en question -->

    </span>

   <span>38</span> <!-- Le label taille associée au bouton radio -->

</div>

 

La problématique est donc la suivante : il ne m'est possible à l'heure actuelle de ne charter soit le bouton radio, soit le label mais pas les deux en même temps, donc impossible d'obtenir le rendu que je souhaite.

Je n'arrive pas à trouver de module Prestashop proposant un tel chartage.

 

Dois-je modifier le comportement du template ? Si oui, à quel endroit et comment ?
Ou tout simplement, quelle est la démarche à suivre (Si c'est possible dans la configuration actuelle du code HTML) pour charter en CSS ?

 

Je vous remercie !

 

Killian

[Arnaud_69]

Bonjour,

 

Je regarde le catalogue, mais je ne vois pas de bouton radio ! Tu pourrais être plus précis stp ?

Eventuellement un screen de ce que tu as et de ce que tu voudrais pour expliciter un peu plus (sinon c'est dans les templates)

[iPoussin]

Oops, je parlais de la sélection de taille j'ai pas précisé pardon.

 

 

Donc ça c'est le rendu que je voudrais, sur la Redoute :

 

http://imageshack.com/a/img924/5201/jQChon.png

 

Et donc ça c'est ce que j'ai à l'heure actuelle sur mon site :

http://imageshack.com/a/img923/7696/5pz9Y0.png

 

En sachant que le texte à côté du bouton radio n'est pas cliquable (Ce que j'ai mis en avant dans l'extrait de code précédent, le label est dans une balise bien séparée).

 

Si jamais tu as besoin d'autres explications, je suis là bien entendu

 

Kiki

[Arnaud_69]

En fait, toi tu as des boutons radio, sur la redoute c'est du ul li li li, avec un style css selected qui pose un border différent en largeur.

Mais c'est lié à du javascript, et après tu as la problématique du formulaire.

Problème donc un peu complexe.

C'est bien dans le template qu'il faut voir ça, mais voir aussi avec ton thème !

Donc, normalement c'est de l'ajax, ou modifier en un select option avec display in line, plus compliqué...

A voir sur place !

[iPoussin]

Okay, bon pour l'instant je ne me sens pas à l'aise avec l'idée d'aller taper dans le template.
Je vais essayer ta piste pour le select en display: inline-block.

 

Merci beaucoup pour tes réponses !