What would be the CSS selector(s) to change the style of unsolved topics?
Hi Dan
On a topic list, it would be this:
.topic-list-item:not(.status-solved) {
background: rgba(255,192,203,.2);
}
On a topic page, there’s no specific class to be targeted.
Thanks, that worked!
One caveat, similar to this issue, is that looking for the absence of the status-solved
class means topics from categories that don’t have Solved enabled, will also be highlighted. In our case I’ve added a second class to the selector to only target the support category:
/* Highlight unsolved topics */
.topic-list-item.category-support:not(.status-solved) {
background: rgba(255,192,203,.2);
}
Is there a more general solution, e.g. if more Solved categories exist, rather than repeating the selector?
i tried figuring out a wildcard condition for any category with solved enabled but could not. but you can combine all the relevant categories into one code snippet:
/* Highlight unsolved topics */
.topic-list-item.category-support,
.topic-list-item.category-another_category,
.topic-list-item.category-yet_another_category:not(.status-solved) {
background: rgba(255,192,203,.2);
}
or one could make a theme component and have a setting to add whatever categories you want to apply. i suspect there may be a way to target categories with solved enabled but i can’t seem to figure it out.
I’m not sure we can get which topics belong to a “solvable” category on the topic list.
If you’re not going to change the category setting every week, you can modify the code you and @Lilly wrote but add a loop and make it easier to read and maintain. It will still use the category classes.
You can re-use the solution provided here to this intent:
Hello
I’ve made a theme component to adds a class .solvable-topic
to the topic list solvable topics.
After install this theme component you can add a simple CSS to achieve it.
.topic-list-item {
&.solvable-topic {
&:not(.status-solved) {
background: red;
}
}
}