# Can it be done with CSS? Grouping categories on category page
**URL:** https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433
**Category:** Development
**Created:** [24 maart 2019 om 02:34 UTC](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433 "2019-03-24T02:34:40Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@Cozdabuch](https://meta.discourse.org/u/Cozdabuch)
#### Post date: [24 maart 2019 om 02:34 UTC](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433/1 "2019-03-24T02:34:40Z")
What I’d like to do (as I know there’s no baked in setting or feature set) is use CSS to group categories on the home page.
I’m not looking to nest categories, but just group some together and possibly put a header on them. I know the individual categories can be “separated” with padding, and I know each category can be targeted by category ID or category name. So what I’m hoping is to be able to replicate something that looks like this:
I realize for simplicity, the categories would have to be in their sorted order, and each category targeted by catediry\_id, but I’m thinking that there’s possibly some CSS that can throw padding after one category or before another.
The big question is there the ability to insert some text in the padding to create a header?
The propose of this is to first break up the long category list view, but separate: **example**
- category 1-2 under “staff” header
- Category 3-4 under “community resources)
- categories 5,8,11,12,13 “under general discussion categories”
I don’t want to make these sub categories, I like the structure and category system just as it is. All I want to do is display the categories a little differently on the categories view page. Ideally this is just a visual layout, NOTHING to change with the library structure of the platform.
Any idea how to make this happen?
This would be kind of a game changer for my work collaboration site’s layout.
Sam, codinghorror, do you think there would be a way to create a grouping step in the category reorganization menu that could do this natively, say as an option (grouping on/off).just put the categories in order within main page grouping and it could automatically separare them. In core, plugin or a theme component?
---
### Author:  [@Cozdabuch](https://meta.discourse.org/u/Cozdabuch)
#### Post date: [25 maart 2019 om 21:03 UTC](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433/2 "2019-03-25T21:03:59Z")
anyone? buehler.
feedback appreciated
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [25 maart 2019 om 22:58 UTC](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433/3 "2019-03-25T22:58:22Z")
This kind of stuff is possible in a theme component but extremely complicated. I think you would need to override templates which makes this also pretty fragile.
---
### Author:  [@cosdesign](https://meta.discourse.org/u/cosdesign)
#### Post date: [9 februari 2021 om 21:20 UTC](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433/4 "2021-02-09T21:20:23Z")
A bit late 😄 but maybe someone else needs it. I must mention that:
- Not all the CSS code is required, especially the borders and the background colors for table rows, so feel free to adjust them as you like.
- I had to change the layout from the regular table into flex cause you can’t have negative margins on table rows and other layout issues, and well..is more flexible 😄
- Replace **Category Group 1** and **Category Group 2** with your desired category group names
- In my example I’ve used the category ID’s 2 and 4, so using chrome dev tools to inspect ( see pic below), find the right category id and replace `[data-category-id="2"]` and `[data-category-id="4"]` in my example with your id(s).
Paste this inside the Common tab:
```
.category-list{
display: flex;
flex-direction: column;
}
.category-list thead tr{
display: flex;
}
.category-list .topics {
width: 95px;
margin-left: auto;
min-width: 95px;
white-space: nowrap;
}
.category-list tbody tr {
background-color: var(--primary-very-low);
box-sizing: border-box;
display: flex;
}
body .category-list [data-category-id="2"],body .category-list [data-category-id="4"] {
position: relative;
margin-top: 50px;
}
body [data-category-id="2"]::before {
content: "Category Group 1";
}
body [data-category-id="4"]::before {
content: "Category Group 2";
}
body [data-category-id="2"]::before,body [data-category-id="4"]::before {
position: absolute;
top: -35px;
left: 0;
font-weight: bold;
font-size: 15px;
text-transform: uppercase;
color: var(--primary-medium);
}
```
Paste this inside the Desktop tab:
```
.category-list tbody tr {
margin-bottom: 15px;
border: 1px solid var(--primary-low);
}
```
And this inside the Mobile tab:
```
body .category-list-item.category .posts {
width: auto;
margin-left: auto;
}
body .category-list-item>footer,body .subcategory-list-item>footer{
background-color: var(--primary-very-low);
}
.categories-list .category-list th {
padding: 0;
}
.category-list-item>footer .category-stat, .subcategory-list-item>footer .category-stat {
float: right;
}
.category-list-item>footer .category-stat:first-child, .subcategory-list-item>footer .category-stat:first-child{
margin-right: 0;
}
body .category-list-item.category tr:first-of-type{
padding: 10px 0;
border-bottom: 1px solid var(--primary-low);
}
body tr.category-topic-link:last-of-type{
border-bottom: 1px solid var(--primary-low);
}
body .categories-list .category-list th {
padding: 0;
}
body .category-list-item {
border-top: none;
margin-bottom: 10px;
}
body .category-list-item {
padding: 0;
border: 1px solid var(--primary-low)!important;
}
.category-list-item>footer, .subcategory-list-item>footer {
border-top: none;
}
```
And this is how it looks on desktop and mobile resolutions:
 
---
### Author:  [@Gérard78](https://meta.discourse.org/u/G%C3%A9rard78)
#### Post date: [11 februari 2021 om 06:46 UTC](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433/5 "2021-02-11T06:46:48Z")
Hi Cos
]very interesting; thank you for sharing. in the same spirit (that of obtaining a better presentation, we are trying to put, in front of discourse, a wordpress page with a specific presentation and we would like to "send on this page, category names, for example those which have received a response , those chosen by the user, or then a determinate category; do you think this is possible and if so how?
---
### Author:  [@cosdesign](https://meta.discourse.org/u/cosdesign)
#### Post date: [16 februari 2021 om 13:48 UTC](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433/6 "2021-02-16T13:48:20Z")
I’m afraid you can’t do that just by CSS. Maybe the [WordPress Discourse plugin](https://meta.discourse.org/t/wp-discourse-plugin-installation-and-setup/50752) is what you need. In addition to this, the [wp discourse shortcodes](https://meta.discourse.org/t/wp-discourse-shortcodes-plugin/48910) is also a must.
We are already using it on our WordPress website and it works great so far. This is how the plugin looks in the sidebar widget:
---
### Author:  [@Cozdabuch](https://meta.discourse.org/u/Cozdabuch)
#### Post date: [23 mei 2021 om 22:56 UTC](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433/7 "2021-05-23T22:56:47Z")
@sam, @cosdesign’s response works. is there any way to bake this into core’s menus so users can leave it off by default, but then set the headers in the admin panel for group header titles, and in each category’s attributes page, select from a dropdown of the enabled section headers from the admin panel so the category just falls under the header.
This shouldn’t be terribly difficult to add to the platform and would really improve large multi user role and group, multi category installations
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [7 maart 2022 om 11:02 UTC](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433/9 "2022-03-07T11:02:07Z")
This kind of grouping is now supported in Discourse core:
[https://github.com/discourse/discourse/commit/eb2e3b510de9295d1ed91919d2df0dc800364689](https://github.com/discourse/discourse/commit/eb2e3b510de9295d1ed91919d2df0dc800364689)
Choose “Subcategories with Featured Topics” as the ‘desktop category page style’:
And then your categories page will look something like this:
---
### Author:  [@inj3ct0r](https://meta.discourse.org/u/inj3ct0r)
#### Post date: [20 september 2023 om 11:31 UTC](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433/10 "2023-09-20T11:31:45Z")
It is possible to it with RTL ??
i tried but i failed 💔
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [20 september 2023 om 21:06 UTC](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433/11 "2023-09-20T21:06:44Z")
> [@inj3ct0r](#):
>
> i tried but i failed
That makes sense. The core Discourse stylesheets get flipped to create an RTL version here: [discourse/lib/stylesheet/compiler.rb at main · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/main/lib/stylesheet/compiler.rb#L64-L66). I do not think that CSS files that are added by themes are compiled to create an RTL version. If that is correct, that would explain the issues you have run into with themes when an RTL layout is used.
You could confirm this by adding some CSS rules that contain a direction to your site’s theme, then visit the site with an RTL locale and see if the direction has been flipped. I don’t think it will get flipped.
For example, if you add this to your theme:
```css
.category-list-item>footer .category-stat, .subcategory-list-item>footer .category-stat {
float: right;
}
```
I do not think it will get converted to this:
```css
.category-list-item>footer .category-stat, .subcategory-list-item>footer .category-stat {
float: left;
}
```
---
### Author:  [@inj3ct0r](https://meta.discourse.org/u/inj3ct0r)
#### Post date: [21 september 2023 om 04:44 UTC](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433/12 "2023-09-21T04:44:55Z")
I agree with you, I’m afraid still confused to use the code above 😕
any suggustions ?
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [21 september 2023 om 04:55 UTC](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433/13 "2023-09-21T04:55:04Z")
> [@inj3ct0r](#):
>
> I’m afraid still confused to use the code above
Do you know of an example of a theme that does not work with RTL? If you do, post a link to the theme here and I will test out my theory and explain what is going wrong after I test it.
Edit: Here is an explanation of the issue:
For the CSS files that are in the main Discourse codebase, the RTL CSS is created by “flipping” most of the CSS rules that are dependent on the direction of the site’s layout. For example, `padding-left` gets flipped to `padding-right`. This is done with the RTLcss gem: [GitHub - discourse/rtlcss: A wrapper around the rtlcss npm package to flip CSS direction in Ruby · GitHub](https://github.com/discourse/rtlcss).
The problem is that Discourse themes do not get their CSS rules flipped. That means that if a theme has CSS rules that specify a direction, the direction will be the same when an RTL language is used as when a LTR language is used. Here’s a minor example of that:
>
When the theme is used with an RTL interface `padding-left: 8px;` is not getting flipped to `padding-right: 8px;` This causes a minor issue with alignment. I am sure there are examples of bigger issues that happen when themes are used with an RTL language.
The same is true for any CSS that you add to a default Discourse theme in the theme editor. Here is an example using the code from this topic: [Can it be done with CSS? Grouping categories on category page - #4 by cosdesign](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433/4).
Here is a rule from that CSS that sets a direction:
```css
body [data-category-id="2"]::before,body [data-category-id="4"]::before {
position: absolute;
top: -35px;
left: 0; // this needs to be changed
font-weight: bold;
font-size: 15px;
text-transform: uppercase;
color: var(--primary-medium);
}
```
With an RTL locale, this is the issue:
If that rule was in a core Discourse CSS file, `left: 0;` would be automatically converted to `right: 0;` when an RTL language was selected. Because the CSS is added to a theme, you need to manually edit it to this:
```css
body [data-category-id="2"]::before,body [data-category-id="4"]::before {
position: absolute;
top: -35px;
right: 0; // changed to the proper position for RTL layouts
font-weight: bold;
font-size: 15px;
text-transform: uppercase;
color: var(--primary-medium);
}
```
Discourse adds an `rtl` class to the `html` tag when an RTL layout is used. Theme developers could use this class to make their themes work both for LTR and RTL layouts. This works, and I _think_ it’s correct, but possibly the `left: auto` declaration doesn’t need to be there.
```css
body [data-category-id="2"]::before,body [data-category-id="4"]::before {
position: absolute;
top: -35px;
left: 0;
font-weight: bold;
font-size: 15px;
text-transform: uppercase;
color: var(--primary-medium);
}
/* Fix positioning for rtl layouts */
.rtl body [data-category-id="2"]::before,.rtl body [data-category-id="4"]::before {
right: 0;
left: auto;
}
```
I am not sure if developers should take this approach with their themes. It is time consuming and could lead to errors and maintenance issues. Maybe Discourse could compile some themes could consider providing an RTL version. It might be worth testing out this approach with a few of them:
```ruby
require "rtlcss"
Rtlcss.flip_css("theme_css")
```
This was supposed to be a short answer 🙂 If what I have written is correct and has not been dealt with in another topic, maybe it should be moved to a new topic.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [2 maart 2024 om 06:56 UTC](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433/14 "2024-03-02T06:56:31Z")
These #Customization > Theme component may do what you want. Or be a good base to look at code to get ideas.
> [@Category Groups](https://meta.discourse.org/t/category-groups/200874):
>
> discourse2Summary Category Groups allows you to assign categories to groups, which are then used to sort and collapse categories on the categories page.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/category-groups)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-category-groups-component](https://github.com/discourse/discourse-category-groups-component)open_bookNew 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 Featuresinformation_source Important things to n…
“Modern Category + Group boxes” as used in the Air Theme works well.
> **[GitHub - discourse/discourse-minimal-category-boxes](https://github.com/discourse/discourse-minimal-category-boxes)**
>
> Contribute to discourse/discourse-minimal-category-boxes development by creating an account on GitHub.
