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 Mi Piace

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 Mi Piace

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 Mi Piace

Penso che a un certo punto la classe .accepted-answer sia stata rimossa da questo div. È possibile aggiungerla di nuovo in modo da poter stilizzare diversamente il post della risposta accettata?

In un altro argomento, @awesomerobot ha detto che questa classe è stata aggiunta alla citazione nel primo post. Ma non riesco a trovarla per il corpo del post:

1 Mi Piace

Quella classe è sicuramente visibile

Sì, nella citazione del primo post c’è. Ma sto parlando del corpo del post che contiene la risposta.

Sono d’accordo che sarebbe utile avere una classe per il div.topic-body del post risolto.

Posso pensare a una soluzione alternativa come questa:

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

Con un po’ di CSS del genere:

.solved-post-container {
outline: 3px !important;
outline-color: var(--success) !important;
outline-style: solid !important;
}

Ma credo che sia comunque necessario un aggancio all’azione di risoluzione, in modo che il contorno scompaia quando il post non è più risolto (forse un caso limite, ma sarebbe bello coprirlo).

Avere una classe per il corpo del post risolto risolverebbe il problema, credo :slight_smile:

1 Mi Piace

TL;DR

Questo aggiungerĂ  una classe topic-solution ai post contrassegnati come risposta.

api.addPostClassesCallback((attrs) => {
  if (attrs.accepted_answer) return ["topic-solution"];
});

Le classi di un post sono determinate qui.

Il hook che ti serve esiste già alla fine di quel file… più o meno così.

Il plugin-api dispone di un metodo che ti permette di aggiungere classi a un post in base a una condizione.

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

Ciò che fa è applicare un callback specifico e restituire una classe da aggiungere se la condizione è soddisfatta.

Quando il callback viene attivato, Discourse gli passa gli attributi del post. Quindi, ad esempio, puoi fare qualcosa di simile.

api.addPostClassesCallback((attrs) => {
  console.log(attrs);
});

Se controlli la console, vedrai che vengono visualizzati gli attributi di ciascun post.

Questi sono solo esempi; ce ne sono altri.

Per tua fortuna, quando un post viene contrassegnato come soluzione, Discourse tiene traccia di questo fatto e lo aggiunge agli attributi del post. La proprietĂ  si chiama accepted_answer.

Quindi, devi solo verificare se è vero e aggiungere la tua classe personalizzata in tal caso. PiÚ o meno cosÏ:

api.addPostClassesCallback((attrs) => {
  if (attrs.accepted_answer) return ["topic-solution"];
});

Questo dovrebbe essere sufficiente per attivare la classe anche se l’OP cambia idea e sceglie una soluzione diversa. Rimuoverà la classe dalla vecchia risposta e la aggiungerà a quella nuova.

4 Mi Piace

Fantastico, grazie mille! :slight_smile:

1 Mi Piace