“+ 새 주제” 버튼의 스타일을 “답글” 버튼과 일치하게 변경

[jord8on (Jordan)]

“답글” 버튼의 스타일을 좋아합니다. 이 버튼은 /admin/customize/colors(색상 팔레트/선택)에서 정의된 “Tertiary” 색상을 사용하고 있습니다.

아래 비디오에 나와 있는 것처럼 “새 주제” 버튼의 스타일을 “답글” 버튼과 동일하게 맞추고 싶습니다:

[Stranik (Evgeny)]

답글 버튼의 CSS를 가져와 이 속성을 새 글 추가 버튼에 적용해 볼 수 있습니다:

background: #00a3cc;
color: #fff;

다음과 같은 코드를 추가해 보세요:

 .header-buttons .btn.btn-default {
      background: #00a3cc;
      color: #fff;
  }

  .header-buttons .btn.btn-default svg {
      color: #fff !important;
  }

다음으로, :hover(호버) 상태에 대한 CSS를 추가해야 합니다.

  .header-buttons .btn.btn-default:hover {
      background: #***;
  }

필요한 색상을 더 정확하게 선택하세요. *** 부분을 원하는 색상으로 대체하십시오.

Discourse에 CSS를 추가하는 방법:

Developing Discourse Themes & Theme Components

Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: Themes vs. Theme Compon…

CSS의 어떤 부분에든 이 작업을 수행할 수 있습니다.

[jord8on (Jordan)]

정말 훌륭한 답변입니다!!! 정말 감사합니다!

CSS 관련해서 조언을 한 가지 더 구할 수 있을까요… 아래 두 코드 조각을 가장 잘 최소화(minify)하는 방법은 무엇일까요?:

헤더의 [+ 새 주제] 버튼 색상 변경

이 헤더 버튼은 (모든 페이지에 (+ 새 주제) 버튼 추가) 테마 때문에 존재합니다.

.header-buttons .btn.btn-default {
      background: #00ccff;
      color: #fff;
      font-weight: 600;
  }
.header-buttons .btn.btn-default svg {
      color: #fff !important;
  }
.header-buttons .btn.btn-default:hover {
      background: #00a3cc;
  }

카테고리 및 태그 페이지의 [+ 새 주제] 버튼 색상 변경

button#create-topic {
      background: #00ccff;
      color: #fff;
      font-weight: 600;
  }
button#create-topic svg {
      color: #fff !important;
  }
button#create-topic:hover {
      background: #00a3cc;
  }

[Stranik (Evgeny)]

최소화? 번역이 정확한지 확신이 서지 않아 죄송합니다. 다음을 결합해서 사용해 보세요:

.header-buttons .btn.btn-default, .header-buttons .btn.btn-default svg {
      background: #00ccff;
      color: #fff !important;
      font-weight: 600;
  }
.header-buttons .btn.btn-default:hover {
      background: #00a3cc;
}

또는

#new-create-topic, #new-create-topic svg {
    background: #00ccff;
    color: #fff !important;
    font-weight: 600;
}

#new-create-topic:hover {
    background: #00a3cc;
}

거기에 id(new-create-topic)가 있는 것 같아서, 이것이 얼마나 고유한지 모르겠습니다. 이것을 사용해 보세요(직접 테스트하지는 않았습니다).

실제로는 선택지가 매우 많습니다.

다음 중 하나를 사용하세요:

• .header-buttons
• button
• #new-create-topic

이들의 어떤 조합도 가능합니다…

[jord8on (Jordan)]

코드를 더 짧게 만들어 주려고 노력해 주셔서 감사합니다. 제가 제안해 주신 조합 중 몇 가지를 시도해 봤는데, 이런 결과가 나왔습니다… (플러스 기호를 확인해 주세요)

지금은 두 개의 코드 스니펫을 그대로 유지하기로 결정했고, 지금은 모든 것이 완벽합니다!! 다시 한번 감사합니다 @Stranik

[Stranik (Evgeny)]

아이콘의 호버 시 CSS를 설정하지 않았습니다:

#new-create-topic:hover, #new-create-topic:hover > svg {
    background: #00a3cc;
}

아마도 그렇습니다. 때로는 로컬에서 직접 해보고 확인하는 것이 더 쉽습니다.

안전하게 다양한 옵션을 시도하고 조합해 보세요. 창의력을 발휘할 수 있는 폭넓은 공간이 있습니다. 행운을 빕니다!