놀라웠던 점은 Meta에서 “Fully” 테마를 선택한 후 처음 그렇게 해보았을 때, try.discourse.org의 토픽이 Fully 테마로 표시되었다는 것입니다. 이는 동일한 도메인에 있는 사이트와 관련된 캐싱 문제라고 추측하고 있습니다.
말씀하시는 문제는 try.discourse.org에서 햄버거 메뉴를 클릭할 때 Discourse 로고가 작은 로고로 대체되지 않는다는 것이 맞나요?
놀라웠던 점은 Meta에서 “Fully” 테마를 선택한 후 처음 그렇게 해보았을 때, try.discourse.org의 토픽이 Fully 테마로 표시되었다는 것입니다. 이는 동일한 도메인에 있는 사이트와 관련된 캐싱 문제라고 추측하고 있습니다.
말씀하시는 문제는 try.discourse.org에서 햄버거 메뉴를 클릭할 때 Discourse 로고가 작은 로고로 대체되지 않는다는 것이 맞나요?
음 – try.discourse.org 사이트의 내비게이션 패널에는 메뉴 링크가 포함된 추가 div(.try-header-nav-wrapper)가 있는데, 사이드 메뉴가 숨겨졌을 때 헤더를 오른쪽으로 크게 밀어내어 페이지 레이아웃을 깨뜨리고 있습니다(해당 사이트에서만 발생하는 문제). 그래서 이제 이것이 Fully 테마의 버그가 아님을 알게 되었습니다.
좋은 아침입니다!
이 테마를 포럼에 사용하는 것을 정말 즐기고 있지만, 기본 테마와 마찬가지로 CSS/HTML을 사용자 지정할 수 있는 옵션이 없는 것 같네요. 테마에 배경 이미지를 추가하고 싶은데, 이게 가능한가요?
커스터마이징 테마 / 테마 컴포넌트 메뉴를 사용하여 새 테마 컴포넌트를 생성하고 이 테마에 추가하면 됩니다.
테마 컴포넌트에서 배경을 추가하기 위한 사용자 정의 코드를 추가할 수 있습니다.
안녕하세요, @jordan.vidrine.
답변 주셔서 감사합니다. "배경 변경"을 검색할 때 어딘가에서 이 내용을 본 것 같은데, 테마의 CSS/HTML을 커스터마이징할 때만 가능한 줄 알았습니다.
한번 시도해 보겠습니다!
여러분 안녕하세요! 이 테마를 정말 좋아합니다! 그런데 제 사이트에서 미리 보기를 해보았을 때 사이드바 내비게이션 헤더에 문제가 있었어요. 헤더만 다른 색상(사이트의 일반 헤더 색상)으로 사용할 수 있을까요?
이렇게:

이런 게 아니라:

어떻게 하면 될까요? CSS를 수정하니 전체 내비게이션이 초록색이 되었어요.
감사합니다!
—sidebar-color)의 특정 변수를 변경하면 사이드바와 그 위 영역이 변경됩니다.
음, 사이드바 헤더만 변경할 방법이 없나요?
저도 비슷한 문제를 겪고 있습니다. 헤더 로고가 서로 다른 두 가지 색 위에 걸쳐 있어서 보기 이상합니다.
요즘에는 테마에서 CSS를 직접 편집하는 것을 권장하지 않는다고 들었는데, 원격 테마에서는 CSS 편집기 옵션이 제거되었기 때문에 이 변수를 어떻게 변경해야 하나요? 또한 이는 사이드바 색상이 헤더와 동일해야 한다는 전제에 기반하고 있습니다.
안녕하세요, 해당 섹션을 사이드바와 별도로 CSS로 변경할 수 있습니다.
이를 위해 새 컴포넌트를 생성하거나 기존 컴포넌트에 추가해야 합니다. ![]()
/admin/customize/themes/로 이동하세요.
커스터마이즈 → 테마
컴포넌트 탭을 클릭한 다음 설치 버튼을 클릭하세요.
팝업 창에서 새로 만들기 버튼을 클릭하고 새 컴포넌트 이름을 입력하세요.
생성 버튼을 클릭하세요.
컴포넌트가 생성되었습니다. 이제 활성화하려면 Fully 테마를 선택하세요.
CSS/HTML 편집 버튼을 클릭하세요.
아래 코드를 CSS 섹션에 붙여넣으세요.
하단의 저장 버튼으로 저장하는 것을 잊지 마세요.
.desktop-view .has-sidebar-page .d-header-wrap::before {
background: transparent;
border-right: none;
}
오른쪽 경계를 유지하려면 코드에서 해당 줄을 삭제하세요.
Don, 감사합니다. 그런데 저는 이전에 Discourse CSS를 수정해 본 적이 없는데요… 이 변경사항을 어디서 해야 할까요?
위쪽 게시물을 업데이트했습니다. ![]()
감사합니다. 방금 완료했는데 모든 것이 다시 정상적으로 보입니다 ![]()
현재 테마에서는 이 작업을 수행할 수 있는 오른쪽 여백이 매우 좁습니다. 그 공간을 더 넓혀 위젯으로 활용하면 좋겠다는 생각이 듭니다.
사용자들에게 테마에 대한 접근 권한을 부여했는데, 곧바로 뭔가 이상한 점을 발견했습니다 ![]()
저는 Custom Header Links 테마 컴포넌트를 사용 중이며, 함께 사용하는 다른 테마(Material Design)에서는 브라우저 창 너비를 줄여 링크가 사이트 로고와 겹치기 시작하는 지점에 도달하면 로고가 축소되어 결국 아주 작아집니다. 예를 들어 다음과 같습니다.

하지만 Fully 테마에서는 로고가 축소되지 않아 결국 다음과 같은 상황이 발생합니다…

Custom Header Links는 토픽을 볼 때 링크를 제거하고 토픽 제목을 표시합니다. 브라우저 폭이 좁아지면 토픽 제목도 로고와 겹치지만, 결국 로고가 완전히 제거되어 문제가 해결됩니다.
이것이 Fully 테마의 문제인지 Custom Header Links의 문제인지는 확실하지 않지만, CHL은 다른 테마에서는 정상적으로 작동하므로 여기에서 질문을 시작합니다.
discourse-full-width-component와 더 넓은 로고 사이에 약간의 충돌이 있는 것 같습니다.
를 사용하여 간단하게 수정할 수 있습니다.
이전 코드 뒤에, 모든 코드를 한 곳에 모으기 위해 이전에 생성한 컴포넌트에 아래 코드를 붙여넣으세요.
이렇게 하면 로고가 축소됩니다.
.desktop-view .d-header .title a {
flex: auto;
}
업데이트: 음, 사이드바가 숨겨진 상태에서 너무 많이 축소되는 것 같습니다…
잠시 살펴봤는데 그리드와 관련된 문제인 것 같습니다. 하지만 그리드를 변경하여 헤더 UX를 깨뜨리고 싶지 않으므로, 공식적인 해결 방식이 나올 때까지 기다리는 것이 더 나은 것 같습니다.
@packman 이 코드를 제거해 주세요.
다시 한번 감사합니다! 오늘 정말 좋은 일을 하고 계시네요 ![]()
Don 씨, 다른 문제가 하나 있어요. 이렇게 변경하면 다크 모드에서도 똑같이 보여요. 특정 컬러 스킴에만 CSS를 적용하려면 어떻게 해야 하나요?
좁은 창에서 로고가 아주 작아지긴 하지만, Material Design 테마와 함께 Custom Header Links를 사용할 때도 같은 문제가 발생합니다.
조금 전 CSS를 살펴봤는데, 로고가 span.header-sidebar-toggle 안에 포함되어 있는 것이 도움이 되지 않을 것 같습니다. 물론 더 넓은 화면에서 로고를 배치할 수 있는 합리적인 위치가 그곳뿐이라면 또 모를까요?
안녕하세요 @Renato_Mendes ![]()
아, 알겠습니다. 특정 색상 스키마에서만 투명한 배경을 사용하고 싶으셨군요. 그걸 몰랐네요.
다음과 같은 여러 가지 방법이 있습니다 ![]()
dark-light-choose(): 이 함수를 사용하면 가능하지만, 변수를 생성하기 때문에 이 경우에는 실용적이지 않습니다. 색상 설정에 사용하는 것이 더 좋습니다.schemeType: 스키마 유형별로 사용하려면 이 방법이 이 사용 사례에 더 적합합니다.schemeType 사용 방법은 다음과 같습니다.
만든 컴포넌트에서 이전 코드를 삭제하고, 이미지에서 보는 것처럼 Color Definitions 섹션에 새 코드를 배치하세요.
이렇게 하면 라이트 스키마에서만 코드가 활성화됩니다.
Common / Color Definitions
@if #{schemeType()} == light {
.desktop-view {
.has-sidebar-page {
.d-header-wrap {
&:before {
background: transparent;
border-right: none;
}
}
}
}
}
이 컴포넌트는 실제 색상 스키마를 html 태그에 추가하여 CSS로 지정할 수 있게 합니다.
사용 방법은 다음과 같습니다:
컴포넌트를 설치하세요.
변경하려는 색상 스키마의 id를 확인하세요.
여기에서 찾을 수 있습니다.
또는
/admin/customize/colors
Colors 페이지에서 색상 스키마를 클릭하면 id가 URL에 추가됩니다.
이제 코드에서 이를 사용할 수 있습니다. 이전에 추가한 코드를 제거하는 것을 잊지 마세요.
html[color-scheme="your-color-scheme-id"] {
&.desktop-view {
.has-sidebar-page {
.d-header-wrap {
&:before {
background: transparent;
border-right: none;
}
}
}
}
}
안녕하세요 @packman
DM을 보냈습니다.