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.
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.
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. ![]()
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.
Ich glaube, dass die Klasse .accepted-answer irgendwann von diesem div entfernt wurde. Ist es möglich, sie wieder hinzuzufügen, damit wir den Beitrag mit der akzeptierten Antwort anders gestalten können?
In einem anderen Thema hat @awesomerobot gesagt, dass diese Klasse dem Zitat im ersten Beitrag hinzugefügt wurde. Ich konnte sie jedoch nicht für den Beitragstext finden:
Ja, im Zitat des ersten Beitrags steht es. Aber ich spreche über den eigentlichen Beitragstext, der die Antwort enthält.
Ich stimme zu, dass es nützlich wäre, eine Klasse für den div.topic-body eines gelösten Beitrags zu haben.
Mir fällt eine Workaround-Lösung ein, wie diese:
<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>
Mit etwas CSS wie:
.solved-post-container {
outline: 3px !important;
outline-color: var(--success) !important;
outline-style: solid !important;
}
Ich denke jedoch, dass dafür immer noch ein Hook in die Lösungsaktion erforderlich ist, damit der Rahmen verschwindet, wenn der Beitrag als nicht gelöst markiert wird (vielleicht ein Randfall, aber es wäre schön, diesen Fall abzudecken).
Eine Klasse für den gelösten Beitragstext würde das Problem meiner Meinung nach lösen ![]()
TL;DR
Dies fügt einer als Antwort markierten Beiträge die Klasse topic-solution hinzu.
api.addPostClassesCallback((attrs) => {
if (attrs.accepted_answer) return ["topic-solution"];
});
Die Klassen, die ein Beitrag hat, werden hier bestimmt.
Der gewünschte Hook befindet sich bereits ganz am Ende davon – so wie hier:
Die plugin-api verfügt über eine Methode, mit der Sie einem Beitrag basierend auf einer Bedingung Klassen hinzufügen können.
Das bewirkt, dass ein bestimmter Callback ausgeführt wird und eine Klasse zurückgegeben wird, die hinzugefügt werden soll, wenn die Bedingung erfüllt ist.
Wenn der Callback ausgelöst wird, übergibt Discourse die Beitragsattribute an ihn. Sie können also beispielsweise so etwas tun:
api.addPostClassesCallback((attrs) => {
console.log(attrs);
});
Wenn Sie die Konsole überprüfen, sehen Sie, dass die Attribute jedes Beitrags angezeigt werden.
Dies sind nur Beispiele; es gibt noch mehr darin.
Zum Glück für Sie merkt sich Discourse, wenn ein Beitrag als Lösung markiert wird, und fügt dies den Beitragsattributen hinzu. Die Eigenschaft heißt accepted_answer.
Sie müssen also nur prüfen, ob dies wahr ist, und Ihre benutzerdefinierte Klasse hinzufügen, falls ja. So geht’s:
api.addPostClassesCallback((attrs) => {
if (attrs.accepted_answer) return ["topic-solution"];
});
Das sollte ausreichen, um die Klasse auch dann umzuschalten, wenn der OP seine Meinung ändert und eine andere Lösung auswählt. Die Klasse wird dann vom alten Antwortbeitrag entfernt und zum neuen hinzugefügt.
Fantastisch, vielen Dank! ![]()

