Amazon과 같은 섹션의 모양을 사용자 지정하는 방법은?

커뮤니티 여러분, 안녕하세요!

최근에 discourse를 설치했는데, 외관을 커스터마이징하고 싶습니다.

하지만 들여쓰기가 적용된 섹션 그룹을 다른 섹션에서 선택하는 방법, 그리고 하위 섹션 목록을 한 열로 표시하는 방법을 모르겠습니다.

관리자 패널의 설정을 살펴봤지만, 제 문제를 해결할 수 있는 유사한 옵션을 찾지 못했습니다.

어떤 도움이라도 감사하겠습니다.
최근에 이 플랫폼을 공부하기 시작했습니다.

감사합니다!

예를 들어, 하위 섹션 목록을 단일 열로 만들려면 여기의 값(category-list.scss)을 변경해야 합니다.

다음 값으로 변경해야 합니다.

하지만 서버의 파일 자체를 변경하지 않고 관리 패널을 통해 올바르게 이 작업을 수행하는 방법은 무엇일까요?

display: block;
align-items: baseline;
margin-right: 0;

1개의 좋아요

제가 이해한 대로, 이렇게 해야 하나요?
이것이 문제를 해결하는 올바른 방법인가요?

이것은 하위 카테고리의 기본 CSS입니다. 카테고리 편집 대화상자에서 "상위 카테고리"를 지정하고, 하위 카테고리와 상위 카테고리의 색상을 동일하게 설정하면 됩니다.

1개의 좋아요

색상이 여기에 무슨 관련이 있는지 잘 모르겠습니다.
기본적으로 하위 카테고리(서브카테고리)는 다음과 같이 표시됩니다: 가로 방향으로 하나씩 나열됩니다.

위에서 제가 언급한 CSS를 적용한 후, 제가 원했던 대로 하위 섹션(서브섹션)이 세로 방향으로 정렬되었습니다.

단순히 궁금한 점이 있습니다. 제가 언급한 형태로 관리 패널을 통해 CSS를 추가하는 것이 올바른 방법인가요?

그리고 두 번째 주요 질문은, 아마존 포럼 스크린샷 예시처럼 섹션 자체를 들여쓰기(인덴트)로 서로 분리하는 방법은 무엇인지입니다.

1개의 좋아요

아, 알겠습니다.

올바른 방법은 이 CSS를 테마 컴포넌트에 배치하는 것입니다. 현재 하고 계신 것과 아주 약간만 다릅니다!

라이트 테마를 수정하면 다크 테마에서는 변경 사항이 표시되지 않습니다.

사이트 로컬 커스터마이징을 위해 단일 테마 컴포넌트를 하나만 만들어 주세요!

4개의 좋아요

조언해 주셔서 감사합니다. 컴포넌트로 어떻게 구성하는 것이 더 나은지에 대해 알고 싶습니다.

구체적인 예로 Amazon 를 들자면, 단순히 CSS 문제만이 아니라 마크업도 표준(HTML)과 다릅니다.

같은 표시를 빠르게 구성하려면 어떻게 해야 하나요?

불행히도 레이아웃에 대한 지식이 얕습니다. 저는 백엔드 개발자라 레이아웃이 어렵습니다.

소스 파일 자체의 코드를 변경하지 않고 이 레이아웃을 이전할 수 있을까요?

여러 가지 완성된 테마를 살펴봤는데,
대부분 서로 비슷해서 아마존처럼 간결한 느낌은 아니었어요. 커뮤니티와 함께 만들어 볼 수 있을까요? 섹션 사이에 들여쓰기를 넣으면 더 간결해 보일 것 같아요.

그들의 마크업이 일부 다른 이유는 웹사이트를 꽤 오랜 기간 업데이트하지 않은 것 같습니다.

아래 CSS를 추가하면 하위 카테고리 스타일의 대부분을 구현할 수 있습니다…

.category-list .subcategories .subcategory {
  display: flex;
}

마크업 변경을 원하신다면, Discourse에서 템플릿 오버라이드가 어떻게 작동하는지 살펴봐야 합니다… 이는 Discourse 테마 개발자 가이드의 고급 섹션에 설명되어 있습니다.