이 가이드에서는 Discourse에서 하위 카테고리 박스(subcategory boxes)의 외관을 커스터마이징하는 방법을 설명합니다. 주요 주제(Featured topics)의 스타일 조정, “Boxes” 스타일 수정, 그리고 카테고리 설명 절단(truncation) 관리가 포함됩니다.
필요한 사용자 권한: 관리자(Administrator)
Discourse의 하위 카테고리 박스는 포럼의 시각적 매력과 조직화를 향상시키기 위해 커스터마이징할 수 있습니다. 이 가이드에서는 하위 카테고리 박스에 대한 다양한 커스터마이징 옵션, 즉 주요 주제 스타일, “Boxes” 스타일, 그리고 카테고리 설명 절단 설정을 안내해 드립니다.
주요 주제(Featured topics)가 포함된 박스 커스터마이징
주요 주제가 포함된 하위 카테고리 박스에 대담하고 컬러풀한 룩을 적용하려면 사용자 정의 CSS를 사용할 수 있습니다. 이 방법은 로고를 제거하고 각 하위 카테고리에 고유한 배경색을 적용합니다.
하위 카테고리 박스를 다음과 같은 모양으로 만들려면 아래 단계를 따르세요:
- 사이트의 관리자 패널로 이동합니다.
- Customize > Themes로 이동합니다.
- 새 테마를 생성하거나 기존 테마를 편집합니다.
- 테마에 다음 CSS를 추가합니다:
.category-programming {
.category-box, .category-box-inner {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
.category-logo {
display: none;
}
h3 {
padding: 2em 0;
}
}
.category-box-ruby {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #BF1E2E;
}
}
.category-box-php {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #0E76BD;
}
}
.category-box-javascript {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #D7BB2F;
}
}
}
CSS 선택자와 색상을 특정 카테고리 이름과 원하는 색상 스킴에 맞게 조정하세요.
“Boxes” 스타일 커스터마이징
하위 카테고리에 “Boxes” 스타일을 사용 중이라면 유사하게 커스터마이징할 수 있습니다:
테마의 CSS에 다음 코드를 추가하세요:
.category-programming .category-boxes {
.category-box {
border: none;
.category-logo {
display: none;
}
}
.category-box-heading {
padding: 0;
border-radius: 3px;
h3 {
padding: 1em 0;
}
}
.category-box-ruby {
.category-box-heading {
background-color: #BF1E2E;
}
.category-box-heading h3 {
color: white;
}
}
.category-box-php {
.category-box-heading {
background-color: #0E76BD;
}
.category-box-heading h3 {
color: white;
}
}
.category-box-javascript {
.category-box-heading {
background-color: #D7BB2F;
}
.category-box-heading h3 {
color: white;
}
}
}
다시 한번, 선택자와 색상을 포럼의 구조와 디자인 취향에 맞게 수정하세요.
카테고리 설명 절단 관리
기본적으로 Discourse는 카테고리 박스에서 카테고리 설명을 4줄로 절단합니다. 사용자 정의 CSS를 사용하여 이를 조정할 수 있습니다:
설명을 2줄로 줄이려면 테마에 다음 CSS를 추가하세요:
.category-boxes .description {
-webkit-line-clamp: 2;
}
-webkit-line-clamp 값을 조정하여 원하는 표시 줄 수를 달성하세요.
모바일 기기를 위한 고려 사항
데스크톱에서 “Boxes with subcategories” 스타일을 사용할 때, 모바일 기기에서는 여전히 게시물이 표시될 수 있습니다. 이는 작은 화면에서 가독성을 유지하기 위해 Discourse 디자인에서 의도된 동작일 수 있습니다.
모바일 레이아웃을 조정해야 하는 경우, 모바일 뷰를 위한 특정 CSS를 추가하거나 더 맞춤화된 솔루션을 위해 Discourse 테마 개발자와 상담해야 할 수 있습니다.
