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

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.

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: