Perfect plugin for me 
How can I change the background color of a solved topic on the main page ?
Like some nice green to show everyone that this topic has a solution !
Best,
J.
You should be able to do it by targetting the post class via CSS.
Are you talking about the main list of all topics? If so, I don’t think this is possible.
If it’s on the topic page itself, AFAIK this is not possible either, because the only change to the “question” (first post) is the insertion of a paragraph in the post. You can style the post of the accepted solution, though, with CSS.
If someone knows a way, please share it because I also spent some time trying to do this. ![]()
I never added support for that, but on the actual topic page you can easily change it with
.topic-post.accepted-answer .topic-body {
background-color: #E9FFE0;
}
Sorry for reviving this very old topic, but I had the exact same question :
Is changing the background color of solved topic on the main page now supported ?
We would like to make it more visible on topic lists / search results if a topic has an accepted answer or not.
No we do not yet decorate rows in the topic list with a .solved class. Not against adding this if we can do that with no performance impact.
Je pense qu’à un moment donné, la classe .accepted-answer a été supprimée de ce div. Est-il possible de la réajouter afin que nous puissions styliser différemment le message de la réponse acceptée ?
Dans un autre sujet, @awesomerobot a indiqué que cette classe avait été ajoutée à la citation dans le premier message. Mais je n’ai pas pu la trouver pour le corps du message :
Oui, dans la citation du premier message, elle y est. Mais je parle du corps du message qui contient la réponse.
Je suis d’accord pour dire qu’il serait utile d’avoir une classe pour le div.topic-body d’un sujet résolu.
Je peux imaginer une solution de contournement comme celle-ci :
<script type="text/discourse-plugin" version="0.8.42">
api.onPageChange((url) => {
$('button.accepted').parents('div.topic-body:first').toggleClass('solved-post-container', true);
});
</script>
Avec un peu de CSS comme ceci :
.solved-post-container {
outline: 3px !important;
outline-color: var(--success) !important;
outline-style: solid !important;
}
Mais je pense qu’il faut tout de même prévoir un point d’accroche dans l’action de résolution pour que le contour disparaisse lorsque le sujet n’est plus marqué comme résolu (peut-être un cas limite, mais ce serait bien de le couvrir).
Avoir une classe spécifique pour le corps du sujet résolu réglerait le problème, je crois ![]()
TL;DR
Cela ajoutera une classe topic-solution aux messages marqués comme réponse.
api.addPostClassesCallback((attrs) => {
if (attrs.accepted_answer) return ["topic-solution"];
});
Les classes attribuées à un message sont déterminées ici.
Le hook que vous recherchez existe déjà à la toute fin de ce fichier… comme ceci.
L’API des plugins propose une méthode qui vous permet d’ajouter des classes à un message en fonction d’une condition.
Son fonctionnement consiste à appliquer un callback donné et à retourner une classe à ajouter si la condition est remplie.
Lorsque le callback est déclenché, Discourse lui transmet les attributs du message. Vous pouvez donc, par exemple, faire quelque chose comme ceci.
api.addPostClassesCallback((attrs) => {
console.log(attrs);
});
Si vous vérifiez la console, vous verrez qu’elle affiche les attributs de chaque message.
Ce ne sont là que des exemples ; il y en a davantage.
Heureusement pour vous, lorsqu’un message est marqué comme solution, Discourse en garde une trace et l’ajoute aux attributs du message. La propriété s’appelle accepted_answer.
Il vous suffit donc de vérifier si cela est vrai et d’ajouter votre classe personnalisée si c’est le cas. Comme ceci :
api.addPostClassesCallback((attrs) => {
if (attrs.accepted_answer) return ["topic-solution"];
});
Cela devrait suffire à basculer la classe, même si l’auteur du sujet (OP) change d’avis et choisit une autre solution. La classe sera retirée de l’ancienne réponse et ajoutée à la nouvelle.
Fantastique, merci beaucoup ! ![]()

