배너의 '확대’와 ‘닫기’ 항목의 색상을 변경하고 싶습니다. CSS로 가능할 것 같은데, 배너 컴포넌트에서 어떻게 해야 할까요?
다음과 같이 수행할 수 있습니다:
-
검사 도구 열기:
다양한 배너가 활성화된 웹페이지로 이동합니다. 페이지의 아무 곳이나 마우스 오른쪽 버튼을 클릭하고 “검사”(Windows에서는Ctrl + Shift + I, Mac에서는Cmd + Option + I를 누름)를 선택합니다. 그러면 브라우저의 개발자 도구가 열립니다. -
배너 찾기:
개발자 도구의 Elements(요소) 탭에서 코드 섹션 위에 마우스를 올려 해당 웹페이지의 영역이 강조되는 것을 확인합니다. 배너를 찾으면, 배너를 포함하는 가장 바깥쪽 **<div>**를 클릭합니다. 이렇게 하면 배너 전체와 그 안의 모든 요소를 선택하게 됩니다. -
요소 탐색:
배너가 선택된 상태에서, Elements(요소) 탭에서 배너 구조 내부의 모든 중첩된 HTML 요소를 볼 수 있습니다. 이는 배너를 생성하는 데 사용된 HTML의 계층 구조를 보여줍니다. -
스타일 검사:
개발자 도구의 오른쪽 쪽에는 Styles(스타일) 탭이 있습니다. 여기에는 선택된 요소에 적용된 CSS 스타일이 표시됩니다. 상속된 스타일, 인라인 스타일, 외부 스타일시트의 스타일을 볼 수 있습니다. -
변경 사항 실험:
배너 안의 요소를 선택하고 Styles(스타일) 탭에서 스타일을 직접 수정합니다. 예를 들어 색상, 글꼴 크기, 패딩, 여백 또는 기타 CSS 속성을 조정할 수 있습니다. 이러한 변경 사항은 임시이며 웹페이지에 즉시 표시되므로 자유롭게 실험할 수 있습니다. -
디자인 최종화:
디자인 변경 사항에 만족하면 수정된 CSS 코드를 복사합니다. 이는 개별 요소나 배너 전체에 대한 변경 사항을 포함할 수 있습니다. -
변경 사항 적용:
https://yoursite.com/admin/customize/components로 이동하여 컴포넌트를 생성한 후 Edit HTML/CSS(HTML/CSS 편집) 섹션에 수정된 CSS 코드를 붙여넣습니다. 스타일이 올바르게 적용되도록 적절한 배너 클래스나 ID를 지정하고, 해당 컴포넌트를 테마에 적용합니다. -
저장 및 검토:
업데이트된 CSS를 저장하고 웹사이트를 새로고침해 배너가 의도한 대로 변경 사항을 반영하는지 확인합니다.
또한 다음을 참고할 수 있습니다: Discourse에서 CSS 사용자 지정 방법
@MihirR 아주 유용한 일반적인 설명을 주셔서 감사합니다.
조금 찾아본 결과, 웹 개발자 도구에서 Firefox가 Chrome보다 더 나은 스타일 편집기를 제공하는 것으로 보입니다.
하지만 제가 큰 어려움을 겪고 있는 구체적인 사례로 돌아가면, Expand와 Close 버튼이 호버 시 색상이 변하는데 기본 색상을 설정하는 방법을 찾는 데 실패했습니다. 해당 항목은 span.d-button-label 클래스인 것 같습니다.
안녕하세요 
이 버튼들의 색상을 변경하는 방법에 대한 예시입니다.
.banner-box {
.button-container {
.btn {
.d-icon,
.d-button-label {
color: var(--tertiary); // 원하시는 색상으로 변경하세요
}
// 호버 및 포커스 색상
.discourse-no-touch & {
&:hover,
&:focus {
.d-icon,
.d-button-label {
color: var(--tertiary-hover); // 원하시는 색상으로 변경하세요
}
}
}
}
}
}
@Dan, 이건 SCSS인가요, LESS인가요? 요즘 CSS 트렌드를 놓치고 있어서요. 제가 컴파일을 하지 않아도 Discourse에서 바로 사용할 수 있나요?
@Andro 그건 SCSS예요 :))
그래서 Discourse가 SCCS를 네이티브로 지원하나요?
네, SCSS를 기본적으로 지원합니다.