Jump to content
stevent

Choix de couleur des articles : CSS [RESOLU]

Recommended Posts

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 by stevent (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Merci pour ta réponse PrestyNews !

 

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

 

attributs.png

 

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 : 

 

attributs2.png

 

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.

Share this post


Link to post
Share on other sites

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 by Muche (see edit history)

Share this post


Link to post
Share on other sites

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 !

  • Like 1

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