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:

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.

Acho que em algum momento a classe .accepted-answer foi removida deste div. É possível adicioná-la de volta para que possamos estilizar a resposta aceita de forma diferente?

Em outro tópico, @awesomerobot disse que essa classe foi adicionada à citação na primeira postagem. Mas não consegui encontrá-la para o corpo da postagem:

Essa classe é definitivamente visível

Sim, na citação da primeira postagem, está lá. Mas estou falando do corpo da postagem que contém a resposta.

Concordo que seria útil ter uma classe para o div.topic-body do post resolvido.

Posso pensar em uma solução alternativa assim:

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

Com algum CSS como:

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

Mas acho que ainda seria necessário algum hook na ação de solução para que o contorno desapareça quando o post for desmarcado como resolvido (talvez seja um caso de borda, mas seria bom cobri-lo).

Ter uma classe para o corpo do post resolvido resolveria o problema, acho :slight_smile:

TL;DR

Isso adicionará uma classe topic-solution às postagens marcadas como resposta.

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

As classes de uma postagem são determinadas aqui.

O gancho que você deseja já existe no final disso… assim.

O plugin-api possui um método que permite adicionar classes a uma postagem com base em uma condição.

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

O que isso faz é aplicar um callback específico e retornar uma classe a ser adicionada se a condição for atendida.

Quando o callback é acionado, o Discourse passa os atributos da postagem para ele. Então, por exemplo, você pode fazer algo assim.

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

Se você verificar o console, verá que ele exibe os atributos de cada postagem.

Estes são apenas exemplos; há mais coisas lá.

Por sorte, quando uma postagem é marcada como solução, o Discourse acompanha isso e o atributo é adicionado aos dados da postagem. A propriedade se chama accepted_answer.

Então, você só precisa verificar se isso é verdadeiro e adicionar sua classe personalizada se for. Assim:

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

Isso deve ser suficiente para alternar a classe, mesmo que o OP mude de ideia e escolha uma solução diferente. A classe será removida da resposta antiga e adicionada à nova.

Fantástico, muito obrigado! :slight_smile: