# How to change categories style?
**URL:** https://meta.discourse.org/t/how-to-change-categories-style/78067
**Category:** UX
**Created:** [January 15, 2018, 1:52pm UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067 "2018-01-15T13:52:18Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@arlevskistef](https://meta.discourse.org/u/arlevskistef)
#### Post date: [January 15, 2018, 1:52pm UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/1 "2018-01-15T13:52:18Z")
Hello everyone,
Does anyone know how to customize Categories as it is on print screen I have attached? Thank you
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [January 15, 2018, 2:38pm UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/2 "2018-01-15T14:38:40Z")
What does the rest of the page look like?
---
### Author:  [@itsbhanusharma](https://meta.discourse.org/u/itsbhanusharma)
#### Post date: [January 15, 2018, 2:40pm UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/3 "2018-01-15T14:40:32Z")
Seems like he posted that snippet from [community.revolut.com](http://community.revolut.com)
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [January 15, 2018, 2:47pm UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/4 "2018-01-15T14:47:57Z")
You can start with this as a “base” and build on it.
```plaintext
.categories-and-latest {
flex-direction: column;
}
.category-list .category-description,
.category-list .subcategories,
.category-list tr .topics,
.category-list th {
display: none;
}
.category-list tbody .category {
border: none;
width: 100%;
display: block;
height: 100%;
padding: 0;
box-sizing: border-box;
}
.category-list tbody tr[class] {
display: inline-block;
width: 200px;
height: 200px;
margin: 20px;
border: 1px solid black;
text-align: center;
line-height: 200px;
}
.category-list tbody {
text-align: center;
}
```
Of course this is very rough and hard coded but should help you get started.
Result:
---
### Author:  [@arlevskistef](https://meta.discourse.org/u/arlevskistef)
#### Post date: [January 15, 2018, 3:02pm UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/5 "2018-01-15T15:02:02Z")
Yes, you are right. I take it from revolut.
---
### Author:  [@arlevskistef](https://meta.discourse.org/u/arlevskistef)
#### Post date: [January 15, 2018, 3:04pm UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/6 "2018-01-15T15:04:43Z")
Thank you. Can this code be added via admin panel or it should be added in the code? Sorry for noob question. 🙂
---
### Author:  [@itsbhanusharma](https://meta.discourse.org/u/itsbhanusharma)
#### Post date: [January 15, 2018, 3:05pm UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/7 "2018-01-15T15:05:46Z")
You can either create a child component in themes and then add it to the CSS section or add it directly to the CSS section of the current theme.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [January 15, 2018, 3:18pm UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/8 "2018-01-15T15:18:08Z")
> [@arlevskistef](#):
>
> Can this code be added via admin panel or it should be added in the code? Sorry for noob question.
No worries, everyone is a noob at one point or the other, @itsbhanusharma answered your question above.
Don’t hesitate to ask if you need more help.
---
### Author:  [@arlevskistef](https://meta.discourse.org/u/arlevskistef)
#### Post date: [January 15, 2018, 3:32pm UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/9 "2018-01-15T15:32:03Z")
I did it! 🙂
Any tips how can I add some beauty to it?)
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [January 15, 2018, 3:53pm UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/10 "2018-01-15T15:53:00Z")
Great 👌
Discourse allows you to add category logos. You can set a logo for each category
First go to the category page, then edit the category settings, from there you set a category logo:
Then you probably want to remove the `line-height: 200px` from the code above as it won’t be needed if you use logos.
You would end up with something like this..
---
### Author:  [@arlevskistef](https://meta.discourse.org/u/arlevskistef)
#### Post date: [January 15, 2018, 4:42pm UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/11 "2018-01-15T16:42:59Z")
My last result, we are almost there:
Any ideas how can I make logos centered? 🙂
---
### Author:  [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [January 15, 2018, 5:47pm UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/13 "2018-01-15T17:47:30Z")
We do eventually plan to support box styling in parent categories and not just in sub-categories:
> [@Display boxes for subcategories above topic list](https://meta.discourse.org/t/displaying-sub-categories-in-boxes/59371):
>
> bookmark This guide explains how to display boxes for subcategories above the topic list in Discourse. person_raising_hand Required user level: Administrator (or moderator if the moderators manage categories setting is enabled) There are four ways to display a list of sub-categories within the parent category: in rows (the default style) in rows with a list of some featured topics in boxes with only the name, logo, and description in boxes with name, logo, and a list of some featured t…
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [January 16, 2018, 8:20am UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/14 "2018-01-16T08:20:24Z")
There many ways to center things with CSS. I had a bit of time so I decided to revise the code to something a little bit more presentable.
Here’s what I ended up with:
And here’s what the code looks like:
```plaintext
.categories-and-latest {
flex-direction: column;
}
.category-list {
thead,
.topics,
.subcategories,
.category-description {
display: none;
}
tbody {
text-align: center;
tr {
display: inline-block;
width: 250px;
height: 250px;
margin: 0.75em;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border-left-color: transparent;
}
.category {
padding: 0;
border-width: 0;
display: block;
width: 100%;
height: 100%;
position: relative;
> div {
height: 100%;
background: #f2f2f2;
}
.category-logo {
float: unset;
margin: 0 auto;
}
.category-name {
margin-top: 1.25em;
}
h3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
a[href] {
display: flex;
flex-direction: column-reverse;
width: 250px;
}
}
&:after {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: "";
z-index: 1;
box-sizing: border-box;
pointer-events: none;
border-left: 6px solid;
opacity: 0.35;
border-color: inherit;
}
}
}
}
```
And like @erlend_sh pointed out, it’s only a matter of time before this makes its way to core. 👍
---
### Author:  [@alexs](https://meta.discourse.org/u/alexs)
#### Post date: [January 26, 2019, 1:50pm UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/15 "2019-01-26T13:50:44Z")
Just to share an alternative implementation of a similar idea, this is how Dozens have designed the Latest tab in their [community](https://weare.dozens.com):
I’d love to use something similar (if only I could figure out how to) because it seems like it gives users the best of both worlds:
- You can still set the Latest tab as the default landing page for the community
- It highlights & introduces the key categories, to help new users find their way around, in a much more approachable design than the current Categories tab imho
The obvious downside is that this design doesn’t work on mobile so they’ve set it to desktop only, which means an inconsistent experience. But I think the benefits outweigh the cost.
---
### Author:  [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [January 13, 2020, 5:37pm UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/17 "2020-01-13T17:37:17Z")
Wow, @alexs! Thanks for sharing! That might be my new favorite Discourse design! 😍
I also love the view of their subcategories…
---
### Author:  [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [February 13, 2020, 8:36am UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/18 "2020-02-13T08:36:31Z")
Is there a way to show subcategories under categories as well?
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [February 13, 2020, 11:59am UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/19 "2020-02-13T11:59:34Z")
Unless I don’t understand what you’re asking, this is a Discourse setting. Look for “desktop category page style” setting, it will be the “Box with sub-categories” value.
Then you can apply custom CSS to subcategories names.
---
### Author:  [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [February 24, 2020, 9:09pm UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/20 "2020-02-24T21:09:04Z")
I’m talking about placing subcategories after customizing the category component.I want to say this:
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [February 24, 2020, 9:13pm UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/21 "2020-02-24T21:13:22Z")
What do you mean by “customizing the category component”?
Subcategories are already listed under the parent category with you choose “box with sub-category” value in the “desktop category page style” setting:
---
### Author:  [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [February 24, 2020, 9:26pm UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/22 "2020-02-24T21:26:22Z")
I am mentioned that example:
> [@How to change categories style?](https://meta.discourse.org/t/how-to-change-categories-style/78067/14):
>
> There many ways to center things with CSS. I had a bit of time so I decided to revise the code to something a little bit more presentable. Here’s what I ended up with: And here’s what the code looks like: .categories-and-latest { flex-direction: column; } .category-list { thead, .topics, .subcategories, .category-description { display: none; } tbody { text-align: center; tr { display: inline-block; width: 250px; height: 250px; margin: 0.75em…
I think, i need to make some changes in here:
```
.category-list {
thead,
.topics,
.subcategories,
.category-description {
display: none;
}
```
[Next page](https://meta.discourse.org/t/how-to-change-categories-style/78067.md?page=2)