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 إن هذه الفئة قد أضيفت إلى الاقتباس في المنشور الأول. لكنني لم أستطع العثور عليها في جسم المنشور:

هذا الصنف مرئي بالتأكيد

نعم، في اقتباس المنشور الأول هو موجود. لكنني أتحدث عن جسم المنشور الذي يحتوي على الإجابة.

أتفق على أنه سيكون من المفيد وجود فئة (class) لـ 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) مع إجراء الحل بحيث يختفي الإطار عندما يُحلّ المنشور (ربما حالة هامشية، لكن سيكون من الجيد تغطيتها).

وجود فئة لجسم المنشور المحلول سيحل المشكلة أعتقد :slight_smile:

ملخص سريع

سيضيف هذا كلاس topic-solution إلى المنشورات التي تم تحديدها كإجابة.

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

تُحدَّد الكلاسات التي يمتلكها المنشور هنا.

الخطاف (hook) الذي تريده موجود بالفعل في نهاية ذلك… على النحو التالي.

توفر واجهة البرنامج المساعد (plugin-api) طريقة تتيح لك إضافة كلاسات إلى منشور بناءً على شرط معين.

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

ما تفعله هذه الطريقة هو تطبيق استدعاء (callback) معين وإعادة كلاس ليتم إضافته إذا تم استيفاء الشرط.

عند تشغيل الاستدعاء، يقوم Discourse بتمرير سمات المنشور إليه. لذا، يمكنك على سبيل المثال فعل شيء مثل هذا.

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

إذا فتحت وحدة التحكم (console)، فستلاحظ أنه يعرض سمات كل منشور.

هذه مجرد أمثلة؛ فهناك المزيد من البيانات هناك.

لحظتك سعيدة، عندما يتم تحديد منشور كحل، يحتفظ Discourse بتتبع ذلك، ويتم إضافته إلى سمات المنشور. يُسمى الخاصية accepted_answer.

لذا، كل ما تحتاجه هو التحقق مما إذا كانت هذه القيمة صحيحة، وإضافة الكلاس المخصص الخاص بك إذا كانت كذلك. على النحو التالي:

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

هذا يجب أن يكون كافياً لتبديل الكلاس حتى لو غيّر صاحب الموضوع (OP) رأيه واختار حلاً مختلفاً. سيتم إزالة الكلاس من الإجابة القديمة وإضافته إلى الإجابة الجديدة.

رائع، شكرًا جزيلاً! :slight_smile: