# How to change categories style?
**URL:** https://meta.discourse.org/t/how-to-change-categories-style/78067
**Category:** UX
**Created:** [15 januari 2018 om 13:52 UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067 "2018-01-15T13:52:18Z")
**Posts on this page:** 12
**Page:** 2
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [24 februari 2020 om 21:30 UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/23 "2020-02-24T21:30:02Z")
Try removing this line:
```plaintext
.subcategories,
```
---
### Author:  [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [24 februari 2020 om 21:33 UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/24 "2020-02-24T21:33:21Z")
I am working on it. I am having problems with positioning. I have to take it to the bottom.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [24 februari 2020 om 21:44 UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/25 "2020-02-24T21:44:23Z")
Can you provide me a link to your category page so I can have a look?
---
### Author:  [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [24 februari 2020 om 21:46 UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/26 "2020-02-24T21:46:04Z")
Of course, please check that page.
[https://discourse.zettabayt.com/categories](https://discourse.zettabayt.com/categories)
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [24 februari 2020 om 22:07 UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/27 "2020-02-24T22:07:00Z")
Try replacing all your CSS by this:
```css
.category-boxes .category-box .logo.aspect-image img, .category-boxes-with-topics .category-box .logo.aspect-image img {
width: 150px;
height: auto;
}
.category-boxes .category-box, .category-boxes-with-topics .category-box {
background-color: #F2F2F2;
}
.category-boxes .description {
display: none;
}
.category-boxes .subcategories {
padding-top: 1em;
}
```
It will look like this:
---
### Author:  [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [24 februari 2020 om 22:41 UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/28 "2020-02-24T22:41:38Z")
> [@Canapin](#):
>
> .category-boxes
There is no .category-boxes class in my CSS code?
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [24 februari 2020 om 22:58 UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/29 "2020-02-24T22:58:06Z")
Ah, I see. I didn’t notice that Johani’s code was meant to be used on a category page which doesn’t use the boxed style.
If you don’t want to have a list of topics under your boxed categories, select “box with sub-category”, and apply my CSS.
If you want to have a list of topics under your boxed categories, my code won’t work, but I can try to make it work.
---
### Author:  [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [25 februari 2020 om 05:53 UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/30 "2020-02-25T05:53:08Z")
Thank you for the great support. I will try to give subcategories class to padding-top. Also I am planning to try recreate that category component with CSS Grid. 🙂
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [25 februari 2020 om 21:30 UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/31 "2020-02-25T21:30:51Z")
```css
.categories-and-latest {
flex-direction: column;
}
.category-list {
thead,
.topics,
.category-description {
display: none;
}
tbody {
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
tr {
display: inline-block;
width: 250px;
min-height: 250px;
margin: 0.75em;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border-left-color: transparent;
}
.category {
padding: 1.25em 0;
border-width: 0;
display: block;
width: 100%;
height: calc(100% - 2.5em);
position: relative;
background: #f2f2f2;
display: flex;
flex-direction: colum;
flex-wrap: wrap;
align-items: center;
.category-logo {
float: unset;
margin: 0 auto;
}
h3 {
a[href] {
display: flex;
flex-direction: column;
width: 250px;
order: 1;
.category-text-title {
justify-content: center;
}
}
}
&: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;
}
.subcategories {
.category-name {
margin-top: 0;
}
.badge-notification {
display: none;
}
}
}
}
}
```
It looks like this:
I modified Johani’s CSS and I’m not sure how reliable my modifications are since I don’t know what all his own modifications do.
---
### Author:  [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [27 februari 2020 om 18:03 UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/32 "2020-02-27T18:03:32Z")
It works now! Also i am changed some CSS Flex property. But i have one problem. In @Johani’s code, categories are normally listed in mobile design. But our code is doesn’t work for mobile. I am checked Joe’s code for the mobile categories, what is the difference for listing categories for mobile? ☹
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [2 april 2020 om 01:00 UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/33 "2020-04-02T01:00:29Z")
Awesome topic!
Was wondering how would I make subcategories list in a column vs side by side?
Current view. Looking for this style
- Bulletins.
- Pimax Official
- Site Map
With beside Subcategory New/unread count.
---
### Author:  [@londonstuff.meli](https://meta.discourse.org/u/londonstuff.meli)
#### Post date: [3 augustus 2020 om 14:04 UTC](https://meta.discourse.org/t/how-to-change-categories-style/78067/34 "2020-08-03T14:04:26Z")
> [@Johani](#):
>
> ```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;
> }
> }
> }
> }
>
> ```
For some reason, when I use the exact same code, the text is not centered in the box. The images are however. I tried entering the text, but the pictures are moving with with the text. Does anybody know what I am doing wrong?
[Vorige pagina](https://meta.discourse.org/t/how-to-change-categories-style/78067.md?page=1)