Versatile Banner

Discourse · 2월 14, 2019, 10:05오전


	Summary	Versatile Banner adds a customizable banner to your site.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-versatile-banner
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

Features

This theme component is an evolution of previous banner efforts. The goal is to provide more ease and flexibility through the use of theme settings.

Below is a highlight of the features:

Limit display to logged-in users or anonymous users
Limit display to be exclusively mobile or desktop
Limit display to specific pages
Dismissible, expandable, and always visible options
Full browser width option
Color management
Heading and column customization using HTML (see below for more)
Persistent state option (see below for more)

Customizing your banner’s content

Banner content is broken up into the main heading and columns. You can have up to 5 columns on your banner, however, the recommended number is 3 or fewer due to width limitations. HTML templates are provided and can be customized to meet your individual needs. You can also control each column’s width and add whatever image or font awesome icon you want to the top of each column.

Using the persistent state option

The persistent state option will rely on up to two cookies. These cookies will contain a name for the banner and a true/false value that relates to the banner’s state. If you have any concerns with using cookies on your site, it’s best to avoid using this setting. Choosing a relative time option for the cookie_lifespan setting will make sure the banner remains closed/expanded/collapsed for that amount of time after the user presses the appropriate button. Without this setting, the banner resets with every full page load. If you make a change to the banner and want to ensure that all users see those changes, even those that had previously closed the banner, be sure to change the “cookie name.” It will essentially reset any persistent state, then allow user to close the banner once more

Settings

Name	Description
show for members	Display the banner for users logged into the forum
show for anon	Display the banner for anonymous users
display on mobile	Display the banner on mobile devices
display on desktop	Display the banner on desktop computers
display on homepage	Display the banner on the homepage
url must contain	Enter paths that should display the banner. Add `*` to the end of the path as a wildcard
dismissible	Allow the banner to be closed by users
collapsible	Allow the banner to be expanded and collapsed by users
default collapsed state	Default collapsed state when collapsible setting is enabled
cookie lifespan	The lifespan of the cookie used to remember if the banner has been closed, expanded, or collapsed. If set to “none”, NO cookies will be used with this component, and any previously created cookies related to the banner will be deleted the next time a user performs a full page load. The values are measured as a single unit, so setting “year” will be one year, “week” will be one week, etc.
cookie name	When important changes are made to the banner, you must change the cookie name to ensure all your users see the changes.
full width banner	Display the banner at full browser width
swap default positioning	If there is another banner-related component active, use this to swap its position with the Versatile Banner
plugin outlet	below-site-header puts it above the sidebar, above-main-container puts it above the content to the side of the sidebar
banner background image	The source url for your background image. Tip: You can upload an image to your main theme and use the url from that, but make sure that you do not use “Uploads” section of this component. Any uploads added to this component will be deleted whenever it is updated.
banner background image dark	The source url for your background image when system dark mode is detected.
background color	Used in place of a background image
background color dark	Used in place of a background image when system dark mode is detected.
primary text color	The main text color of the banner
primary text color dark	The main text color of the banner when system dark mode is detected
secondary text color	The text color of the icon and text headings, and the button background color.
secondary text color dark	The text color of the icon and text headings, and the button background color when system dark mode is detected.
link text color	The text color of links within the banner
link text color dark	The text color of links within the banner when system dark mode is detected.

Translation	Default
close.title	Close the banner
close.label	Close
toggle.title	Expand/Collapse the banner
toggle.collapse_label	Collapse
toggle.expand_label	Expand

Hosted by us? Theme components are available to use on our Pro, Business and Enterprise plans.

Last edited by @darkpixlz 2026-06-04T17:37:33Z

Check document
Perform check on document:

Dhruvi_Butti · 1월 19, 2021, 7:09오전

여러분 안녕하세요! 모든 텍스트를 왼쪽 정렬로 만들고 싶은데, CSS 테마가 제게는 작동하지 않아요. 정확히 어떻게 해야 하는지 알려주실 수 있나요?

tshenry · 1월 19, 2021, 7:04오후

원하시는 방향이 이런 것인가요?

그렇다면, 아래는 시작할 수 있도록 도와줄 빠르고 간단한 CSS입니다:

.banner-box {
  h1,
  h2,
  h3,
  .row .single-box {
    text-align: left;
    & .banner-list {
      display: block;
      ul {
        margin: 0 0 9px 25px;
      }
    }
  }

  .section-header {
    .x-title {
      padding: 25px 15px;
    }
    .description p {
      text-align: left;
    }
  }
}

"Versatile Banner Customizations"라는 이름의 새 컴포넌트를 생성하고, 위의 CSS를 Common 섹션에 추가해야 합니다. 커스터마이징이 적용되도록 Versatile Banner를 사용하는 모든 활성 테마에 새 컴포넌트를 추가했는지 확인하세요.

Dhruvi_Butti · 1월 20, 2021, 12:57오후

저에게는 잘 작동했습니다. 정말 감사합니다.

charlie788 · 2월 11, 2021, 8:33오후

안녕하세요,

배경 이미지를 클릭 가능한 이미지로 변환할 수 있을까요?

답변 주셔서 감사합니다.

SidV · 2월 16, 2021, 2:36오전

예시를 하나 주실 수 있을까요?
왜 그렇게 하려는 건가요?
즉… 배경 이미지 전체가 링크가 되는 건가요?
사용자가 배너의 어디를 클릭하든 해당 링크로 리디렉션된다는 뜻인가요.
사용 사례를 상상이 잘 안 됩니다.

Astra · 2월 16, 2021, 3:38오후

배너의 높이를 어떻게 조정하나요?

LeCoyote · 2월 16, 2021, 10:34오후

안녕하세요 @tshenry. 저는 Versatile Banner 테마 컴포넌트를 사용 중인데, “데스크톱에 표시” 옵션의 체크를 해제하면 배너가 사라집니다.
실제로 저는 배너를 모바일에서만 표시하고 싶습니다.

하지만 “데스크톱에 표시” 옵션의 체크를 해제하면… 데스크톱과 모바일 모두에서 Versatile Banner가 사라집니다.
확인해 보시려면 사이트입니다: https://hec.fm

무엇을 놓친 걸까요?

Astra · 2월 17, 2021, 9:56오전

모바일에서도 링크를 가로로 표시할 수 있을까요? 가로로 나란히 배치되는 대신 세로로 정렬되어 있는 것을 보고 조금 놀랐습니다.

tshenry · 2월 23, 2021, 2:37오전

이 문제를 보고해 주셔서 감사합니다! 늦게 답변드려 죄송합니다. 말씀하신 내용을 재현해 볼 수 있습니다. 어떤 문제가 발생하는지 꽤 정확하게 파악하고 있습니다. 이번 주 후반에 확인해서 다시 알려드리겠습니다.

배너 높이는 주로 콘텐츠에 따라 결정되지만, 필요한 경우 사용자 정의 CSS로 자유롭게 조정할 수 있습니다. 모바일에서 3열을 가로로 잘 배치할 수 있을지는 확신할 수 없지만, 사용자 정의 CSS를 사용해 시도해 볼 수는 있습니다! 몇 가지 팁을 확인하려면 Making custom CSS changes on your site 을 참고해 보세요.

MrDavis97 · 2월 24, 2021, 2:33오전

사이트에서 배너의 확장/축소 상태를 유지하는 쿠키 수명 관련 버그가 있는 것 같습니다. 원하는 동작은 사용자가 배너를 축소하거나 확장했을 때 사이트가 이를 기억하고, 어떤 상황에서도 그 상태를 그대로 유지하는 것입니다. 홈 페이지에 머물러 있거나 토픽을 클릭할 때는 기대한 대로 잘 작동합니다. 하지만, 관리자 패널, 사용자 설정, FAQ, 소개, 이용약관, 개인정보 처리방침, 문서 페이지로 이동했다가 홈 페이지로 돌아오면 상황이 이상해집니다. 때로는 배너가 설정했던 상태와 반대로 표시되고, 때로는 축소/확장을 나타내는 체브론 아이콘 방향마저 잘못 표시됩니다.

여기서 체브론 아이콘은 위를 가리키고 있습니다:

하지만 문서 페이지로 클릭했다가 홈 페이지로 돌아오면 체브론 아이콘이 반대 방향으로 표시됩니다.

이건 꽤 이상한 동작인 것 같습니다…

augustinecicc · 3월 28, 2021, 10:54오후

방금 우리 포럼(비공개 포럼)의 로그인 페이지에 예전처럼 'Versatile Banner’가 표시되지 않는다는 것을 발견했습니다.

컴포넌트 설정에서 '익명 사용자에게 배너 표시’가 체크되어 있습니다.

HTML을 확인해 보니 ‘emberX’ 클래스가 있는 여러 div가 중첩된 구조 안에 ‘banner-box’ 클래스의 div가 있지만, 로그인한 사용자의 HTML과 달리 ‘banner-box’ 클래스의 div 내부에는 아무 내용도 없습니다.

무엇이 문제일 수 있는지 아이디어가 있으신가요?

tshenry · 3월 30, 2021, 2:06오전

컴포넌트에 작은 업데이트를 적용했습니다.

위 업데이트로 수정되어야 합니다. 수정이 이렇게 오래 걸린 점 진심으로 사과드립니다. 보고해 주셔서 다시 한번 감사합니다!

url must contain(URL에 포함) 테마 설정에 /login을 추가해야 합니다. 자세한 내용은 이 게시물을 참고하세요.

과거에 한두 번 보고된 적이 있습니다. 불행히도 저는 아직 재현해 본 적이 없습니다. 기회가 되면 정확히 같은 단계를 따라 다시 시도해 보고 운이 좋으면 재현해 보겠습니다.

Dimitri_Nightmare · 4월 2, 2021, 7:36오전

저는 versatile banner를 사용 중이며, 배너를 다른 웹사이트로 리디렉션되는 거대한 링크로 변경하려고 하고 있습니다.
어떻게 하면 될까요?

다음과 같은 스크립트로 변경을 시도해 보았습니다: ‘“api.changeWidgetSetting(‘banner-content-widget’, ‘href’, '<사이트_주소>”’ 하지만 그 후 versatile banner가 작동하지 않습니다.

augustinecicc · 4월 2, 2021, 8:42오후

감사합니다, 정말 좋습니다. 이제 완벽하게 작동합니다!

tshenry · 4월 2, 2021, 9:49오후

다음과 같은 방식으로 처리할 수 있습니다:

<script type="text/discourse-plugin" version="0.10.0">
  // Add the link to the heading
  api.reopenWidget("banner-box-widget", {
    html(attrs) {
      let bannerBox = this._super();
      bannerBox[0].children[1].tagName = "A";
      bannerBox[0].children[1].properties.href = "https://meta.discourse.org";
      return bannerBox;
    }
  });
  
  // Add the link to the rest of the content
  api.reopenWidget("banner-content-widget", {
    html(attrs) {
      let bannerContent = this._super();
      bannerContent.tagName = "A";
      bannerContent.properties.href = "https://meta.discourse.org";
      return bannerContent;
    }
  });
</script>

그리고 링크 색상을 조정하기 위해 CSS 규칙을 추가하세요.

.banner-box a {
    color: var(--primary);
}

Versatile Banner 플러그인이 제공하는 특정 기능이 꼭 필요하지 않다면, 새 컴포넌트에서 간단한 HTML 배너를 직접 만드는 것이 더 나을 수 있다고 생각합니다. 대략적인 예시:

공용(Common) “After Header” 섹션에 다음을 추가하세요:

<a href="https://meta.discourse.org">
  <div class="custom-banner">
    <h2>This is a customer banner!</h2>
  </div>
</a>

그리고 공용(Common) “CSS” 섹션에 다음을 추가하세요:

 .custom-banner {
   display: flex;
   justify-content: center;
   align-items: center;
   width: $large-width; // 1110px
   height: 200px;
   margin-bottom: 15px;
   background: grey;
   color: white;
 }

이렇게 하면 완전히 클릭 가능한 간단한 배너를 만들 수 있습니다:

mercury233 · 5월 11, 2021, 12:41오전

이 컴포넌트를 git에서 설치했는데, 최신 코드를 가져오지 못한 것 같습니다. FIX: Work with new sticky header and move away from deprecated $.cookie · discourse/discourse-versatile-banner@0939120 · GitHub 커밋이 제 사이트 https://ygobbs.com/에 반영되지 않았습니다.

tshenry · 5월 11, 2021, 2:36오전

이는 현재 2.6.0.beta2 버전의 Discourse를 사용하고 있기 때문입니다. 링크하신 커밋은 2.6.0.beta3 이상을 요구합니다. 링크하신 커밋에는 discourse-compatibility 파일이 추가되었음을 확인할 수 있으며, 이는 현재 Discourse 버전과 호환되지 않는 커밋으로 업데이트되는 것을 방지하기 위한 것입니다.

mercury233 · 5월 11, 2021, 2:45오전

와, 정말 놀랍네요. 컴포넌트 설치를 막아주는 대신 Discourse가 저에게 더 오래된 버전을 찾아주다니요. 감사합니다!

gassim · 6월 29, 2021, 9:53오전

안녕하세요 @tshenry

각 카테고리에 서로 다른 배너를 표시하기 위해 해당 컴포넌트를 여러 번 설치하고 싶습니다. 그래서 홈 페이지 표시를 비활성화하고 URL에 특정 문자열이 포함되어야 하는 옵션을 사용했는데, 이렇게 하면 홈 페이지에서만 표시하기 위해 사용하는 메인 컴포넌트의 동작이 멈추게 됩니다. 다른 해결 방법을 제시해 주시거나, 이것이 버그인지 알려 주실 수 있을까요? 감사합니다!

글		댓글	조회수
Welcome Link Banner Theme component official , welcome-link-banner	39	16756	7월 9, 2025
Category Banners Theme component official , category-banners	85	51540	11월 11, 2025
Notification Banners Theme component	50	3272	11월 19, 2025
An update changed our versatile banner - I don't know where we can add CSS Product Support	30	1026	8월 22, 2023
Discourse Persistent banner Theme component	9	681	10월 20, 2024

Versatile Banner

Features

Customizing your banner’s content

Using the persistent state option

Settings

Related topics