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.

Creo que en algún momento la clase .accepted-answer fue eliminada de este div. ¿Es posible volver a añadirla para que podamos estilizar la publicación de la respuesta aceptada de forma diferente?

En otro tema, @awesomerobot dijo que esta clase se ha añadido a la cita en la primera publicación. Pero no pude encontrarla para el cuerpo de la publicación:

Esa clase es definitivamente visible

Sí, en la cita del primer mensaje está. Pero me refiero al cuerpo del mensaje que contiene la respuesta.

Estoy de acuerdo en que sería útil tener una clase para el div.topic-body de la publicación resuelta.

Se me ocurre una solución alternativa como esta:

<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 algo de CSS como:

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

Pero creo que aún se requiere algún tipo de conexión con la acción de solución para que el contorno desaparezca cuando la publicación se marca como no resuelta (quizás sea un caso extremo, pero sería bueno cubrirlo).

Tener una clase para el cuerpo de la publicación resuelta solucionaría el problema, creo :slight_smile:

TL;DR

Esto agregará una clase topic-solution a las publicaciones marcadas como respuesta.

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

Las clases que tiene una publicación se determinan aquí.

El hook que buscas ya existe al final de ese archivo… así.

La plugin-api tiene un método que te permite agregar clases a una publicación según una condición.

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

Lo que hace es aplicar una función de retorno (callback) dada y devuelve una clase para agregar si se cumple la condición.

Cuando se dispara el callback, Discourse le pasa los atributos de la publicación. Así que, por ejemplo, puedes hacer algo como esto.

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

Si revisas la consola, verás que muestra los atributos de cada publicación.

Estos son solo ejemplos; hay más cosas allí.

Por suerte para ti, cuando una publicación se marca como solución, Discourse lleva un registro de eso y se agrega a los atributos de la publicación. La propiedad se llama accepted_answer.

Así que solo necesitas verificar si eso es verdadero y agregar tu clase personalizada si lo es. Así:

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

Eso debería ser suficiente para alternar la clase incluso si el OP cambia de opinión y elige una solución diferente. Eliminará la clase de la respuesta anterior y la agregará a la nueva.

¡Fantástico, muchas gracias! :slight_smile: