How to change categories style?

arlevskistef · 1월 15, 2018, 1:52오후

Hello everyone,
Does anyone know how to customize Categories as it is on print screen I have attached? Thank you

Johani · 1월 15, 2018, 2:38오후

What does the rest of the page look like?

itsbhanusharma · 1월 15, 2018, 2:40오후

Seems like he posted that snippet from community.revolut.com

Johani · 1월 15, 2018, 2:47오후

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:

arlevskistef · 1월 15, 2018, 3:02오후

Yes, you are right. I take it from revolut.

arlevskistef · 1월 15, 2018, 3:04오후

Thank you. Can this code be added via admin panel or it should be added in the code? Sorry for noob question.

itsbhanusharma · 1월 15, 2018, 3:05오후

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.

Johani · 1월 15, 2018, 3:18오후

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.

arlevskistef · 1월 15, 2018, 3:32오후

I did it!
Any tips how can I add some beauty to it?)

Johani · 1월 15, 2018, 3:53오후

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..

arlevskistef · 1월 15, 2018, 4:42오후

My last result, we are almost there:

Any ideas how can I make logos centered?

erlend_sh · 1월 15, 2018, 5:47오후

We do eventually plan to support box styling in parent categories and not just in sub-categories:

Johani · 1월 16, 2018, 8:20오전

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.

alexs · 1월 26, 2019, 1:50오후

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.

jord8on · 1월 13, 2020, 5:37오후

와, @alexs! 공유해 주셔서 감사합니다! 제 새로운 최애 Discourse 디자인이 될 것 같아요!

서브카테고리 뷰도 정말 마음에 들어요…

bekircem · 2월 13, 2020, 8:36오전

카테고리 아래에 하위 카테고리도 표시할 수 있는 방법이 있을까요?

Canapin · 2월 13, 2020, 11:59오전

제가 질문의 의도를 잘못 이해한 게 아니라면, 이것은 Discourse 설정입니다. “desktop category page style” 설정을 찾아보세요. 값이 "Box with sub-categories"로 되어 있을 것입니다.

이후 하위 카테고리 이름에 사용자 정의 CSS를 적용할 수 있습니다.

bekircem · 2월 24, 2020, 9:09오후

카테고리 구성 요소를 커스터마이징한 후에 하위 카테고리를 배치하는 것에 대해 말씀드리고 싶습니다. 말씀드리고 싶은 내용은 다음과 같습니다:

Canapin · 2월 24, 2020, 9:13오후

"카테고리 컴포넌트 커스터마이징"이 정확히 무엇을 의미하나요?

“데스크톱 카테고리 페이지 스타일” 설정에서 “하위 카테고리 박스” 값을 선택하면, 하위 카테고리가 이미 상위 카테고리 아래에 나열됩니다.

bekircem · 2월 24, 2020, 9:26오후

저는 이 예제에서 언급되었습니다:

여기서 몇 가지 변경 사항이 필요할 것 같습니다:

.category-list {
	thead,
	.topics,
	.subcategories,
	.category-description {
		display: none;
	}

글		댓글	조회수
Can it be done with CSS? Grouping categories on category page Development	12	3387	3월 2, 2024
Higher level of granularity for category & subcategory styling Feature	12	2973	10월 27, 2019
How to style the `/categories` page? UX	15	6529	7월 4, 2022
How to bring in Latest topics when using category boxes Development	20	5230	12월 11, 2023
Can We Represent Our Categories Like This on a Discourse Hosted Community Product Support	7	343	10월 12, 2024

How to change categories style?

Related topics