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

Support
1

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.

2

You should be able to do it by targetting the post class via CSS.

3

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

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

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.

6

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

I think at some point .accepted-answer class has been dropped from this div. Is it possible to add it back so that we can style the accepted answer post differently?

In another topic, @awesomerobot said this class has been added to the quote in the first post. But I couldn’t find it for the post body:

1 Like
9

That class is definitely visible

image
image1920×907 107 KB

10

Yes, in the quote of the first post it’s there. But I am talking about the post body that contains the answer.

11

I agree that it would be useful to have a class for the div.topic-body of the solved post.

I can think of a workaround like this:

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

With some css like:

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

But I think it still requires some hook into the solution action so that the outline disappears when the post is unsolved (maybe an edge case, but would be nice to cover it).

Having a class for the solved post body would solve the issue I think :slight_smile:

1 Like
12

TL;DR

This will add a topic-solution class to posts marked as the answer.

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

The classes that a post has are determined here.

The hook you want already exists at the very end of that
 like so.

The plugin-api has a method that allows you to add classes to a post based on a condition.

What that does is that it applies a given callback and returns a class to be added if the condition is met.

When the callback is fired, Discourse passes the post attributes to it. So, you can, for example, do something like this.

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

If you check the console, you’ll see that it displays the attributes of each post.

image
image898×1351 155 KB

These are just examples; there’s more in there.

Lucky for you, when a post is marked as the solution, Discourse keeps track of that, and it gets added to the post attributes. The property is called accepted_answer

So, you only need to check if that’s true and add your custom class if it is. Like so

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

That should be enough to toggle the class even when the OP changes their mind and picks a different solution. It will remove the class from the old answer and add it to the new one.

4 Likes
13

Fantastic, thanks a lot! :slight_smile:

1 Like