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

[Jerome_Bouvard (Jérôme Bouvard)]

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.

[codinghorror (Jeff Atwood)]

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

[downey (Michael Downey)]

@Jerome_Bouvard

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.

[sam (Sam Saffron)]

@Jerome_Bouvard

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

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

[alxsal (Alex Salvador)]

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.

[sam (Sam Saffron)]

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

[ggurbet (Gökhan Gurbetoğlu)]

@sam

저는 그 부분에 대한 지원을 추가한 적이 없지만, 실제 토픽 페이지에서는 다음 코드를 사용하여 쉽게 변경할 수 있습니다.

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

어느 시점에 .accepted-answer 클래스가 이 div에서 제거된 것 같습니다. 승인된 답변 게시물을 다르게 스타일링할 수 있도록 이 클래스를 다시 추가할 수 있을까요?

다른 토픽에서 @awesomerobot은 이 클래스가 첫 번째 게시물의 인용문에 추가되었다고 말했습니다. 하지만 게시물 본문(body)에서는 찾을 수 없었습니다:

Can we get a class added for styling?

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

[dax (Daniela)]

@ggurbet

하지만 게시글 본문에는 찾을 수 없었어요:

그 클래스는 분명히 보입니다.

[ggurbet (Gökhan Gurbetoğlu)]

네, 첫 번째 게시물의 인용문에 있습니다. 하지만 저는 답변이 포함된 게시물의 본문에 대해 말씀드리는 것입니다.

[loginerror (Maciej Kuźmicz)]

해결된 게시글의 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;
}

하지만 게시글이 해결되지 않은 상태로 되돌려졌을 때 테두리가 사라지도록 해결 작업에 대한 일부 훅(hook)이 여전히 필요하다고 생각합니다(엣지 케이스일 수 있지만, 이를 처리하는 것이 좋습니다).

해결된 게시글 본문에 클래스가 있다면 이 문제를 해결할 수 있을 것 같습니다

[Johani (Joe)]

요약

이 방법은 답변으로 표시된 게시글에 topic-solution 클래스를 추가합니다.

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

---

게시글이 가진 클래스는 여기서 결정됩니다.

app/assets/javascripts/discourse/app/widgets/post.js

원하시는 훅은 이미 해당 파일의 맨 끝에 다음과 같이 존재합니다.

app/assets/javascripts/discourse/app/widgets/post.js

플러그인 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)가 마음을 바꿔 다른 해결책을 선택하더라도 클래스가 전환됩니다. 이전 답변에서 클래스가 제거되고 새로운 답변에 추가됩니다.

[loginerror (Maciej Kuźmicz)]

훌륭해요, 정말 감사합니다!