캘린더 형식 설정?

지원
4

좋습니다! 사이트 테마 CSS 파일을 편집하거나, 테마 컴포넌트에 변경 사항을 추가한 후 해당 테마 컴포넌트를 사이트의 모든 테마에 포함해야 합니다. 저는 테스트 사이트에서 테마 컴포넌트 방식을 사용했습니다. 스크린샷을 통해 해당 과정을 보여주는 시도는 다음과 같습니다:

image
image1056×604 56.9 KB

image
image823×397 25.3 KB

image
image1073×753 62.5 KB

“이 테마에 컴포넌트 포함” 입력란에 사이트의 테마(또는 테마들)를 추가했는지 확인하세요.

그 작업을 완료한 후, “CSS/HTML 편집” 버튼을 클릭하고 테마 편집기의 공통 CSS 탭에 다음 내용을 추가하세요:

.discourse-calendar-wrap {
    border: 5px solid var(--primary);
}

.calendar.fc.fc-unthemed .fc-content,
.calendar.fc.fc-unthemed .fc-divider,
.calendar.fc.fc-unthemed .fc-list-heading td,
.calendar.fc.fc-unthemed .fc-list-view,
.calendar.fc.fc-unthemed .fc-popover,
.calendar.fc.fc-unthemed .fc-row,
.calendar.fc.fc-unthemed tbody,
.calendar.fc.fc-unthemed td,
.calendar.fc.fc-unthemed th,
.calendar.fc.fc-unthemed thead {
    border-color: var(--primary);
}

이 변경 사항은 달리의 테두리 색상을 사이트의 “기본(primary)” 색상으로 설정합니다. 이는 사이트 텍스트에 사용되는 것과 동일한 색상입니다. --primary 변수를 사용하면 이 변경 사항이 라이트 및 다크 컬러 스킴 모두에서 작동합니다:

image
image989×913 36.2 KB

image
image981×921 37.2 KB

var(--primary)를 사용하여 색상을 설정하는 대신, 16진수 색상을 하드코딩할 수 있습니다. 예를 들어 검은색은 #000000입니다:

.discourse-calendar-wrap {
    border: 5px solid #000000;
}

이 변경 사항으로 인해 원치 않는 부수 효과가 발생하는지 확인해 주세요. 두 번째 규칙이 원래의 더 밝은 색상을 유지하기를 원하는 일부 요소를 선택할 수도 있습니다.