Jump to content

Modifier CSS Balise Hn uniquement pour les fiches produits

lucho84
 Share

Recommended Posts

lucho84 Newbie

lucho84

Posted
Posted (edited)

Bonsoir à tous,

J'ai un boutique en PS 1.6.1.12 sur lequel j'ai environ 100 ref produits. Je souhaite utiliser les balises Hn sur la description courte et longue de mes produits (ainsi que sur les onglets rajoutés via Product Extra Tabs), pour renforcer la structure de mon site et améliorer mon SEO. Jusque là pas de problème TinyMCE (une fois les fonctions élargis) me propose les balises Titre.

Seul hic, la taille des balises Hn, la hauteur de ligne et la transformation du texte est géré par le global.css. Pas terrible tout ça, car les titres sont énormes, si on met du contenu un peu long sur 2 lignes par exemple, le line-height est trop élevé, et le texte est en majscule, du coup ça tranche beaucoup trop avec mon contenu en paragraphe...

Je ne souhaite pas modifier les balises Hn dans le global.css car pour le reste de mon site, tout est ok.

Du coup je suis obligé de coder directement dans le contenu, par exemple (le global.css donne par défaut pour les balises Hn -> text-transform: uppercase, le font-size:27px et le line-height:2.2em) :

Code source d'une description noté en paragraphe 

<p>Blablabla 1</p>
<p>Blablabla 2 </p>
<p><a href="https://www.monsite.com">En savoir plus sur</a></p>

Code source pour passer avec une mise en forme différente du global.css 

<h2 style="text-transform:none; font-size:15px; line-height:1.6em;">Blablabla 1</h2>
<h3 style="text-transform:none; font-size:15px; line-height:1.6em;">Blablabla 2</h3>
<h3 style="text-transform:none; font-size:15px; line-height:1.6em;"><a href="https://www.monsite.com">En savoir plus sur</a></h3>

 

Effectivement ça fonctionne bien, mais alors le faire sur 100 ref contenant 4 sections de contenu, c'est long et pas trop car il suffit que l'on modifie le contenu, il faudra de nouveau vérifier et corriger... Donc pour un rédacteur sans trop de connaissance informatique c'est impossible et pour moi je vais y passer ma vie...

Savez vous si on peut trouver une solution plus simple et automatique du style TinyMCE prend pour le page produit un css différent des autres contenus?

Edited by lucho84 (see edit history)
Link to comment
Share on other sites
doekia Community Regular

doekia

Posted
Posted

avec tinymce dans le BO tu fais des h2, h3, h4 à loisir avec les choix paragraphe "Titre 2", "Titre 3", ...

Et tu fais tes règles plus précises les concernant pour qu'elles surchargent celles du global

Ici ce sera par exemple: 

#product #center_column .page-product-heading .rte h2 {
    text-transform:none; font-size:15px; line-height:1.6em;
}

La règle est probablement a ajuster en fonction de ton thème

Link to comment
Share on other sites
lucho84 Newbie

lucho84

Posted
  • Author
Posted

Bonjour doekia,

Je me suis rendu compte que dans la description courte d'une fiche produit, la balise H1 appelle un css présent dans le product css 

.pb-center-column h1 {
  color: #351e11;
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  text-transform: none;
  font-family: "Calibri", sans-serif;
}

Mais pas pour le h2 et h3, j'ai donc dupliqué ce code en changeant pour .pb-center-column h2 (ensuite h3) et ça marche parfaitement.

Par contre pour ma description longue il va chercher le code par défaut du global css. J'ai bien compris ce que vous me préconisez et comme vous avez pu le constater j'ai des connaissances en css (certes je ne suis pas un foudre de guerre mais je me débrouille quand même pas trop mal, chaque jour j'apprends de nouvelles choses trés intéressantes) mais j'ai du mal à comprendre le cheminement.

Je m'explique, je cherche à comprendre comment depuis un tpl, un code css spécifique est appelé car par exemple si je vais voir dans mon product.tpl j'ai 

{if $product->description_short || $packItems|@count > 0}
				<div id="short_description_block">
					{if $product->description_short}
						<!--<div id="short_description_content" class="rte align_justify" itemprop="description">{$product->description_short}</div>-->
                    {/if}

mais je ne sais pas comment depuis ce code il fait pour prendre les règles css du product.css. Je suis sur que je loupe quelque chose et tant que je le louperais, j'aurai du mal à comprendre comment surcharger le global.css pour faire en sorte qu'il prenne mon code crée.

Pourriez vous m'expliquer comment reconnaitre la liaison css / tpl?

Par exemple voici ce que je peux lire depuis firebug lorsque j'examine la balise h3 d'un description longue... Zut serveur ovh en panne de courant je n'arrive de nouveau à accéder à mon site :angry: dès qu'il remette le courant (littéralement parlant, leur 2 lignes EDF sont down et les groupes éléctrogènes aussi), je vous mettrais le résultat de firebug

Merci en tout cas pour votre patience

Link to comment
Share on other sites
doekia Community Regular

doekia

Posted
Posted (edited)

css veux dire cascaded style sheet.

comme dans une cascade l'eau tombe de haut en bas

les sélecteurs les plus précis surchargent ceux de précision inférieure

à précision équivalente, le dernier lu surcharge les précédant

 

donc ici: 

#product .pb-center-column .rte h1 { ... }

que tu mets dans la css de ton choix à condition qu'elle soit lu par la page.

global.css est sur toutes les pages

Edited by doekia (see edit history)
  • Like 1
Link to comment
Share on other sites
lucho84 Newbie

lucho84

Posted
  • Author
Posted (edited)

Ok j'ai donc ajouter le code avant le code appelé ligne 920 (sur ma capture d'écran au dessus) 

#product .pb-center-column .rte h3 {
  color: #351e11;
  margin: 0;
  font-size: 15px;
  line-height: 1.6em;
  text-transform: none;
  font-family: "Calibri", sans-serif;
}

Je vide mon cache, rafraichit ma page et mon code n'est pas appelé.

J'ai bien compris le système de surcharge, mais votre code je l'analyse de la façon suivante :

  • #product : sélecteur qui permet d'éxecuter les variables inscrites entre cochet uniquement sur les pages produits (donc pas sur les listes des produits, catégorie, cms etc...). Si par exemple je veux faire la même chose pour les catégories, je mets #category ou #category-tree-branch selon où je souhaite appliquer la modification.
  • .pb-center-column : condition pour que le sélecteur s’exécute uniquement sur la colonne centrale
  • .rte : class appelé par le div contenant l'objet de notre modification (en l'occurence le bloc texte que l'on gère au travers de TinyMCE)
  • h3 : variable sur laquelle on va appliquer les conditions standars de mise en forme (font-size, text-transform tec...)

Ai je compris ou suis je encore à côté de la plaque?

Edited by lucho84 (see edit history)
Link to comment
Share on other sites
lucho84 Newbie

lucho84

Posted
  • Author
Posted

Bonsoir doekia,

Merci pour tout, j'ai donc regardé la classes appelée qui est effectivement .rte par contre dans la description longue je n'ai pas la condition .pb-center-column appelé donc j'ai modifié le code par 

#product .rte h3 {
  color: #351e11;
  margin: 0;
  font-size: 15px;
  line-height: 1.6em;
  text-transform: none;
  font-family: "Calibri", sans-serif;
}

Et ça fonctionne parfaitement! il y a donc 2 surcharges sur ma page produit l'une qui s'applique sur la description courte au travers de .pb-center-column et l'autre uniquement sur la class rte dans le product tpl.

J'ai donc réassayé sur un autre besoin que j'avais : j'ai greffé un module de contenu libre CMS sous mon bloc catégorie left mais je n'avais aucune mise en page pour ce bloc et à si je modifié le css appelé mais il s'appliquait à tout le site, par vos conseils je suis arrivé à créer une surcharge css sur ma colonne de gauche prenant de base le sélecteur #page et j'ai attribué ma nouvelle classe dans mon tpl et ça roule.

Vraiment un grand merci, je sais maintenant surchargé une partie de mon site :)

Pour chrome, je n'utilise pas (pas fan), j'utilise Firefox mais niveau cache il faut le vider trés régulièrement, après depuis quelques maj je le trouve de moins en moins bien.

Link to comment
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
 Share
Go to topic listing
×
×
  • Create New...