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

**URL:** <https://meta.discourse.org/t/how-do-i-customise-the-styling-of-solved-topics-in-the-main-list/58379>\
**Category:** Support\
**Tags:** solved\
**Created:** [2015年六月30日 10:02 UTC](https://meta.discourse.org/t/how-do-i-customise-the-styling-of-solved-topics-in-the-main-list/58379 "2015-06-30T10:02:46Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jerome\_Bouvard](https://avatars.discourse-cdn.com/v4/letter/j/85f322/32.png) [@Jerome\_Bouvard](https://meta.discourse.org/u/Jerome_Bouvard)\
**Post date:** [2015年六月30日 10:02 UTC](https://meta.discourse.org/t/how-do-i-customise-the-styling-of-solved-topics-in-the-main-list/58379/1 "2015-06-30T10:02:46Z")

</div>

Perfect plugin for me 😄  
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.

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2015年六月30日 21:45 UTC](https://meta.discourse.org/t/how-do-i-customise-the-styling-of-solved-topics-in-the-main-list/58379/2 "2015-06-30T21:45:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![downey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/downey/32/166878_2.png) [@downey](https://meta.discourse.org/u/downey)\
**Post date:** [2015年六月30日 22:50 UTC](https://meta.discourse.org/t/how-do-i-customise-the-styling-of-solved-topics-in-the-main-list/58379/3 "2015-06-30T22:50:03Z")

</div>

> [@Discourse Solved](https://meta.discourse.org/t/discourse-solved/30155/38):
>
> How can I change the background color of a solved topic on the main page ?

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

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [2015年七月8日 05:14 UTC](https://meta.discourse.org/t/how-do-i-customise-the-styling-of-solved-topics-in-the-main-list/58379/4 "2015-07-08T05:14:49Z")

</div>

> [@Discourse Solved](https://meta.discourse.org/t/discourse-solved/30155/38):
>
> Are you talking about the main list of all topics? If so, I don’t think this is possible.

I never added support for that, but on the actual topic page you can easily change it with

```plaintext
.topic-post.accepted-answer .topic-body {
  background-color: #E9FFE0;
}

```

---

<div class="post-metadata">

**Author:** ![alxsal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alxsal/32/119855_2.png) [@alxsal](https://meta.discourse.org/u/alxsal)\
**Post date:** [2018年六月14日 08:43 UTC](https://meta.discourse.org/t/how-do-i-customise-the-styling-of-solved-topics-in-the-main-list/58379/5 "2018-06-14T08:43:07Z")

</div>

Sorry for reviving this very old topic, but I had the exact same question :

> [@sam](#):
>
> I never added support for that

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.

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [2018年六月15日 03:08 UTC](https://meta.discourse.org/t/how-do-i-customise-the-styling-of-solved-topics-in-the-main-list/58379/6 "2018-06-15T03:08:58Z")

</div>

> [@alxsal](#):
>
> Is changing the background color of solved topic on the main page now supported ?

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.

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [2020年十二月25日 15:50 UTC](https://meta.discourse.org/t/how-do-i-customise-the-styling-of-solved-topics-in-the-main-list/58379/7 "2020-12-25T15:50:06Z")

</div>



---

<div class="post-metadata">

**Author:** ![ggurbet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ggurbet/32/120188_2.png) [@ggurbet](https://meta.discourse.org/u/ggurbet)\
**Post date:** [2021年三月9日 10:11 UTC](https://meta.discourse.org/t/how-do-i-customise-the-styling-of-solved-topics-in-the-main-list/58379/8 "2021-03-09T10:11:52Z")

</div>

> [@sam](#):
>
> 我从未为此添加过支持，但在实际的主题页面上，你可以轻松通过以下方式修改它：
> 
> ```plaintext
> .topic-post.accepted-answer .topic-body {
> background-color: #E9FFE0;
> }
> 
> ```

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

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

> [@Can we get a class added for styling?](https://meta.discourse.org/t/can-we-get-a-class-added-for-styling/111509/4?u=ggurbet):
>
> I agree that a class would be nice (I think we used to have something at some point in the past). I have a PR open to add the class .accepted-answer to the quote. update: this was merged and the class is available

---

<div class="post-metadata">

**Author:** ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)\
**Post date:** [2021年七月5日 18:47 UTC](https://meta.discourse.org/t/how-do-i-customise-the-styling-of-solved-topics-in-the-main-list/58379/9 "2021-07-05T18:47:11Z")

</div>

> [@ggurbet](#):
>
> 但我没能在帖子正文中找到它：

那个类肯定是可见的

 ![image](https://global.discourse-cdn.com/meta/original/3X/a/d/ad4f88a2931202c8390d116ced752b5f7ef21a9c.jpeg)

---

<div class="post-metadata">

**Author:** ![ggurbet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ggurbet/32/120188_2.png) [@ggurbet](https://meta.discourse.org/u/ggurbet)\
**Post date:** [2021年七月10日 13:47 UTC](https://meta.discourse.org/t/how-do-i-customise-the-styling-of-solved-topics-in-the-main-list/58379/10 "2021-07-10T13:47:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![loginerror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/loginerror/32/156605_2.png) [@loginerror](https://meta.discourse.org/u/loginerror)\
**Post date:** [2021年十月15日 10:50 UTC](https://meta.discourse.org/t/how-do-i-customise-the-styling-of-solved-topics-in-the-main-list/58379/11 "2021-10-15T10:50:17Z")

</div>

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

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

```plaintext
<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 样式：

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

```

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

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

---

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [2021年十月16日 02:14 UTC](https://meta.discourse.org/t/how-do-i-customise-the-styling-of-solved-topics-in-the-main-list/58379/12 "2021-10-16T02:14:14Z")

</div>

TL;DR

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

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

```

* * *

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

> <https://github.com/discourse/discourse/blob/45a166b6efaca54f4f4ab6a492bc5b000ebc9920/app/assets/javascripts/discourse/app/widgets/post.js#L752>

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

> <https://github.com/discourse/discourse/blob/45a166b6efaca54f4f4ab6a492bc5b000ebc9920/app/assets/javascripts/discourse/app/widgets/post.js#L793-L800>

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

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

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

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

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

```

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

 ![image](https://global.discourse-cdn.com/meta/original/3X/4/f/4ffb2f909414f15459421371fbd4a3f644f69b81.png)

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

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

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

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

```

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

---

<div class="post-metadata">

**Author:** ![loginerror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/loginerror/32/156605_2.png) [@loginerror](https://meta.discourse.org/u/loginerror)\
**Post date:** [2021年十月16日 08:08 UTC](https://meta.discourse.org/t/how-do-i-customise-the-styling-of-solved-topics-in-the-main-list/58379/13 "2021-10-16T08:08:52Z")

</div>

太棒了，非常感谢！🙂