# Versatile Banner

**URL:** https://meta.discourse.org/t/versatile-banner/109133
**Category:** Theme component
**Tags:** official, versatile-banner
**Created:** [2월 14, 2019, 10:05오전 UTC](https://meta.discourse.org/t/versatile-banner/109133 "2019-02-14T10:05:24Z")
**Posts on this page:** 20
**Page:** 3

<div class="post-metadata">

### Author: ![Tara\_Walton](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tara_walton/32/244402_2.png) [@Tara\_Walton](https://meta.discourse.org/u/Tara_Walton)
#### Post date: [1월 24, 2022, 5:49오후 UTC](https://meta.discourse.org/t/versatile-banner/109133/278 "2022-01-24T17:49:29Z")

</div>

제가 시도해 본 테마 토글에서도 같은 문제가 있었습니다. 검은 배경에 검은 글씨가 뜨는 상황이였어요!

지금은 문제가 너무 많아서 테마를 하나로만 남기는 걸 시도하고 있지만, 다른 해결책이 없다면 다시 검토해 볼 예정입니다.

팁 감사합니다!

---

<div class="post-metadata">

### Author: ![JimPas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jimpas/32/148179_2.png) [@JimPas](https://meta.discourse.org/u/JimPas)
#### Post date: [1월 25, 2022, 7:39오전 UTC](https://meta.discourse.org/t/versatile-banner/109133/279 "2022-01-25T07:39:01Z")

</div>

> [@Tara\_Walton](#):
>
> 놓치고 있는 설정이 있거나, 다른 방법으로 이 작업을 수행할 수 있는 방법이 있을까요?

호스팅 포럼을 사용 중이므로, 관리자 대시보드(Admin Dashboard)에서 '커스터마이즈(Customize)'로 이동하세요. '테마(Themes)'가 가장 먼저 보일 것입니다. 설치된 테마 목록을 아래로 스크롤하여 다크 테마(클래식(Dark Theme (Classic?))를 찾아보세요. 해당 테마를 클릭하여 설치 과정을 시작합니다.

다크 테마가 보이지 않으면 ‘브라우저(Browse)’ 버튼을 클릭하여 사용 가능한 테마를 확인하세요. 컬러 팔레트(Color palettes)를 사용하면 사용할 색상을 정의할 수 있습니다.

변경 사항을 모두 적용한 후 저장(Save) 버튼을 클릭하는 것을 잊지 마세요. 그러면 테마가 귀하와 사용자 모두에게 사용 가능해집니다.

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [1월 25, 2022, 10:12오전 UTC](https://meta.discourse.org/t/versatile-banner/109133/280 "2022-01-25T10:12:39Z")

</div>

> [@Tara\_Walton](#):
>
> 다크 모드와 라이트 모드(즉, 다른 색상 스킴과 다른 배경 이미지/색상)를 사용할 수 있으면 좋겠어요. 놓치고 있는 설정이 있거나, 이렇게 구현할 방법이 있을까요?

네, 다크/라이트 모드에 대한 기본적인 지원이 반드시 있어야 합니다. 추가하는 것이 그리 어렵지 않을 것입니다. 이번 주 안에 이 작업을 처리할 수 있도록 최선을 다하겠습니다.

---

<div class="post-metadata">

### Author: ![Tara\_Walton](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tara_walton/32/244402_2.png) [@Tara\_Walton](https://meta.discourse.org/u/Tara_Walton)
#### Post date: [1월 25, 2022, 1:58오후 UTC](https://meta.discourse.org/t/versatile-banner/109133/281 "2022-01-25T13:58:52Z")

</div>

정말 멋진데요! 정말 감사합니다 🙂

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [1월 29, 2022, 3:09오전 UTC](https://meta.discourse.org/t/versatile-banner/109133/283 "2022-01-29T03:09:06Z")

</div>

> [@Tara\_Walton](#):
>
> 정말 멋지네요! 정말 감사합니다 🙂

별거 아닙니다! 업데이트 시 현재 사용자의 배너가 방해받지 않도록 최선을 다하고 싶어서 예상보다 조금 더 까다로웠습니다. 다음 주 초에 테스트를 마무리하고 변경 사항을 배포해 보겠습니다. 시스템 설정을 전환하면서 Discourse의 자동 다크 모드와 함께 어떻게 작동하는지 미리 보여드릴게요.

> [@hokod](#):
>
> Versatile Banner를 게시물 콘텐츠 영역 위, 즉 클래스 위치에 어떻게 삽입하나요?

Versatile Banner로는 그것이 불가능합니다.

---

<div class="post-metadata">

### Author: ![IT\_Director](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/it_director/32/248612_2.png) [@IT\_Director](https://meta.discourse.org/u/IT_Director)
#### Post date: [2월 3, 2022, 8:14오전 UTC](https://meta.discourse.org/t/versatile-banner/109133/285 "2022-02-03T08:14:39Z")

</div>

정말 훌륭하고 다재다능한 배너를 만들어 주셔서 감사합니다!

전체적으로 아주 좋지만, 저희 배너가 자꾸 사라집니다.

재현 방법은 다음과 같습니다:

_첫 번째 경우: 배너가 사라지는 경우_

1. [https://forum.ic.org/에](https://forum.ic.org/%EC%97%90) 접속하여 상단의 배너를 확인합니다.
2. 아래로 스크롤한 후 특정 주제(topic)를 클릭합니다.
3. 왼쪽 상단의 포럼 로고를 클릭하여 시작 페이지로 돌아갑니다.
4. 시작 페이지에서 배너가 사라진 것을 확인합니다.

…배너가 사라지지 않았다면, 2단계와 3단계를 반복하여 주제 페이지와 시작 페이지를 오가며 시도해 보세요. 배너는 결국 항상 사라집니다.

_두 번째 경우: 배너가 사라지지 않는 경우_

1. [https://forum.ic.org/에](https://forum.ic.org/%EC%97%90) 접속하여 상단의 배너를 확인합니다.
2. ‘태그 보기’ 링크를 클릭합니다.
3. 왼쪽 상단의 포럼 로고를 클릭하여 시작 페이지로 돌아갑니다.
4. 배너가 여전히 표시되는 것을 확인합니다.

쿠키와 관련이 있을까요?

아래는 저희 설정입니다:

 ![Screenshot 2022-02-03 at 08.55.48](https://global.discourse-cdn.com/meta/original/3X/9/a/9af5fa606d9c0743c5b3a533c7f286183675f962.png)  
 ![Screenshot 2022-02-03 at 08.56.03](https://global.discourse-cdn.com/meta/original/3X/f/b/fbc09548ad707a9fea492b306c6ead4e95596ee6.png)

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [2월 11, 2022, 5:14오전 UTC](https://meta.discourse.org/t/versatile-banner/109133/286 "2022-02-11T05:14:25Z")

</div>

여기서 늦게 답장드려서 정말 죄송합니다. 바쁜 나날이었어요 😅 다음 주에 다크 모드 지원을 마무리하고 Osa님의 이슈를 살펴볼 수 있기를 정말 기대하고 있습니다. 기다려 주셔서 감사합니다!

---

<div class="post-metadata">

### Author: ![Bryanpwo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bryanpwo/32/238284_2.png) [@Bryanpwo](https://meta.discourse.org/u/Bryanpwo)
#### Post date: [2월 12, 2022, 10:13오후 UTC](https://meta.discourse.org/t/versatile-banner/109133/287 "2022-02-12T22:13:44Z")

</div>

안녕하세요, versatile banner 플러그인을 설치했는데 정말 마음에 듭니다. 로그인한 사용자가 배너를 닫은 후 다시 나타나지 않도록 하는 우회 방법이 있을까요?

사용자가 하나의 탭에서 작업 중일 때는 다시 나타나지 않지만, 저희 사용자 중 다수가 여러 탭을 동시에 사용하는 데 익숙해서, 모든 탭에 배너가 다시 나타납니다.

가장 이상적인 방식은 첫 로그인 시에만 배너가 표시되고, 사용자가 배너를 닫으면 로그아웃 후 다시 로그인할 때까지 표시되지 않는 것입니다. 전역 배너로 고정된 게시글처럼 작동하면 좋겠습니다.

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [2월 12, 2022, 11:48오후 UTC](https://meta.discourse.org/t/versatile-banner/109133/288 "2022-02-12T23:48:16Z")

</div>

상태는 Discourse 코어가 아니라 쿠키에 저장된다고 생각합니다. 탭을 닫은 후 새 탭을 열면 닫힌 상태로 유지될 것 같습니다. 닫은 후 다른 탭을 새로고침하면 닫힌 상태로 유지될 것이라고 추측합니다.

하지만 제가 틀렸을 수도 있습니다.

---

<div class="post-metadata">

### Author: ![JimPas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jimpas/32/148179_2.png) [@JimPas](https://meta.discourse.org/u/JimPas)
#### Post date: [2월 13, 2022, 1:26오전 UTC](https://meta.discourse.org/t/versatile-banner/109133/289 "2022-02-13T01:26:39Z")

</div>

> [@pfaffman](#):
>
> 다른 탭을 닫은 후 다시 로드하면 닫힐 것 같습니다.

네, 다른 탭을 새로고침하면 해당 탭의 배너가 닫히게 됩니다.

---

<div class="post-metadata">

### Author: ![Bryanpwo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bryanpwo/32/238284_2.png) [@Bryanpwo](https://meta.discourse.org/u/Bryanpwo)
#### Post date: [2월 13, 2022, 9:55오전 UTC](https://meta.discourse.org/t/versatile-banner/109133/290 "2022-02-13T09:55:09Z")

</div>

@pfaffman @JimPas

답변해 주셔서 감사합니다.

말씀하신 대로, 페이지를 새로고침하면 배너가 닫히긴 합니다. 하지만 문제는 배너가 홈페이지뿐만 아니라 사용자가 여는 모든 페이지, 즉 게시글과 개인 메시지에서도 나타난다는 점입니다.  
대부분의 사용자가 홈페이지에서 게시글이나 개인 메시지를 새 탭으로 여는 경우가 많기 때문에, 배너가 매우 끈질기게 계속 표시될 수 있습니다.

일단 지금은 비활성화해 두었지만, 추후에 이 부분이 개선되기를 바랍니다. 이 기능을 통해 신규 회원들의 주의를 끌고, 포럼을 더 쉽게 탐색할 수 있도록 하고 싶습니다.

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [2월 13, 2022, 11:05오전 UTC](https://meta.discourse.org/t/versatile-banner/109133/291 "2022-02-13T11:05:21Z")

</div>

로그인한 사용자에게만 비활성화할 수 있습니다.

하지만 홈페이지 설정을 켜고, 필수 문자열 설정에 "banana pants"를 포함하여 어떤 URL에도 매칭되지 않도록 하면 홈페이지에서만 작동하게 됩니다. 저는 방금 내 포럼에서 이렇게 설정했습니다.

---

<div class="post-metadata">

### Author: ![Bryanpwo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bryanpwo/32/238284_2.png) [@Bryanpwo](https://meta.discourse.org/u/Bryanpwo)
#### Post date: [2월 14, 2022, 12:52오후 UTC](https://meta.discourse.org/t/versatile-banner/109133/292 "2022-02-14T12:52:28Z")

</div>

팁 감사합니다! 그 방법을 시도해 보겠습니다.

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [2월 16, 2022, 3:36오전 UTC](https://meta.discourse.org/t/versatile-banner/109133/293 "2022-02-16T03:36:58Z")

</div>

> [@Tara\_Walton](#):
>
> 정말 놀랍네요!

@Tara_Walton 님, 다크 모드 지원이 다음과 같이 추가되었습니다!

> <https://github.com/discourse/discourse-versatile-banner/pull/12>
>
> This change adds several new settings to facilitate dark mode support.
> 
> If any… of the setting do not take when they are first saved, add a space to the end, save the change, remove the space and save again to give it an extra push.

컴포넌트를 업데이트해 보시고 의견을 말씀해 주세요.

⚠ 테스트 중 테마 설정을 변경할 때 이상한 문제가 발견되었습니다. 브라우저인지 디스코urse 캐시 때문인지는 바로 알 수 없지만, 설정을 처음 변경했을 때 반영되지 않는 경우라면 설정 끝에 공백을 추가한 후 저장하고, 다시 공백을 제거한 후 저장해 보세요. 또한 변경 사항을 확인하려면 페이지를 강제로 새로고침해야 합니다.

업데이트 시 오류가 발생하는 경우, 메인 테마에서 컴포넌트를 추가/제거하면 문제가 해결될 수 있습니다. 나중에 조사해야 할 몇 가지 작은 테마 관련 특이 사항이 있는 것으로 보입니다.

* * *

> [@IT\_Director](#):
>
> 대부분은 훌륭하지만, 우리의 배너가 계속 사라집니다.

@IT_Director 님, 여기 무슨 일이 일어나고 있는지 파악할 수 있을 것 같습니다.

테마 어딘가에 다음과 같은 CSS 규칙을 추가해 두셨네요:

```css
[class*="category-"] .banner-themes {
  display: none;
}

```

추천된 주제 중 하나를 클릭한 후 홈 페이지로 돌아갈 때, 주제 방문 시 추가되었던 `category-` 클래스가 `body` 요소에서 제거되지 않는 것처럼 보입니다. 이는 [Homepage Feature](https://meta.discourse.org/t/homepage-feature-component/144264) 컴포넌트와 관련되어 라우팅 어딘가에 발생하는 작은 버그일 수 있습니다.

해당 CSS 규칙을 제거하고 대신 `url must contain` 테마 설정을 활용해 보실 수 있을까요? `/c/*` 및 `/t/*` 항목을 제거하면 유사한 효과를 내면서 순수 CSS보다 상황을 조금 더 잘 처리할 수 있을 것 같습니다.

---

<div class="post-metadata">

### Author: ![Tara\_Walton](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tara_walton/32/244402_2.png) [@Tara\_Walton](https://meta.discourse.org/u/Tara_Walton)
#### Post date: [2월 16, 2022, 3:43오후 UTC](https://meta.discourse.org/t/versatile-banner/109133/294 "2022-02-16T15:43:23Z")

</div>

@tshenry 이게 제가 원했던 모든 것입니다!  
제안을 받아들이고 실제로 구현해 주셔서 감사합니다. 이제 라이트 모드와 다크 모드를 전환할 때, 다크 모드에서 라이트 배너가 눈부시지 않게 되어 정말 마음에 듭니다 😃

> [@tshenry](#):
>
> ⚠ 이 기능을 테스트하면서 테마 설정을 변경할 때 이상한 현상이 있을 수 있음을 발견했습니다. 브라우저 문제인지 디스코urs 캐시 문제인지는 바로 확신할 수 없으나, 설정을 처음 변경했을 때 적용되지 않는다면 설정 끝에 공백을 추가하고 저장한 뒤, 다시 공백을 제거하고 저장해 보세요. 또한 변경 사항을 확인하려면 페이지를 강제 새로고침해야 합니다.

큰 문제는 없었습니다. 브라우저 캐시를 지워야 했지만, 제가 하는 대부분의 변경 사항에서 그런 경우가 있어 대개 정상적인 절차라고 생각합니다.

다시 한번 수고 많으셨습니다!

---

<div class="post-metadata">

### Author: ![Richie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richie/32/115110_2.png) [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [2월 17, 2022, 4:55오후 UTC](https://meta.discourse.org/t/versatile-banner/109133/295 "2022-02-17T16:55:59Z")

</div>

> [@tshenry](#):
>
> 컴포넌트를 업데이트해 보시고 의견을 알려주세요.

저희 중 몇몇은 @tshenry 님과 관련하여 몇 가지 문제를 겪고 있습니다 😕

@craigconstantine 님이 GitHub에 문제를 보고했습니다.

[https://github.com/tshenry/discourse-versatile-banner/issues/13](https://github.com/tshenry/discourse-versatile-banner/issues/13)

---

<div class="post-metadata">

### Author: ![craigconstantine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/craigconstantine/32/511195_2.png) [@craigconstantine](https://meta.discourse.org/u/craigconstantine)
#### Post date: [2월 17, 2022, 5:11오후 UTC](https://meta.discourse.org/t/versatile-banner/109133/296 "2022-02-17T17:11:17Z")

</div>

@tshenry 님이 내 discourse 설치 환경 중 하나(discourse.org에서 호스팅되는 것)에 [설명해 주셨지만, 이해하기 어려웠던] 작업을 하셔서, 해당 설치 환경에서는 현재 에러가 사라진 것을 확인했습니다…

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [2월 17, 2022, 8:19오후 UTC](https://meta.discourse.org/t/versatile-banner/109133/297 "2022-02-17T20:19:26Z")

</div>

> [@Richie](#):
>
> 우리 중 몇 명이 일부 문제를 겪고 있습니다.

핵심 Discourse에 버그가 있어 SASS 사이트 설정 변수를 잘못 해석하고 있습니다. 어떤 이유에서인지 변수 이름에 밑줄(\_) 대신 대시(-)가 있는 것으로 인식하고 있습니다. 이 문제를 수정하기 위해 노력하고 있습니다.

그동안 테마 설정을 변경하면 오류가 _해결될_ 것입니다. 예를 들어, `column content` 테마 설정 중 하나에 공백을 추가하고 저장한 후, 그 공백을 다시 제거하고 저장했습니다.

이렇게 시도한 후에도 여전히 작동하지 않는 부분이 있는지 알려주세요.

---

<div class="post-metadata">

### Author: ![Richie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richie/32/115110_2.png) [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [2월 18, 2022, 6:42오전 UTC](https://meta.discourse.org/t/versatile-banner/109133/298 "2022-02-18T06:42:53Z")

</div>

최신 버전보다 약 일주일 정도 뒤처져 있었는데, 오늘 아침에 Discourse를 업데이트했더니 경고가 사라졌습니다 🤔

---

<div class="post-metadata">

### Author: ![Andro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andro/32/173721_2.png) [@Andro](https://meta.discourse.org/u/Andro)
#### Post date: [2월 19, 2022, 9:55오후 UTC](https://meta.discourse.org/t/versatile-banner/109133/299 "2022-02-19T21:55:04Z")

</div>

Versatile Banner에서 이렇게 나와요:

> 배너의 내용을 HTML로 커스터마이징할 수 있습니다. 커스텀 내용을 CSS로 스타일링하려면 별도의 테마 컴포넌트를 만들어야 합니다.

여기에 CSS를 추가하려면 어떤 작업을 해야 하는지 설명해 주시거나 관련 자료를 공유해 주실 수 있나요?

[이전 페이지](https://meta.discourse.org/t/versatile-banner/109133.md?page=2)

[다음 페이지](https://meta.discourse.org/t/versatile-banner/109133.md?page=4)
