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.
AI-generated summary
The discussion revolves around customizing the styling of “solved topics” in the main list. Jerome_Bouvard initially asked how to change the background color of a solved topic on the main page, but downey and sam mentioned that it’s not possible without adding a custom class.
sam provided a CSS solution to style the accepted answer on the topic page, but not the main list. alxsal and ggurbet requested support for changing the background color of solved topics on the main page. sam stated that it’s not currently supported, but it could be added in the future.
Johani provided a solution using the api.addPostClassesCallback method, which adds a topic-solution class to posts marked as the answer. This allows for styling of solved topics on the main list. loginerror also provided a workaround using JavaScript, but Johani’s solution is more straightforward and efficient.
The solution is a simple JavaScript code snippet that adds the topic-solution class to posts marked as the answer:
api.addPostClassesCallback((attrs) => {
if (attrs.accepted_answer) return ["topic-solution"];
});
This allows for styling of solved topics on the main list using CSS.
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 ! ![]()

