In a discussion about displaying both parent and subcategory labels on the ‘latest’ page in Discourse, tomwrench notes that only subcategory labels appear, which can cause confusion when multiple subcategories share the same name under different parents. steko points out that a subtle visual cue — a colored patch matching the parent category — appears on the left of the label when using the “box” category style, as shown in an example image. However, tomwrench finds this cue insufficiently clear for users, especially with many categories, and asks if a CSS hack could display both labels explicitly. Mittineague suggests a partial CSS workaround by widening the colored stripe (changing 5px to 10px in badge-category-bg styling), though it doesn’t fully solve the problem. Later, dan-barbulescu confirms the subtle hint remains too obscure for some users. Finally, elRicharde reports the issue is now resolved, linking to a meta thread detailing a CSS solution for showing category hierarchy in topic lists: How to show category hierarchy in topic list with CSS.
On the ‘latest’ page, if there is a topic in a subcategory it only displays the label of the subcategory it’s in.
Is there a way to show both the parent category and subcategory labels in this instance, as I may have multiple subcategories with the same name but under different parent categories, so it could get confusing.
Cheers
There should be a subtle hint in the coloring of labels, e.g. on the left of the category label you should see a patch in the same color of the parent category. Example from my forum:
The second topic is in a subcategory of Eventi (that you can see in the third topic), and the small green rectangle is an indication of that. This is with the “category style” setting set to “box”.
I do see this. However, if there are a decent number of categories/subcategories it’s not clear to the user what category the ‘subtle hint’ in the colouring of labels represents. It would be great to be able to show labels for both the parent category and subcategory in these cases.
I was hoping it would be perhaps a CSS hack?
There is CSS that you could try though not exactly what you’re hoping for. eg.
<a class="badge-wrapper box"
href="/community/c/python-perl-and-golang/python">
<span class="badge-category-parent-bg"
style="background-color: #A45BC7;"></span>
<span class="badge-category-bg"
style="background-color: #1a69ca;"></span>
<span style="color: #FFFFFF;"
data-drop-close="true"
class="badge-category clear-badge" title="Discussion about the popular interpreted language for web, scientific and mathematical programming, based on the "One Obvious Way To Do It" philosophy.">Python</span>
</a>
If you change the “5px” values for badge-category-bg from
left: 5px;
width: calc(100% - 5px);
to 10 px you get a side stripe twice as wide
Is there still no way to make this happen?
The “subtle hint” is too subtle some of our users.
it´s solved by now