Modifier son thème de site

[nathan_EcoCentre]

Hello,

nous sommes en train d’essayer de créer notre thème personnalisé pour le site internet.
Cependant nous ne comprenons pas toujours comment faire.

En effet, jusqu’ici nous avons fonctionné ainsi :

1. Afficher la page à modifier
2. Clic-droit inspecter
3. Aller chercher le bloc qui nous intéresse dans l’arborescence de la page
4. Repérer le nom de sa classe de style
5. Inclure une modification de sa classe de style dans notre thème personnalisé.

Parfois cela fonctionne, et parfois non… comme l’exemple ci-dessous :

Nous voudrions mettre en gras les titres des articles sur nos pages standards d’article :
Voici le code :

Voici donc ce que nous avons ajouté à notre thème :

Mais… si l’on regarde de plus près la première image, on remarque que notre

font-weight: bold;

est barré dans le style de la classe…
Comment devrions-nous faire pour mettre ces fichus titres en gras ?
Car jusqu’ici nous avions bricolé en mettant les balises html dans les titres des articles du site web.
Exemple ici :

Et ça fonctionne !

Merci bien.
Sachant que ceci n’est qu’un exemple parmi pléthore de cas où cela ne fonctionne pas.

Merci !

[corentin]

Bonjour @nathan_EcoCentre,

Tout est question de spécificité CSS. Vos règles personnalisées sont moins prioritaires que les règles standard car moins spécifiques, même si elles sont chargées après le thème standard. Tu peux survoler le sélecteur de la règle pour voir la spécificité. Deux solutions s’offrent à toi…

---

Solution 1 : Ajouter le mot-clé !important

.product-title {
  font-weight: bold !important;
}

Solution 2 : Égaler ou dépasser la spécificité standard

.product-container .product-title {
  font-weight: bold;
}

[nathan_EcoCentre]

Bonjour,

merci pour ton retour.
J’avais bien sûr testé la solution n°2, en étant plus spécifique, mais même résultat.

Mais aucun soucis. La solution n°1 fonctionne parfaitement !

Merci bcp !