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.

ある時点で、この div から .accepted-answer クラスが削除されたと思います。これを復活させて、承認された回答の投稿を別様にスタイル設定することは可能でしょうか?

別のトピックでは、@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 です。

したがって、その値が true かどうかを確認し、true の場合にカスタムクラスを追加するだけで済みます。以下の通りです。

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

これで、OP が考えを変えて別の回答を選ぶ場合でも、クラスを適切に切り替えることができます。古い回答からはクラスが削除され、新しい回答に追加されます。

素晴らしい、ありがとうございます!:slight_smile: