사이트에서 사용자 지정 CSS 변경하기

[Discourse]

이 가이드는 CSS 소개, Discourse에서 CSS를 추가하는 위치, 그리고 브라우저 검사 도구를 사용하여 올바른 선택자를 찾는 방법 등을 포함하여 Discourse 사이트에서 CSS를 변경하는 방법을 설명합니다.

필요한 사용자 권한: 관리자

요약

이 가이드에서는 다음 내용을 다룹니다:

1. CSS 및 핵심 개념에 대한 간단한 소개
2. 테마 구성 요소를 사용하여 Discourse 사이트에 CSS를 추가하는 방법
3. 브라우저 검사 도구를 사용하여 올바른 CSS 선택자를 찾는 방법

CSS 기초 이해하기

CSS는 Cascading Style Sheets(캐스케이딩 스타일 시트)의 약자입니다. 이해해야 할 세 가지 핵심 개념은 다음과 같습니다:

1. 구조: CSS 규칙은 선택자, 속성, 값으로 구성됩니다.

p {
  color: red;
}

• 선택자: p (모든 HTML <p> 태그를 대상으로 함)

• 속성: color

• 값: red

  

2. 캐스케이딩: 마지막으로 적용된 규칙이 우선합니다. 예를 들어:

p {
  color: red;
}
p {
  color: green;
}

마지막으로 적용된 규칙이므로 단락은 녹색이 됩니다.

3. 특이성(Specificity): 더 구체적인 규칙이 덜 구체적인 규칙을 덮어씁니다. 예를 들어:

div p {
  color: green;
}
p {
  color: red;
}

div p가 p보다 더 구체적이므로 div 안의 단락은 녹색으로 유지됩니다.

Discourse 사이트에 CSS 추가하기

Discourse 사이트에 CSS를 추가하려면:

1. 관리자 탐색 사이드바에서 Appearance > Themes & components(모양 > 테마 및 구성 요소)로 이동하고 Components(구성 요소) 탭을 클릭합니다. (또는 사이트의 이 URL을 따르세요: https://yoursite.com/admin/config/customize/components)

   

2. Install(설치)을 클릭한 다음 Create New(새로 만들기)를 클릭합니다

   

3. 테마 구성 요소 이름을 지정한 다음 Create (만들기)를 클릭합니다

   

4. 구성 요소가 적용될 테마를 선택한 다음 녹색 체크표시 아이콘을 클릭하여 선택 사항을 저장합니다

   

여러 개의 사용자 선택 가능 테마가 있는 경우, 테마 구성 요소를 모든 관련 테마에 추가했는지 확인하세요.

5. Edit Code(코드 편집)를 클릭합니다

   

6. CSS 탭에 CSS를 추가합니다

   

7. 변경 사항을 적용하려면 “Save”(저장)를 클릭합니다.

   

올바른 CSS 선택자 찾기

올바른 CSS 선택자를 찾기 위해 브라우저 검사 도구를 사용하세요:

1. 수정하려는 요소에서 마우스 오른쪽 버튼을 클릭합니다.

2. 컨텍스트 메뉴에서 “Inspect”(검사)를 선택합니다.

   

3. 개발자 도구 패널에서 요소 선택자를 찾습니다.

   

4. 해당 선택자를 클릭하고 CSS 규칙을 추가합니다.

   

5. 규칙을 복사하여 테마 구성 요소의 CSS 섹션에 붙여넣고 충돌하는 규칙을 제거합니다.
   

   

더 구체적인 선택자가 필요한 경우, Discourse의 기존 스타일에 사용된 선택자를 복사하여 테마 구성 요소에서 수정해야 할 수 있습니다.

위 단계를 시연하는 영상이 있습니다:

문제 해결

변경 사항이 적용되지 않는 경우, 다음 사항을 확인하세요:

• 테마 구성 요소가 모든 관련 테마에서 활성화되어 있는지
• 기존 스타일을 덮어쓸 만큼 CSS 규칙이 충분히 구체적인지

추가 리소스

• MDN CSS Documentation
• Chrome DevTools Documentation
• Freecodecamp
• Beginner’s Guide to Using Discourse Themes

[traceymoko (Tracey)]

Could this be made a wiki? The info under the heading Where Do I Add My CSS? needs updating, because there is no more Edit CSS/HTML button if you installed an existing theme — which is likely now if someone chose a theme through the newer Setup Wizard. Now we just use theme components that will be added to existing themes.

https://meta.discourse.org/t/make-css-changes-on-your-site/168101#where-do-i-add-my-css-5

I can update it once it’s made into a wiki.

[traceymoko (Tracey)]

Ok this is done now

[dontdieych (YCH)]

Thank you. Thanks to this part, I finally got the answer I wanted.

I needed a Discourse instance for various personal uses, so I installed it on a VPS a few days ago.

The text color in read topic was displaying too faintly, so I was searching for a solution. I had no idea there was a custom CSS setting under the ‘Component’ section.

I achieved the desired result with the following CSS. If anyone knows a better method, please leave a comment.

.topic-list-item.visited a.title:not(.badge-notification),
.latest-topic-list-item.visited a.title:not(.badge-notification),
.category-topic-link.visited a.title:not(.badge-notification),
{
  color: #000000;
}