에어 테마

여기에 크로스 포스트합니다. Chat 플러그인이 Discourse Search Banner와 충돌하는 문제인 줄 알았어요. 하지만 Banner만 미리보기로 테스트해 본 결과, Air 테마 배경과 관련된 문제인 것 같습니다.

아래 링크를 참고해 주세요.

https://meta.discourse.org/t/issue-with-discourse-search-banner/254231?u=heliosurge

위에서 설명드린 대로 Chat 플러그인 문제를 확인해 보셨는지 궁금합니다. 바쁘실 텐데 죄송합니다. 처음에는 Search Banner와의 충돌인 줄 알았는데, Air 테마 배경 문제인 것 같습니다. Chat 플러그인이 흰색 중앙 열을 만들어서 파란 배경 위에 겹쳐 보이는 것 같습니다.

안녕하세요,

Discourse 채팅 플러그인을 활성화했을 때 Discourse 검색 배너가 공백으로 표시되는 문제를 발견했습니다.

테스트 통과

Air 테마를 사용 중입니다. 채팅 플러그인을 비활성화하면 문제가 발생하지 않습니다. 채팅을 활성화하면 위와 같은 문제가 나타납니다.

수정: 오해였습니다. 재확인한 결과 Air 테마의 배경색과 충돌/문제인 것으로 확인되었습니다. 파란색 부분이 잘려 나가거나 사라져 있습니다. 아래 게시글에서 채팅을 꺼두면 파란색 배경이 제대로 표시되고, Discourse 검색 배너가 파란색 배경 위에 흰색으로 정상적으로 겹쳐 표시됩니다.

Heliosurge님, 정확히 어떤 문제인지 잘 이해가 되지 않습니다(스크린샷에 빈 영역은 보입니다).

문제를 재현할 수 있도록 정확한 단계를 공유해 주시겠어요? :slight_smile:

1개의 좋아요

매우 단순한 문제였습니다. Air 테마에는 Discourse Search 배너가 전체 테마의 일부로 설치되어 있었습니다.

언급했듯이 테스트는 통과했습니다.

Chat 플러그인을 활성화하면 Discourse Search 배너의 Welcome 배너가 더 이상 Welcome 메시지를 표시하지 않습니다.

Chat 플러그인을 끄면 Welcome 배너가 표시됩니다.

Chat 플러그인 비활성화

이 스크린샷에서 헤더에서 Chat 플러그인 아이콘이 사라진 것을 볼 수 있습니다. 또한 Chat 플러그인이 배경에 미치는 다른 효과도 볼 수 있는데, 파란색 배경을 무시하고 하얀색 빈 사각형을 생성하는 것처럼 보입니다.

이제 살펴보면, 이는 Air 테마의 파란색 배경 이미지와 충돌하는 것일까요? 배너의 텍스트가 흰색이므로요. 그렇다면 Discourse Search 배너에 대한 제 추측이 잘못된 방향일 수 있습니다. Air 테마의 일부와의 충돌일 수도 있습니다… ??

확인했습니다. Air 테마의 배경과 충돌이 발생하는 것 같습니다. 죄송합니다. Discourse Search Banner와 Chat 플러그인만 미리보기로 시도해 보았습니다.

아래를 확인해 주세요.

잘못된 진단을 드려 죄송합니다. :facepalm:

Air 테마를 좀 더 자세히 살펴보니, 스크롤 시 중앙 열에서 배경의 파란색 부분이 차단되어 파란색이 가장자리에만 표시되는 것을 확인했습니다. 채팅을 비활성화하면 배경의 파란색 부분이 중앙을 지나 왼쪽에서 오른쪽으로 이어집니다.

대조

다시 한번 질문을 올립니다. 실제로 Air 테마의 배경에 중앙에 흰색 열이 있는 것 같습니다. 위의 사진들을 참고해 주세요.

팀에서 재현이 가능했는지 궁금합니다. Air 테마의 배경 문제로 한정 지었고, 검색 배너와는 무관한 문제라고 보고 있습니다.

Dan님, 안녕하세요.

Search Banner 플러그인 아웃렛이 기본적으로 above-main-container로 설정되어 있는 것 같습니다. Search Banner를 #main-outlet에서 분리하려면 이 설정을 변경해야 할 것 같습니다: :arrow_down_small:


그러나 이 테마는 #main-outlet에서 활성화될 때 채팅용 커스텀 스타일을 가지고 있으며, 이는 채팅 페이지에서만 활성화되어야 한다고 생각합니다.
이 스타일은 !important를 사용하여 #main-outlet에 배경색을 추가하므로, #main-outlet의 테마 배경 투명성 등을 덮어쓰고 있습니다…

채팅 페이지에서만 나타나도록 .has-full-page-chat으로 제한하는 것이 더 나을 것 같습니다.


above-main-container 설정 시: :arrow_down_small:

below-site-header 설정 시: :arrow_down_small:

3개의 좋아요

좋아요, 이제 메인 디스플레이가 수정되었습니다. 채팅을 수정하기 위한 코드는 무엇인가요? 이전 스크린샷에서 보았듯이, 카테고리에서 검색 배너 헤더 아래에 여전히 흰색 열이 남아 있습니다.

도움 주셔서 감사합니다.

1개의 좋아요

일부 카테고리에만 “카테고리 로고” 이미지를 추가하고 있습니다.

기대되는 동작: 카테고리에 로고 이미지를 추가하면 라벨의 크기가 다른 카테고리의 라벨과 동일하게 유지됩니다.

관찰된 동작: 카테고리에 로고 이미지를 추가하면 사각형이 로고 이미지가 없는 카테고리의 라벨 사각형보다 상대적으로 더 크게 보입니다. 같은 열에 있는 카테고리와 정렬되지 않을 뿐만 아니라, 로고 이미지가 있는 카테고리의 행이 로고 이미지가 없는 카테고리의 행보다 더 높게 표시됩니다.

이 문제는 모바일과 데스크톱 모두에서 발생합니다.

이를 어떻게 수정할 수 있을까요?

제 사이트에서도 그렇게 표시된다는 것을 확인할 수 있습니다. 이는 로고가 없는 카테고리가 로고가 있는 카테고리에 비해 매우 작은 설명 텍스트를 사용하기 때문인 것으로 보입니다.

CSS를 사용하여 로고가 없는 카테고리의 상자 크기를 로고가 있는 카테고리와 일치시킬 수 있을 것입니다.

확인해 주셔서 감사합니다. CSS는 저를 정말 괴롭힙니다. 제 아킬레스건이죠. CSS로 마진을 제대로 보이게 하려고 작업할 때만큼 생산성이 떨어질 때는 없었습니다.

1개의 좋아요

여전히 학습 중이시라는 말씀은 들었습니다. 하지만 저자나 팀 멤버가 CSS 코드 수정을 도와줄 수도 있다고 상상해 보세요.

방금 라이트/다크 모드 토글을 발견했습니다. 잘 작동하는 것 같습니다. 다만 페이지를 새로고침하면 디스코스가 라이트 테마 로고를 표시하는 것 같습니다. 이는 디스코스가 웹 브라우저가 다크 모드로 설정되어 있지 않다는 것을 감지하지 못해서인 것 같습니다.


이상하게도 스스로 고쳐진 것 같습니다. ㅋㅋ

방금 이걸로 전환했는데, 정말 깔끔하고 좋은 테마네요. 아주 마음에 들어요. 디자인하신 분께 정말 잘 만들었다고 말씀드리고 싶어요. 감사합니다.

2개의 좋아요

직접 메시지를 보내주실 수 있을까요? 링크를 공개적으로 공유하는 것이 편하지 않습니다. 도움을 주시려고 해주셔서 감사합니다! <3

Air Theme과 그 모든 플러그인을 삭제하고 다시 설치했습니다. 수정할 수 있는 모든 방법을 시도해 보았지만 여전히 해결되지 않습니다.

기본 테마 - 다른 옵션을 선택한 후 카테고리 드롭다운이 사라지지 않음 (모바일)

Air Theme - 다른 옵션을 선택한 후 카테고리 드롭다운이 사라짐. (모바일)

에어(Air) 테마를 사용할 때 모바일에서 “카테고리” 드롭다운이 사라지는 문제를 찾았습니다.

관련 게시물…

저장소의 코드 Common.scss 에는 다음과 같이 명시되어 있습니다…

.mobile-view {
  .cm-header-links {
    display: none;
  }
  .list-controls .nav-pills .drop li:first-of-type {
    display: none;
  }
}

코드를 다음과 같이 수정했습니다.

.mobile-view {
  .cm-header-links {
    display: none;
  }
  .list-controls .nav-pills .drop li:first-of-type {
    display: block;
  }
}

이제 다른 드롭다운 옵션을 선택한 후에도 카테고리 드롭다운이 사라지지 않습니다. :slight_smile:

2개의 좋아요

여러분 안녕하세요.

셀프 호스팅한 Discourse를 커스터마이징하려고 시도하고 있는데, 이 테마가 좋은 출발점이 될 것 같네요!

CSS에서 변경 사항(예: 배경색 변경)을 어떻게 하시나요?
기본 테마에는 있는 “Custom CSS/HTML” 섹션이 해당 테마를 선택했을 때 테마 페이지에 없기 때문입니다.

2개의 좋아요

안녕하세요,

  1. 포럼을 위한 새로운 테마 컴포넌트를 만들어 시작하세요.
  2. 원하는 테마에 새로 만든 컴포넌트를 포함하세요. (현재 사용 중인 테마나, 먼저 확인해 보기 위한 “dev” 테마)
  3. 컴포넌트 설정에서 CSS/HTML 편집 버튼을 찾으세요.
  4. 지평을 넓히세요! :fire:

4개의 좋아요

그렇군요.. 컴포넌트가 단순히 CSS 조정으로 끝날 수 있다는 건 생각도 못 했네요.

감사합니다.

3개의 좋아요

안녕하세요,
콘솔에 경고가 표시되고 있습니다:

deprecated.js:61 Deprecation notice: PluginOutlet arguments should now be passed using `@outletArgs=` instead of `@args=` (outlet: category-box-below-each-category) [deprecation id: discourse.plugin-outlet-args]
in 

테마 설정에서 무언가를 놓친 건가요?
확인해 보았지만, 아무것도 보이지 않습니다…

3개의 좋아요