[RESOLU]Changement couleur police dans liste produits.

[HARVIE]

Bonjour,

Je pense que c'est tout bête mais je sèche :-). Dans la liste produits (product-list.tpl), je voudrais changer la couleur du titre et de la description courte. Mais quand j'essaye de changer ça depuis le global.css, les deux couleurs changent en même temps et je n'arrive pas à les changer séparement.

Une idée?

Merci d'avance,

Cordialement,

Hervé

[Enduro]

Bonjour Hervé,

Je cherche également cette info. Je pense qu'il faut modifier le fichier product-list.tpl et ajouter une ligne de code dans le css du thème. Je n'ai pas réussi, comme tu le dis cela doit être assez simple ce qui est encore plus énervant.

Alors si quelqu'un à la solution, merci de nous en faire profiter.

As tu trouvé Hervé ?

Cordialement,

Damien.

[ccyyrriillee]

Le style du titre et de la description courte est défini par la même ligne du global.css (la ligne 1423 du theme par défaut)
Tu dois normalement avoir un truc dans le genre:

ul#product_list li a {
   text-decoration: none;
   color: #374853
}

Donc là si tu changes la couleur, effectivement ça change pour les deux.

Maintenant si tu regardes bien, le texte du titre est donc dans une balise a contenue dans une balise h3 (normal...)
Mais le texte de la description courte est lui dans une balise a contenue dans une balise p (normal aussi...)

Donc si tu veux changer la couleur du texte de description il faut que tu ajoutes à ton css un truc du genre:

ul#product_list li p.product_desc a {
   color: tacouleurdetexte
} 

Et zou !

[HARVIE]

Merci pour la réponse...

[Enduro]

Ton code ne fonctionne pas sur mon thème (je n'ai pas le thème par défaut)

Dans le fichier product-list.tpl j'ai:

{$product.name|truncate:70|escape:'htmlall':'UTF-8'}


{$product.description_short|strip_tags|truncate:95:'...'}

et dans le CSS j'ai:

#center_column .categorie_product a {color:black;}
#center_column .categorie_product a:hover {color:#999;}

J'ai essayé de remplacer la balise a par b dans le tpl, la couleur de police est modifiée mais je n'ai plus de lien

{$product.name|truncate:70|escape:'htmlall':'UTF-8'}


{$product.description_short|strip_tags|truncate:95:'...'}

et ajouter dans le css ces deux lignes:

#center_column .categorie_product b {color:bred;}
#center_column .categorie_product b:hover {color:#999;}

Merci.
As tu une idée ?

[ccyyrriillee]

oula, tu m'as l'air bien parti pour t'emmeler les pinceaux

Le code que j'ai donné fonctionne pour le thème par défaut ou alors si comme moi tu t'es contenté de lui passer un coup de peinture pour qu'il soit à ton goût.

Maintenant si tu utilises un template différent et que les choses ne sont pas nommées ni organisées de la même façon, ça ne risque pas de marcher.

Laisse tomber les bidouillages dans les .tpl, pour changer une couleur de police tu n'a normalement besoin de toucher qu'au css.

Utilises donc firebug pour repérer la ligne en question.

Sinon donne l'adresse de ton site et dis moi exactement ce que tu veux modifier ça ira plus vite...

Et si c'est un template que tu as acheté, ben... contacte l'auteur ça sera encore mieux

[Enduro]

J'y suis presque,

J'ai remplacé le code product-list.tpl pour la description courte de mon thème:

{$product.description_short|strip_tags|truncate:95:'...'}

par celui de presta:

{$product.description_short|truncate:95:'...'|strip_tags:'UTF-8'}

et ajouter cette ligne de le css de mon thème:

#center_column .categorie_product li .product_desc a {color:#999}

La police est bien modifié et j'ai bien le lien avec la main de la page produit.

Le problème c'est que la petite fenêtre quand on s'approche du lien courte description (celle qui est tronqué à 250 caractère) m'affiche une écriture html (si je ne me trompe pas) du type agrave (avec & devant) et la phrase est entre ces deux symbole

et

et la je n'arrive pas à trouver ou peut être que la motif que j'ai faite n'est pas la bonne.

[Enduro]

J'été en train d'écrire le message envoyé précédemment avant de voir ton message.

Le Template est black & white modifié pour la version 1.3 de presta.

Je travaille sur ce thème en local sur mon pc. Croix tu que je suis sur la bonne voix pour trouver la solution ou que les lignes de code modifiées ne sont pas les bonnes.

J'utilise filezilla mais je ne trouve pas.

Merci.

[ccyyrriillee]

C'est de l'infobulle que tu parles quand tu dis 'la petite fenêtre" ?

Si c'est ça, il y a effectivement un petit soucis dans la dernière version de prestashop.

http://www.prestashop.com/forums/viewthread/76676/mise_a_jour_de_prestashop/apparition_du_code_source_en_infobulle_depuis_maj_1_dot_3_dot_2_dot_3

Mais tu peux t'en sortir plus simplement, je veux dire sans remplacer ton code par celui du thème presta...

[Enduro]

Mince, une solution trouvé mais je me retrouve avec un bug.

Oui, c'est bien ce problème d'infobulle.

Si je peux m'en sortir avec le code initial, as tu une idée de la ligne de code à ajouter dans le css.

Pour le titre et description du produit j'ai dans le css:

#center_column .categorie_product a {color:black;}
#center_column .categorie_product a:hover {color:#2A0DEA;}

donc quand je modifie la couleur de police, les deux sont modifiés

[ccyyrriillee]

a:hover ça correspond au lien quand il est survolé

Donc là, quand tu passe ta souris sur le lien contenu dans une balise "a" de .categorie_product, la couleur passe de "black" à "#2A0DEA"
Voilà tout ce que fait ce bout de css.

Et comme le titre et le texte sont tous les deux contenus dans une balise "a", ils sont tous les deux affectés par le même bout de css.

Donc pour affecter uniquement le texte de la description, il faut que tu regardes dans quelle balise cette balise "a" est contenue.

Certainement un "p"

Si c'est ça, ça donnerai un truc comme:

#center_column .categorie_product  p a {color:ta_couleur_de_texte}

Voilà je peux difficilement être plus clair

Sinon tout à l'heure je te parlais de Firebug, pas Filezilla.

Filezilla est un client ftp
Firebug sert justement à repèrer les lignes de css et le code html appelés par ta page.

http://www.prestashop.com/forums/viewthread/16736/integration/tuto_installation_et_utilisation_de_firebug_pour_modifications_du_template_couleurs_images__dot__dot__dot_

[Enduro]

En effet il est difficile d'etre plus clair.

J'avais bien compris, je ne sais pas pourquoi je t'ai indiqué filezilla, surtout que je l'utilise 7/7j en ce moment pour finir mon thème.

Le bout de code fonctionne , MERCI pour ton aide.

[ccyyrriillee]

Ah cool.

Oui bon, pour filezilla/firebug je me disais aussi...

Bon courage pour la suite.

[Enduro]

Le plus gros est fait, ouf

Merci.