Solved Topic Badge

Don · October 12, 2023, 8:22am


	Summary	Adds styling options to the solved and unsolved topics.
	Repository	GitHub - VaperinaDEV/solved-topic-badge: This theme component adds styling options to the solved and unsolved topics.
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

Hello

This theme component adds styling options to the solved and unsolved topics. You can set custom badge and background color.

By default it looks like this on topic list page
Styled (before title)

Screenshot 2023-10-11 at 11.49.18

With background

Screenshot 2023-10-11 at 11.49.47

Inline
Screenshot 2023-10-11 at 23.35.31

Styled (after title)
Screenshot 2023-10-11 at 23.37.33

Topic title, Topic header
Styled
Screenshot 2023-10-11 at 23.40.35

Inline
Screenshot 2023-10-11 at 23.43.39

There are a bunch of settings where you can change the icon, text and style separately solved and unsolved.

Global indicator settings
Screenshot 2023-10-12 at 8.54.44

type
– styled (badge)
– inline (it placed inline before title)

placement (styled)
– before-title
– after-title

border-radius
– badge rounding

Solved Indicator settings

Screenshot 2023-10-12 at 9.03.58

solved indicator
– It uses unicode but you can use other too. (e.g. emoji). It place before label.
…
…
…
solved border color
The badge has a 1px transparent border and this setting you can set a color for it.

enable solved topic background
Enabling this setting will activate the background field below it where you can set the topic list item background color.

Unsolved Indicator setting

Same settings for unsolved indicator below these…

If you want to enable the unsolved indicator than turn on the empty box on unsolved Discourse Solved plugin setting.

Todo:

– Try to move it to use as topic status (will appear everywhere the topic status is appear and it allows to use custom icon too)

Heliosurge · October 13, 2023, 4:02am

Cool theme-component. Only one minor issue is the about category post also marked unsolved .

Don · October 13, 2023, 6:29am

Hello @Heliosurge

Thank you
Technically the about topic is also a solvable topic. If you have enabled the empty box on unsolved setting on Discourse Solved plugin then the empty box is appears for the topic list about topic and in the about topic too. To hide the unsolved badge for a specific topic you have to close it.

Heliosurge · October 13, 2023, 7:48am

Awesome thank you! Learned something new.

barto_95 · November 3, 2023, 6:15pm

Thank’s for component….

but with the component
https://github.com/VaperinaDEV/discourse-solved-quote-

the message résolve not show with green, component don’t work ….

it’s not possible to have 2 component one for subject and one for message work

Don · November 5, 2023, 6:50am

Hello @barto_95

These two components should works together correctly but the correct component url is: GitHub - VaperinaDEV/discourse-solved-quote-customization

Don · February 7, 2025, 8:38am

Hello I’ve updated this theme component to work with Glimmer topic list. Thanks for the report: Discourse topic-list changes · Issue #4 · VaperinaDEV/solved-topic-badge · GitHub

Arkshine · April 21, 2025, 8:26pm

The legacy topic list has been dropped this month.
The code can be removed:

github.com/VaperinaDEV/solved-topic-badge

javascripts/discourse/initializers/solved-badge.js

main


      
          // Should remove after the glimmer topic list transition
          withSilencedDeprecations("discourse.hbr-topic-list-overrides", () => {
            TopicListItem.reopen({
              @discourseComputed()
              unboundClassNames() {
                let classList = this._super(...arguments);
                if (this.topic.can_have_answer) {
                  classList += " solvable";
                }
                return classList;
              },
            });
          
            LatestTopicListItem.reopen({
              @discourseComputed()
              unboundClassNames() {
                let classList = this._super(...arguments);
                if (this.topic.can_have_answer) {
                  classList += " solvable";
                }

This file has been truncated. show original

Made a quick PR:

Don · April 21, 2025, 10:11pm

Oops, sorry, I forgot to update this component. Thanks @Arkshine, I’ve merged it.
@ozkn, please update the component.

Monikas · April 22, 2025, 3:02am

This component is incompatible with discourse-umbrella-groupswitchdisplay and cannot be used together. An error has occurred which may prevent your site from working correctly.

Reason: Conflict between active themes/components.

Click here to update, reconfigure, or disable the component.

(This message is only visible to site administrators.)

ozkn · April 22, 2025, 7:19am

Thanks for the update. I updated and tried but I get the same error. @Don

Don · April 22, 2025, 7:24am

Oh, yeah sorry I see. Fixed here: FIX: Discourse version to beta3 · VaperinaDEV/solved-topic-badge@e5889a3 · GitHub Please update again.

ozkn · April 22, 2025, 7:36am

Thanks, it’s working fine now without any problems.

Arkshine · April 22, 2025, 12:03pm

Oops, sorry!

xkhalid · July 14, 2025, 2:23am

Hi Guys,

After updating to the latest version:

3.5.0.beta8-dev (commit: 5eca6d826e)

I encountered a visual regression related to the Discourse Solved and Solved Topic Badge plugins.

Issue:

Previously, solved topics would have a green background, and unsolved topics (awaiting solution) would appear with a red background in the topic list.

Now, all solved topics no longer display the green background, even though the setting is enabled.

Details:

Plugin: Discourse Solved + Solved Topic Badge
Setting enable solved topic background is enabled
This worked as expected before the update

Screenshot (after the update):

Expected:

Solved topics should retain the green background for better visual clarity.

Please let me know if this is a regression or if any new CSS changes are required to restore this behavior.

Moin · July 14, 2025, 6:09am

I think this happens on topics you have read because of the changes in
UX: Variable additions (#33473) · discourse/discourse@20f57ae · GitHub,
which added a separate background color for visited topics.

You could probably fix that with your own CSS until the theme component is adapted, but I can’t check how right now.

Issues with components that aren’t official should generally be reported in the topic.

xkhalid · July 14, 2025, 12:24pm

Thanks Moin!

I managed to fix it using custom CSS:

.topic-list-item.solved,
.topic-list-item.visited.solved,
.latest-topic-list-item.solved,
.latest-topic-list-item.visited.solved {
  background-color: var(--success-low) !important;
}

CC: @sam @j.jaffeux

jordan-vidrine · July 14, 2025, 3:01pm

@Don due to recent variable additions to core, you may need to tweak your component a bit for the background colors to work, even when a topic has been visited.

Don · July 14, 2025, 5:51pm

Hello Thanks for the report! Here is the update: UX: Adds background color for visited topic list items · VaperinaDEV/solved-topic-badge@1f87fe4 · GitHub

Topic		Replies	Views
Add [SOLVED] to solved topic titles UX solved	4	472	October 12, 2023
Discourse Solved Plugin official , solved	28	86078	July 8, 2025
Discourse Solved Quote Customization Theme component	2	1100	September 12, 2023
Solved Button Plugin Feature rfc , spec	65	21186	June 18, 2015
How do I customise the styling of "solved topics" in the main list? Support solved	12	3079	October 16, 2021

Solved Topic Badge

Issue:

Details:

Screenshot (after the update):

Expected:

Related topics