Zeronoise 테마

:discourse2: 요약 Zeronoise는 명확한 색상 포인트와 미묘하게 구분된 콘텐츠 영역을 통해 편안한 읽기 경험을 만드는 데 중점을 두었습니다.
:eyeglasses: 미리보기 Discourse Theme Creator에서 미리보기
:hammer_and_wrench: 리포지토리 링크 https://github.com/discourse/zeronoise
:open_book: Discourse 테마가 처음이신가요? Discourse 테마 사용 입문 가이드

이 테마 설치하기

기능

Meta 여러분, 안녕하세요! 저는 명확한 색상 포인트와 미묘하게 구분된 콘텐츠 영역을 통해 편안한 읽기 경험을 만드는 데 중점을 둔 Discourse 테마를 제작했습니다.

데스크톱 버전에서는 디자인에서 더 높은 위계를 부여하기 위해 토픽 작성자 아바타를 제목 왼쪽으로 이동시켰습니다.

세리프 폰트로 실험하는 것도 재미있었고, 결국 "Playfair Display"가 테마에 정말 개성(heehe)을 부여합니다.

또 다른 재미있는 점은 테마 헤더가 검은색이므로, 테마 설정(색상 반전, 색조 회전 및 밝기)을 통해 로고의 일부 측면을 플레이할 수 있다는 것입니다.

이 테마를 즐기고, 사용하고, 포크하시길 바랍니다 :100:!

설정

이름 설명
로고 색상 반전
로고 색조 회전 로고의 색상을 변경하려면 도 단위의 값을 지정하세요. 이것이 무엇인지 모르겠다면 0으로 두거나 'css filter hue rotation’을 검색해 보세요.
로고 밝기 로고에 추가할 밝기의 양을 설정합니다 (더 어둡게 하려면 음수를 설정하세요)

크레딧

@ruidovisual 이 제작했습니다


:discourse2: 우리가 호스팅하고 계신가요? 테마는 Standard, Business, Enterprise 플랜에서 사용할 수 있습니다.

51개의 좋아요

와! 정말 아름다운 테마네요! 솔직히 많은 요소들은 Material Theme에 기본적으로 포함되어야 하지만, 두 테마 모두 훌륭합니다. 잘 만들었네요! :+1:

2개의 좋아요

이 테마가 실제로 꽤 잘 어울리네요. 제 웹사이트에서 꼭 시도해볼 것 같아요.

4개의 좋아요

새로운 주제(topic)가 컴포넌트인가요?

2개의 좋아요

솔직히 제가 찾은 테마 중 가장 예쁜 것 같아요! 정말 감사합니다 :slight_smile:

혹시 @ruidovisual 님께 한 가지 부탁이 있어도 될까요? :slight_smile:

  • 이런 기술적인 것에 대해 완전 초보라, 제 무지를 용서해 주세요. 파일을 포크하고 색상 테마를 변경하는 것까지는 성공했어요. 이제 폰트를 변경해야 하는데, SCSS 변수 안에 제 폰트 패밀리(font family)를 임포트하는 방식으로 변경할 수 있는 거죠?
  • 그런데 어떻게 하면 제목, 헤더 등에 하나의 폰트를, 본문에는 다른 폰트를 설정할 수 있는지 모르겠어요.

도와주시면 정말 감사하겠습니다. 범위를 벗어난 질문일 수 있다는 건 알지만, 정말 큰 도움이 될 거예요 :slight_smile:

5개의 좋아요

카르틱, 안녕하세요! 테마를 마음에 들어하신다니 기쁩니다 : )

가장 쉬운 방법은 body에 font-family를 정의하는 것입니다(common.scss에서 처리하는 것이 가장 좋다고 생각합니다):

body {
  font-family: '원하는 폰트 패밀리 이름', [FALLBACKS];
} 

직접 폰트를 추가하시는지, 아니면 구글 폰트를 사용하시는지 모르겠지만, 구글 폰트 카탈로그에서 폰트 패밀리를 선택하시기를 권장합니다.

선택한 폰트 종류에 따라 [FALLBACKS]를 적절한 폴백으로 대체해야 한다는 점을 기억하세요. font-family 폴백에 대한 자세한 내용은 여기에서 확인하실 수 있습니다.

제목과 헤더의 폰트를 변경하는 부분은 이미 파악하신 것 같지만, 다시 한번 상기시켜 드리자면, 폰트를 가져오는 것 외에도 variables.scss의 116번째 줄에서 선언해야 합니다.

도움이 되길 바랍니다! 좋은 주말 보내세요 : )

7개의 좋아요

테마용 커스텀 컴포넌트를 말씀하시는 건가요? 이 경우 답은 아니에요. position: fixed로 이미 설정되어 있습니다. mobile.scss의 36번째 줄을 참고해 주세요.

즐거운 주말 보내시고, 기다려 주셔서 감사합니다 : )

4개의 좋아요

정말 멋진 테마네요! zeronoise를 기반으로 새로운 discourse 테마를 만들게 될 날을 손꼽아 기다리고 있습니다.
공유해 주셔서 감사합니다!

5개의 좋아요

훌륭한 테마네요. 개인적으로 마음에 드는 목록에 상위권입니다. :slight_smile:

마법사(Wizard)에서 선택한 것과 동일한 폰트를 선택할 수 있는 옵션이 있다면 더 흥미로울 것 같습니다.

4개의 좋아요

안녕하세요 @ruidovisual,

테마가 정말 마음에 듭니다.

보라색을 빨간색으로 변경할 수 있을까요? 테마의 빨간색 버전을 출시해 주실 수 있을까요?

직접 시도해 봤는데, 그 후 테마 효과가 사라졌고 빨간색도 아니었습니다. :grin:

2개의 좋아요

@ruidovisual 설명해 주셔서 감사합니다. 폰트를 어떻게 변경하는지 알아냈습니다. 정말 감사해요!

이제 테마의 라이트 모드와 다크 모드 버전을 직접 만들어 보고 있습니다. CSS를 최대한 사용하지 않으려고 Color Palettes를 활용하고 있습니다.

거의 모든 것을 조정했지만, 아래 두 가지 요소만 아직 해결하지 못했습니다:

  1. 게시글 하단의 상태 표시줄은 이 테마에서 특별한 효과를 가지고 있어서 Color Palette로 제어할 수 없습니다. CSS를 사용하여 이 효과를 어떻게 조정할 수 있을까요? 어떤 부분을 타겟팅해야 하나요?

  2. 개별 카테고리 뷰에서 모든 주제 상단의 바는 팔레트에 어떤 색을 설정하든 항상 흰색으로 남아 있습니다.

이 두 가지에 대해 도움을 주시면 좋겠습니다. :slight_smile:

P.S. 참고용으로 제 Color Palette를 첨부합니다:

1개의 좋아요

훌륭한 테마네요.

한 가지 질문이 있는데, “Box-type” 카테고리에서 제대로 작동하도록 설정하신 분이 계신가요? 그냥 무작위로 도형이 표시되고 텍스트는 흰색으로 남아 있습니다.

1개의 좋아요

정말 깔끔하고 현대적입니다. 커뮤니티가 만든 테마는 최고예요!

1개의 좋아요

안녕하세요, 이 테마가 정말 좋습니다.
다만, 중국어 포럼에서 스타일 관련 문제가 있는 것 같습니다.

zeronoise 테마

기본 테마

3개의 좋아요

아마도 중국어 문자의 서식 문제일 것입니다

2개의 좋아요

우선 이 아름다운 테마를 만들어 주셔서 정말 감사합니다 @ruidovisual . 지난 거의 2개월 동안 커뮤니티 포럼에서 이 테마를 사용해 왔습니다.

질문이 하나 있습니다. 모바일에서 내비게이션 드롭다운을 제거할 수 있을까요?

미리 감사드립니다.

1개의 좋아요

이 테마를 만들어 주셔서 감사합니다. 지금까지 정말 마음에 듭니다! 지금까지 본 것 중 가장 기분 좋은 토론 스타일 중 하나인 것 같아요 :slight_smile:

다만 한 가지 문제가 있습니다. 카테고리에서 대량 작업을 수행할 때 체크박스가 표시되지 않아서 여러 주제를 선택할 수 없어요. 이 문제로 인해 테마를 정상적으로 사용할 수 없는데, 정말 답답합니다. 이 문제를 수정해 주실 수 있을까요? <3

1개의 좋아요

이것은 중국어 문자와 아무런 관련이 없으며, category style의 “box” 설정 관련 문제입니다.

.badge {
  &-category-bg,  /* <------ bad!! */
  &-wrapper.bullet &-category-parent-bg,
  &-wrapper.bullet &-category-parent-bg + &-category-bg {
    border-radius: 50%;
    width: 9px;
  }

이를 해결하려면 다음을 테마 구성 요소로 적용하세요.

.badge {
  &-wrapper.bar &-category-bg,
  &-wrapper.bar &-category-parent-bg,
  &-wrapper.bar &-category-parent-bg + &-category-bg {
     border-radius: 0%;
  }
  &-wrapper.box &-category-bg,
  &-wrapper.box &-category-parent-bg,
  &-wrapper.box &-category-parent-bg + &-category-bg {
    border-radius: 0%;
    width: 100%;
  }
}
3개의 좋아요

테마는 마음에 드는데… :wink:

이 인쇄 뷰가 사용 불가능해서 도움을 주실 수 있나요? 수정해 주실 수 있나요:

  • 제목은 작아야 합니다
  • 그림자가 있는 테두리는 표시되지 않아야 합니다

또한 토픽 선택이 작동하지 않습니다

CleanShot 2022-11-20 at 00.12.18

그리고 이 테마에서 글꼴을 전역적으로 변경하는 방법은 무엇인가요?

정말 인상 깊습니다. 정말 감사합니다.

지금 바로 배포할 예정입니다. 곧 더 기여할 수 있기를 바랍니다 :slight_smile: