# How to show Category Hierarchy in Topic-List with CSS

**URL:** https://meta.discourse.org/t/how-to-show-category-hierarchy-in-topic-list-with-css/325060
**Category:** Development
**Tags:** css
**Created:** [September 5, 2024, 7:05am UTC](https://meta.discourse.org/t/how-to-show-category-hierarchy-in-topic-list-with-css/325060 "2024-09-05T07:05:27Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![elRicharde](https://avatars.discourse-cdn.com/v4/letter/e/5e9695/32.png) [@elRicharde](https://meta.discourse.org/u/elRicharde)
#### Post date: [September 5, 2024, 7:05am UTC](https://meta.discourse.org/t/how-to-show-category-hierarchy-in-topic-list-with-css/325060/1 "2024-09-05T07:05:27Z")

</div>

Hi Everyone and thanks for your time to read. I´ve searched the forum for hours and tried a bit with chat gpt and a testforum but i need some help here.

In our ngo we want to rearange our categorys so that each department has its own category with 3 Subcategories:

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/c/9/bc9f3a20b60e453ac77e52e34aa166dee0c68fc7.png)

So Basically generic like:

- Topcategory = Name of department
- Subcategories:
  - news
  - questions
  - internal

If you imagine having 10 or more departments writing news, you´ll can´t see from who is the news in result-list, because only the actual (sub)category is shown there.  
Here is an example of an Testinstance, Creating Posts in different Subcategories all named faq:

> ![image](https://global.discourse-cdn.com/meta/original/4X/5/e/8/5e88e05f52bd8e7c016949f92e852c8bc8d74fcb.png)

you have different Bubbles in Split Color which signals it´s a subgroup, but still you don´t know which was the department on first sight.

So in Result-List there is the Element

> link-bottom-line

If this could look like

> ember 80 ember-view topic-category

from ThreadView this would be perfect.

> ![image](https://global.discourse-cdn.com/meta/original/4X/d/a/d/dadd99437c99558c0504b85d17afac077c855fc4.png)

Also in Search results it is shown as needed, just that you get what i mean:

> ![image](https://global.discourse-cdn.com/meta/original/4X/5/3/9/53977ace7d646b6bad0ec5c14d14d26e2c40bc03.png)

I don´t have any Idea how to do this, as I don´t know css and this is more difficult than to hide something.

I hope someone here can take the time to assist me on this, it would be very helpful and we could continue rearranging our forum.

If there is any questions let me know.

Thanks a lot and best regards

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [September 5, 2024, 7:08am UTC](https://meta.discourse.org/t/how-to-show-category-hierarchy-in-topic-list-with-css/325060/2 "2024-09-05T07:08:35Z")

</div>

> [@No "parent/main category" visible on main topic page](https://meta.discourse.org/t/no-parent-main-category-visible-on-main-topic-page/320732/2):
>
> Hey, welcome to Meta slight_smile Do you mean, for example, from [NVIDIA\_Share\_270OXVsrdT] to: [NVIDIA\_Share\_iMU83Nr3Gj] ? If so, you can try this component: [GitHub - Arkshine/discourse-show-parent-category-link](https://github.com/Arkshine/discourse-show-parent-category-link)

---

<div class="post-metadata">

### Author: ![elRicharde](https://avatars.discourse-cdn.com/v4/letter/e/5e9695/32.png) [@elRicharde](https://meta.discourse.org/u/elRicharde)
#### Post date: [September 5, 2024, 9:05am UTC](https://meta.discourse.org/t/how-to-show-category-hierarchy-in-topic-list-with-css/325060/3 "2024-09-05T09:05:07Z")

</div>

awesome, thanks a lot for that instant help and solution :heart:

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [October 5, 2024, 9:05am UTC](https://meta.discourse.org/t/how-to-show-category-hierarchy-in-topic-list-with-css/325060/4 "2024-10-05T09:05:14Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.