How would I target Unsolved topics with CSS?

dev
,
1

What would be the CSS selector(s) to change the style of unsolved topics?

1 Like
2

Hi Dan :wave:

On a topic list, it would be this:

.topic-list-item:not(.status-solved) {
    background: rgba(255,192,203,.2);
}

image
image1099Ă—795 69.4 KB

On a topic page, there’s no specific class to be targeted.

4 Likes
3

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?

1 Like
4

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. :thinking:

5

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:

1 Like
6

Hello :wave:

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. :slightly_smiling_face:

.topic-list-item {
  &.solvable-topic {
    &:not(.status-solved) {
      background: red;
    }
  }
}
5 Likes