How do I customise the styling of "solved topics" in the main list?

Perfect plugin for me :smile:
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. :wink:

1 « J'aime »

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;
}
3 « J'aime »

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.

3 « J'aime »

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 :

1 « J'aime »

Cette classe est définitivement visible

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 :slight_smile:

1 « J'aime »

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.

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L819-L829

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.

4 « J'aime »

Fantastique, merci beaucoup ! :slight_smile:

1 « J'aime »