# Solved Topic Badge

**URL:** https://meta.discourse.org/t/solved-topic-badge/281981
**Category:** Theme component
**Tags:** solved
**Created:** [October 12, 2023, 8:22am UTC](https://meta.discourse.org/t/solved-topic-badge/281981 "2023-10-12T08:22:30Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [October 12, 2023, 8:22am UTC](https://meta.discourse.org/t/solved-topic-badge/281981/1 "2023-10-12T08:22:30Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **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. · GitHub](https://github.com/VaperinaDEV/solved-topic-badge) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

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](https://global.discourse-cdn.com/meta/original/4X/4/b/9/4b92f3472403a3f1cdd48baa027f8b937b27972d.png)

**With background**

 ![Screenshot 2023-10-11 at 11.49.47](https://global.discourse-cdn.com/meta/original/4X/c/1/7/c175f1427d85db7bed5a3850247c43032dbce913.png)

* * *

**Inline**

 ![Screenshot 2023-10-11 at 23.35.31](https://global.discourse-cdn.com/meta/original/4X/2/c/0/2c0e9cb7f134b60486a0865c2524b553f8ee4aa2.png)

* * *

**Styled (after title)**

 ![Screenshot 2023-10-11 at 23.37.33](https://global.discourse-cdn.com/meta/original/4X/4/9/1/4918ace2013fccc70b1cba8f58676ebab5f124d6.png)

* * *

Topic title, Topic header  
**Styled**  
 ![Screenshot 2023-10-11 at 23.40.35](https://global.discourse-cdn.com/meta/original/4X/1/7/5/175d86ee5f8958b0000dbf73d28666624c6ae0e1.png)

* * *

**Inline**  
 ![Screenshot 2023-10-11 at 23.43.39](https://global.discourse-cdn.com/meta/original/4X/d/f/3/df3be74913167a608037bde4357807f8b27cac15.png)

* * *

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](https://global.discourse-cdn.com/meta/original/4X/f/0/0/f00dd1daef53c6126f591a5913999adb1eca9888.png)

**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](https://global.discourse-cdn.com/meta/original/4X/6/6/4/6645e744863765642f14384c810feca396221bf2.png)

**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)

---

_[View the full topic](https://meta.discourse.org/t/solved-topic-badge/281981)._