Categories Plus 최신 레이아웃에서 전체 화면 너비 사용법

개발
1

데스크톱에서 Categories + Latest 뷰가 사용 가능한 화면 전체 폭을 사용하도록 하려고 합니다.

width
width1657×885 138 KB

사이트의 다른 부분은 그대로 두면 됩니다 — 카테고리(왼쪽)와 최신 주제(오른쪽)가 있는 이 특정 레이아웃만 고정 폭의 중앙 정렬된 컬럼에 머물지 않고 전체 폭으로 확장되기를 원합니다.

많은 요소의 컨테이너(.wrap, .container, #main-outlet 등)를 오버라이드해 보았지만, 이 특정 뷰는 여전히 제한되어 있습니다. 따라서 이 뷰의 폭을 제어하는 다른 래퍼 또는 그리드가 있는 것으로 보입니다.

Categories + Latest 레이아웃의 폭을 제어하는 올바른 CSS를 알려주실 수 있을까요?

감사합니다.

3

안녕하세요,

main-outlet-wrapper의 grid 컬럼 레이아웃을 변경하고, 필요에 맞게 --d-max-width 및 --topic-body-width 변수를 조정해야 합니다.

4

감사합니다. 이렇게 하면 해결되었습니다.

.badge-category__wrapper .badge-category__name {
    font-size: 1.3em;
}
table.category-list {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1rem;
  box-sizing: border-box;
  border-collapse: separate;
  border-spacing: 0;
}

table.category-list thead th {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e0e0e0;
}

table.category-list tbody tr td {
  padding: 0.75rem 0;
  border-bottom: 1px solid #e0e0e0;
}

table.category-list tbody tr:last-of-type td {
  border-bottom: none;
}


.latest-topic-list {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1rem;
  box-sizing: border-box;
}

.latest-topic-list-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #e0e0e0;
}

.latest-topic-list-item:last-of-type {
  border-bottom: none;
}
5

Discourse의 후속 업데이트에서 무언가 변경된 건가요? 이 CSS는 저희 사이트에서 아무런 효과를 내지 못하고, 테두리만 추가합니다. (새로운 컴포넌트를 만들고, CSS 탭에 코드를 추가했으며, 컴포넌트를 활성화했습니다.)

이것이 제 모니터에서 기본 설정으로 Meta(그리고 저희 사이트)가 보이는 모습입니다. 이 공간의 일부를 활용하게 된다면 좋을 것 같습니다.

image
image1920×835 106 KB