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.

我认为在某个时间点,.accepted-answer 类已从该 div 中移除。能否将其加回来,以便我们可以为已采纳的答案帖子设置不同的样式?

在另一个主题中,@awesomerobot 提到该类已添加到首帖的引用中。但我未在帖子主体中找到它:

那个类肯定是可见的

是的,在首帖的引用里确实有。但我指的是包含答案的正文部分。

我同意为已解决帖子的 div.topic-body 添加一个类是有用的。

我可以想到这样一个变通方法:

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

配合一些 CSS 样式:

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

但我认为仍然需要某种针对“标记为已解决”操作的钩子,以便在帖子被取消解决时移除轮廓(这可能是一个边缘情况,但最好能覆盖到)。

为已解决帖子的主体添加一个类应该能解决这个问题 :slight_smile:

TL;DR

这将为标记为答案的帖子添加一个 topic-solution 类。

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

帖子所拥有的类是在此处确定的。

您需要的钩子已经存在于该文件的末尾……如下所示。

plugin-api 提供了一个方法,允许您根据条件为帖子添加类。

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

其作用是应用给定的回调,并在条件满足时返回要添加的类。

当回调被触发时,Discourse 会将帖子属性传递给它。因此,您可以执行类似以下的操作。

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

如果您检查控制台,会看到它显示了每个帖子的属性。

这些只是示例,其中还有更多内容。

幸运的是,当帖子被标记为解决方案时,Discourse 会记录这一点,并将其添加到帖子属性中。该属性名为 accepted_answer

因此,您只需检查该属性是否为真,如果为真则添加自定义类。如下所示:

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

这足以切换类,即使原始发布者(OP)改变主意并选择了不同的解决方案。它将从旧答案中移除该类,并将其添加到新答案中。

太棒了,非常感谢!:slight_smile: