캘린더 형식 설정?

지원
1

캘린더 플러그인에 표시되는 캘린더의 색상을 조정하는 간단한 방법이 있나요? 흰색 배경에 연한 회색 텍스트가 사용되는 현재 색상 구성에 대한 가독성 문제가 있다는 불만이 있습니다.

2

캘린더 색상을 조정할 수 있는 설정은 없지만, CSS를 조금만 사용하면 색상을 오버라이드할 수 있습니다. 저는 CSS 전문가가 아니지만, 아래와 같은 것이 원하시는 것과 비슷할까요?

image
image1017×891 38.5 KB

제가 변경한 부분은 외부 테두리와 캘린더 날짜를 구분하는 선의 색상을 어둡게 한 것뿐입니다. 이것이 원하시는 변경 사항이라면, 정확한 CSS 선택자를 찾아서 알려드릴 수 있습니다. (해당 스크린샷에서 한 조정은 브라우저의 CSS 도구를 통해 직접 수행한 것입니다.)

3

감사합니다! 그게 큰 개선이 될 거예요. 올바른 셀렉터를 찾는 데 도움을 좀 주실 수 있을까요?

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;
}

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

5

좋아요! 정말 감사합니다. 내일 한번 시도해볼게요.