Hello everyone,
Does anyone know how to customize Categories as it is on print screen I have attached? Thank you
「いいね！」 2
What does the rest of the page look like?
Seems like he posted that snippet from community.revolut.com
「いいね！」 3
You can start with this as a “base” and build on it.
.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:
「いいね！」 10
Yes, you are right. I take it from revolut.
Thank you. Can this code be added via admin panel or it should be added in the code? Sorry for noob question. 
「いいね！」 1
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.
「いいね！」 2
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.
「いいね！」 3
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…
「いいね！」 5
We do eventually plan to support box styling in parent categories and not just in sub-categories:
「いいね！」 6
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;
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. 
「いいね！」 17
Just to share an alternative implementation of a similar idea, this is how Dozens have designed the Latest tab in their community:
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.
「いいね！」 9
「いいね！」 7
カテゴリの下にサブカテゴリを表示する方法はありますか？
私の理解が間違っていなければ、これは Discourse の設定です。「desktop category page style」という設定を探してください。その値は「Box with sub-categories」です。
その後、サブカテゴリ名にカスタム CSS を適用できます。
「いいね！」 6
"カテゴリコンポーネントのカスタマイズ"とは具体的にどのような意味でしょうか？
「デスクトップカテゴリページスタイル」設定で「サブカテゴリ付きボックス」を選択している場合、サブカテゴリは既に親カテゴリの下にリスト表示されます。
「いいね！」 1
以下のような例が挙げられています：
ここをいくつか変更する必要があると思います：
.category-list {
thead,
.topics,
.subcategories,
.category-description {
display: none;
}