Choix de couleur des articles : CSS [RESOLU]

[stevent]

Bonjour à tous.

 

Je me tourne vers vous après m'être cassé la tête sur la mise en forme du choix des couleurs de mes artciles sur ce site : http://tempo.printingandco.com/index.php?id_product=51&controller=product#/couleur_t_shirt_homme_court_col_rond-white/tailletshirt-s/impressiontshirt-coeur

 

Version : 1.5.4

Thème : default modifié

 

Je ne suis pas expert mais je maitrise les bases du CSS.

 

Je suis conscient que pour modifier l'apparence de mes choix de couleurs, je pourrais tout simplement modifier mon product.css et modifier le #attributes fieldset{}

 

Problème dans ce cas : tous les autres types d'attributs seront modifiés aussi ! ( Ascenseur et bouton radio )

 

Hors je ne veux modifier le visuel que de l'attribut couleur.

 

Je suppose qu'il suffit de mettre la partie {elseif ($group.group_type == 'color')} de mon product.tpl entre balise et le modifier dans mon css mais quoi que je face, aucune modif ne se fait.

 

Quelqu'un peut'il m'aider pour ne modifier que cette partie COULEUR ???

 

Merci d'avance.

Edited October 4, 2013 by stevent (see edit history)

[PrestyNews]

Bonjour Stevent. Je ne suis pas sûr de bien comprendre. Comment veux-tu modifier exactement l'apparence de ton choix de couleur ?

[stevent]

Merci pour ta réponse PrestyNews !

 

Sur mon site sité dans l'explication de ce topic, on peut voir ceci : 

 

 

Ce sont en fait des attributs en mode COULEUR pour lesquels j'ai ajouté une image tout simplement. Et j'ai modifié les css pour obtenir ce cadre gris etc. 

 

A présent, je voudrais faire ceci : 

 

 

Pour ce faire, j'ai tout simplement modifié mon product.css en changeant ca : 

#attributes fieldset {
    background: none repeat scroll 0 0 #E2E2E2;
    border-radius: 4px 4px 4px 4px;
    color: #666666;
    padding: 2px 35px;
    position: relative;
    width: 496px;
}

Par ca :

#attributes fieldset {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 2px solid #E2E2E2;
    border-radius: 4px 4px 4px 4px;
    color: #666666;
    padding: 2px 35px;
    position: relative;
    width: 492px;
}

Jusque là, je suppose que tu me suis.

 

Mon problème : 

 

Si je me contente de modifier le #attributes fieldset {} , cela modifie aussi la mise en page des attributs de type asceneur et de type radio. HORS je ne veux modifier la mise en page que pour les attributs de type COULEUR  sans affecter les autres attributs.

 

J'espère que j'ai été plus clair.

 

Merci à toi.

[Bondaty and Co]

sous réserve d'avoir bien compris:

 

1er : vous devez avoir dans votre product.css :

#attributes .attribute_list #color_to_pick_list{} 

si vous ne l'avez pas ajoutez le

 

Ajoutez votre code

background: none repeat scroll 0 0 #FFFFFF;
border: 2px solid #E2E2E2;
border-radius: 4px 4px 4px 4px;
color: #666666;
padding: 2px 35px;
position: relative;
width: 492px;

2: Dans votre product.tpl après: {if ($group.group_type == 'select')}

ajouter <div id="select" class="clearfix">

après </select> ajouter </div>

puis dans votre .css

#attributes .attribute_list #select{
background: none repeat scroll 0 0 #E2E2E2;
border-radius: 4px 4px 4px 4px;
color: #666666;
padding: 2px 35px;
position: relative;
width: 496px;
}

3 : Dans votre product.tpl après: {elseif ($group.group_type == 'radio')}

remplacé <ul> par <ul id="radio" class="clearfix"> puis dans votre .css

#attributes .attribute_list #radio{
background: none repeat scroll 0 0 #E2E2E2;
border-radius: 4px 4px 4px 4px;
color: #666666;
padding: 2px 35px;
position: relative;
width: 496px;
}

dégagez le code dans #attributes fieldset

Edited October 3, 2013 by Muche (see edit history)

[stevent]

Merci beaucoup Muche ! c'est la solution exact !!! Mille fois merci.

 

Sur le coup j'avais cru comprendre que "dégagez le code dans #attributes fieldset" voulait dire de le supprimer mais j'ai juste du le modifier un peu.

 

Encore merci et à la prochaine !

[Bondaty and Co]

Parfait !

 

merci de mettre votre topic en [RESOLU]