Je suis en train d’apporter de très légères modifications habituelles à plusieurs styles dans un seul composant de thème maître pour notre site. Cela signifie que nous n’avons pas besoin de faire un fork ou de modifier les styles distants sans craindre que nos modifications soient effacées lors de la prochaine mise à jour. Jusqu’à présent, mes modifications ont été universelles, comme la modification du bouton « J’aime », etc.
Je voulais savoir s’il était possible de cibler un style exact du composant de thème sans affecter les autres ? Peut-être via certaines variables de données ?
Je ne veux pas avoir à créer un composant de thème séparé pour quelque chose d’aussi mineur. J’aime l’idée d’avoir un seul composant de thème pour mes modifications universelles..
Oui, vous pouvez généralement vous fier à la spécificité dans CSS. Si vous n’êtes pas familier avec CSS, cela se résume à ceci : si vous avez plusieurs styles ciblant le même élément, le style le plus spécifique l’emportera.
Donc, ce que vous devrez rechercher, c’est 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 la prise de plugin. Lorsqu’une prise 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 facile de styliser ce dont vous avez besoin.
Si c’est difficile à suivre, donner 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é ?
@awesomerobot Pour éviter toute confusion, je suis encore habitué à appeler les thèmes complets « styles », car nous sommes toujours en train d’importer notre grand forum depuis un autre. Cependant, en parlant de style, je voulais dire thème, désolé !