Jump to content
ccilou31

Modifier css produits

Recommended Posts

Bonjour,

 

Peut-être que je m'aventure un peu trop mais bon... :)

 

J'aimerais modifier le CSS qui concerne les produits. Mon but : passer en H2 le résumé de mon produit en gardant une taille de police normale et un interligne normal.

 

Je ne sais pas quel est le fichier à modifier car lorsque j'ouvre le dossier CSS, il s'affiche un certain nombre de fichiers et d'autre part, je suppose qu'il y a un endroit bien précis dans ce CSS qui concerne le résumé produit.

 

post-316164-0-37701800-1328972371_thumb.png

 

Qui peut me dire quel fichier je dois prendre et où je dois faire la modif ? Avec des mots très simples car je suis néophyte :)

 

Merci beaucoup.

Share this post


Link to post
Share on other sites

avant de changer le css, il faut modifier le fichier product.tpl pour mettre la description en h2, ensuite donner un id="" ou class="" et enfin introduire ça dans le css ( /css/product.css )

 

Ps : par défaut, la description est en <div id="short_description_content">

Share this post


Link to post
Share on other sites

Ouh là, là, merci beaucoup pour l'explication mais je suis déjà perdue à la deuxième ligne. Que dois-je entendre par : donner un id="" ou class="" ?

 

Si je mets en H2, il va me grossir la police et agrandir l'interligne or je veux du h2 qui apparaisse comme du texte normal (c'est pour le référencement uniquement) où faut-il que je modifie (ou rajoute) la taille et l'interligne ? dans le fichier product ?

 

Je vais aller voir comment ça se présente et si je peux me lancer dans l'aventure... ou non... :)

Share this post


Link to post
Share on other sites

ok, regarde :

par défaut : à la ligne 192 : le block de la description courte est :

{if $product->description_short}
<div id="short_description_content" class="rte align_justify">{$product->description_short}</div>
  {/if}

 

 

on modifie ce block en :

 

{if $product->description_short}
<h2 id="short_description_h2" class="rte align_justify">{$product->description_short}</h2>
  {/if}

et dans product.css on créé ce nouveau h2 avec l'id : short_description_h2

 

h2#short_description_h2 {font: 12px Arial,Helvetica,Sans-Serif;}

 

bon là, tu modifie à ta guise.

j’espère que c'est clair maintenant. :)

Share this post


Link to post
Share on other sites

salut

pour savoir quel fichier css est a modifier, installes firebug dans mozilla firefox.

une fois dans la page que tu veut modifier, cliques sur la bestiole en haut droite de ton écran afin de lancer firebug et en bas une page en html va s'afficher avec le code lu par le navigateur. si tu clique sur une div ou autre dans ce-dit code html, tu verras les propriétés css sur la droite ainsi que le nom du fichier qui lui applique ces valeurs.

très très pratique !

Share this post


Link to post
Share on other sites

Merci à vous deux.

 

@flo : J'ai téléchargé firebug, c'est assez bluffant en effet et ça doit être génial pour un développeur même que ça pourra peut-être me servir à l'occasion :)

@Maymo : merci pour l'explication simplifiée mais j'ai peur de mettre le bazar dans mes fichiers et de le regretter. (je garde ton site en favoris d'ailleurs, ça pourrait servir)

 

Pour le moment, je pense que je vais me contenter des outils SEO mis à disposition par Prestashop et rester dans les modifications de mon niveau :)

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