Puis-je cibler un style avec CSS ?

[TheDarkWizard]

@awesomerobot

Oui, vous pouvez généralement vous fier à la spécificité dans CSS. Si vous n’êtes pas familier avec CSS, cela revient à ceci : si vous avez plusieurs styles ciblant le même élément, le style le plus spécifique l’emportera.

<div class="custom-container">
  <a class="custom-link">lien ici</a>
</div>

Ce que vous devez donc rechercher, c’est de savoir si l’élément (ou un élément parent) dans le composant que vous essayez de modifier possède une classe unique quelque part… quelque chose comme :

Dans l’exemple ci-dessus, soit .custom-link, soit, s’il n’y a pas de classe directe sur l’élément, en utilisant le parent comme .custom-container a. Si le composant a le style défini à l’origine comme .custom-link, vous pouvez vous assurer qu’il est remplacé en ciblant plus spécifiquement a.custom-link.

S’il n’y a pas de classe unique quelque part dans le composant, vous devriez également pouvoir utiliser le conteneur de sortie du plugin. Lorsqu’une sortie de plugin est utilisée dans une personnalisation, une classe personnalisée est ajoutée au conteneur. En reprenant l’exemple du style d’un lien, cela pourrait ressembler à .above-site-header-outlet.brand-header a où « brand-header » est le nom du modèle ajouté à partir du composant.

Dans le pire des cas, vous pouvez également demander à la personne qui a créé le composant d’ajouter une classe si vous ne trouvez pas de moyen simple de styliser ce dont vous avez besoin.

Merci beaucoup. Cela aide certainement.

@awesomerobot

un exemple spécifique du composant que vous essayez de styliser serait utile.

Par exemple, j’ai installé Graceful. Graceful Theme ce dont je me rends compte maintenant que vous l’avez publié comme suite d’un style précédent.

Dans mon composant de thème universel, j’ai fait des choses comme télécharger des ressources d’arrière-plan, changer le bouton « J’aime » et quelques autres choses, mais j’ai réalisé que je voulais changer la couleur d’arrière-plan dans celui qui utilise la palette sombre avec ce que je veux, sans affecter celui qui utilise la palette claire.

Pour être précis, ceci :

background-color: $primary-very-low;

Maintenant, je veux faire autant que possible dans un seul composant de thème car c’est techniquement le même style, jusqu’à ce que de petites choses comme celle-ci commencent à apparaître, qui n’étaient pas des changements universels. Je ne veux pas avoir à créer un composant « Sombre » et un composant « Clair » si possible.

L’objectif ici est de laisser Graceful tel quel, à part les altérations de palette, et de tout faire depuis notre propre composant, afin que lorsque vous ou quelqu’un d’autre publiez une mise à jour pour eux, nous n’ayons pas à réappliquer nos modifications.

J’ai remarqué que Discourse est très axé sur les variables, ce que j’adore, et lire les guides de thématisation a été un plaisir. J’ai remarqué des choses comme [data-topic-id=“117”] existent, alors peut-être que quelque chose comme [data-theme-id] pourrait être proposé ?