사이트 상단에 표시할 배너 만들기

Discourse · 8월 17, 2020, 9:16오후

이 가이드는 간단한 닫을 수 있는 배너부터 고급 옵션까지, Discourse 사이트에서 배너를 생성하고 사용자 지정하는 다양한 방법을 설명합니다.

필요한 사용자 권한: 중재자(닫을 수 있는 배너), 관리자

배너는 사이트 방문자에게 중요한 정보를 전달하는 효과적인 방법입니다. 이 가이드에서는 Discourse 사이트에서 배너를 생성하고 사용자 지정하는 다양한 방법을 안내합니다.

환영 배너

환영 배너는 신규 및 기존 회원에게 친근한 메시지와 눈에 띄는 검색 바를 제공하여 방문자가 원하는 콘텐츠를 빠르게 찾을 수 있도록 돕습니다.

환영 배너를 활성화하고 사용자 지정하려면 관리자 영역으로 이동하여 사이드바에서 모양 > 환영 배너 링크를 선택하세요.

이 영역에서 다음 설정을 찾을 수 있습니다:

테마에서 활성화…: 활성 테마 중 어떤 테마에 환영 배너를 표시할지 지정할 수 있습니다.
배경 이미지: 환영 배너의 배경으로 사용할 이미지를 업로드합니다.
텍스트 색상: 색상 팔레트에 의해 제어되는 기본 텍스트 색상이 배경 이미지와 충돌하는 경우, 여기서 새 색상을 선택할 수 있습니다. 이 설정은 배경 이미지를 업로드한 경우에만 적용됩니다.
페이지 가시성: 환영 배너가 표시될 페이지를 결정합니다. 기본적으로 상단 메뉴 페이지(즉, 상단 메뉴 사이트 설정에서 선택된 페이지)에 표시되지만, 다음과 같이 변경할 수 있습니다:
- 홈페이지만: 환영 배너가 사이트 홈페이지(즉, 상단 메뉴 사이트 설정에 나열된 첫 번째 페이지)에만 표시됩니다.
- 발견 페이지: 상단 메뉴 페이지 모두에 환영 배너가 표시됩니다(사이트의 실제 상단 메뉴에 표시되지 않거나 설정에서 선택되지 않은 경우에도).
- 모든 페이지: 환영 배너가 사이트의 모든 페이지에 표시됩니다. 이는 주제 페이지에서 시각적 혼란을 일으켜 회원들의 읽기와 참여를 방해할 수 있으므로 일반적으로 권장되지 않습니다.
위치: 환영 배너가 페이지의 어디에 표시될지 결정합니다. 기본적으로 주제 콘텐츠 위에 표시되지만, 사이트 헤더 아래도 선택할 수 있습니다. 그 차이는 다소 미묘하며, 아래 스크린샷에서 확인할 수 있습니다:

환영 배너의 텍스트를 사용자 지정하여 인사말을 변경하고 환영 배너에 설명 텍스트를 더 추가할 수도 있습니다.

신규 회원용 헤더: 신규 회원이 사이트에 처음 로그인할 때 표시되는 주요 인사말.
로그인된 회원용 헤더: 기존 회원에게 표시되는 주요 인사말.
익명 방문자용 헤더: 익명(즉, 로그인하지 않은) 회원에게 표시되는 주요 인사말.
로그인된 회원용 서브헤더: 기존 회원에게 헤더 아래에 표시되는 선택적인 부가 텍스트 줄.
익명 방문자용 서브헤더: 익명(즉, 로그인하지 않은) 회원에게 헤더 아래에 표시되는 선택적인 부가 텍스트 줄.
검색 자리 표시자: 환영 배너의 검색 필드에 표시되는 자리 표시자 텍스트.

닫을 수 있는 배너

닫을 수 있는 배너는 사용자가 닫을 수 있는 임시 공지입니다. 생성 방법은 다음과 같습니다:

공개 카테고리 중 어디에서든 주제를 생성하거나 이동합니다. 주제 상단의 원본 게시물(OP)이 배너의 원천이 됩니다.
주제 오른쪽 하단 또는 아래에 있는 렌치 아이콘을 클릭하여 관리자 옵션을 엽니다.
“주제 고정…”을 선택합니다.
새 창에서 배너 주제로 만들기 를 선택합니다.

이제 배너가 사이트 상단에 나타납니다. 사용자는 닫을 수 있는 배너를 보게 되며, 스태프는 원본 주제를 편집할 수 있는 링크도 볼 수 있습니다.

효과적인 닫을 수 있는 배너를 위한 팁:

텍스트를 명확하고 간결하게 유지하세요
최대 높이는 20vh입니다 (CSS로 수정 가능)
긴 텍스트의 경우, 사용자는 배너 내에서 스크롤할 수 있습니다
더 많은 정보를 위해 관련 공개 주제에 대한 링크를 추가하는 것을 고려하세요
배너로 사용되는 주제를 숨기고 싶다면, 주제 관리자 메뉴를 사용하여 목록에서 제외할 수 있습니다

영구 배너

항상 표시되고 사용자가 닫을 수 없는 배너를 생성하려면:

사이트 설정에서 global_notice를 검색합니다.
이 필드에 배너 텍스트나 HTML을 입력합니다.

영구 배너를 위한 팁:

이 유형의 배너는 긴급한 사이트 공지 사항에 일반적으로 사용되지만, 모든 영구 메시지에 사용할 수 있습니다
이 배너는 login_required 사이트의 익명 사용자를 포함하여 모든 사람에게 표시됩니다
global notice 사이트 설정을 초기화하여 배너를 제거할 수 있습니다

고급 배너

테마 구성 요소를 사용하여 더 고급스러운 배너를 만들 수 있습니다. 이러한 테마 구성 요소는 코어 환영 배너 기능과 충돌할 수 있다는 점에 유의하세요.

환영 링크 배너

이 구성 요소를 사용하면 배너에 사용자 정의 텍스트와 1~4개의 링크를 추가할 수 있습니다. 다음을 포함한 다양한 사용자 지정 옵션을 제공합니다:

배너 표시 위치 선택(홈페이지, 주제 목록 또는 모든 페이지)
Font Awesome 아이콘과 함께 링크 추가
사용자 신뢰 수준에 기반한 가시성 제한
배경 이미지 또는 색상 사용자 지정
텍스트 및 아이콘 색상 조정

다목적 배너

가장 인기 있고 잘 유지 관리되는 구성 요소 중 하나인 다목적 배너는 인터페이스를 통해 광범위한 사용자 지정 옵션을 제공합니다. 여기에는 다음이 포함됩니다:

배너 표시 제한
- 로그인된 사용자 또는 익명 사용자
- 모바일 또는 데스크톱 장치
- 홈페이지, 주제 목록 또는 모든 페이지
닫을 수 있는, 확장 가능한 또는 영구 옵션
전체 브라우저 폭 설정
색상 관리
HTML을 사용한 헤딩 및 열 사용자 지정

CSS를 사용한 배너 사용자 지정

CSS를 사용하여 모든 유형의 배너를 사용자 지정할 수 있습니다. CSS를 사용하여 Discourse 사이트를 사용자 지정하는 방법에 대한 자세한 내용은 Discourse 테마 사용 입문가 가이드를 참조하세요.

leopedrini · 8월 22, 2025, 11:11오전

I could not find this option… Is it a new feature in Beta version?

leopedrini · 8월 22, 2025, 12:57오후

Update: after updating from 3.4.6 to 3.5.0, it was visible:

RBoy · 8월 24, 2025, 10:28오후

There’s a bug in the build 3.6.0.beta1-dev (e44347414a)

Changing this Site text has no effect on the text in the Search bar, it still always shows Search. Tested on Windows 10 x64 running Chrome

awesomerobot · 8월 25, 2025, 4:26오후

Working on a fix for this here: DEV: use welcome_banner.search placeholder in search banner by awesomerobot · Pull Request #34523 · discourse/discourse · GitHub

RBoy · 8월 26, 2025, 4:12오전

Amazing, thank you - that fixed it!

tknospdr · 10월 3, 2025, 2:42오후

Having an issue with my background image for the welcome banner.
I’m using Cloudflare R2 S3 buckets for object storage on the site in question.
When I upload a background image in the admin section it shows up correctly, if I click to show it full size it works. And if I right click and show image in new tab it works and using the public bucket URL:
https://eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

What it injects into the CSS though, is this URL:

https://exotics-unlimited.7100e60b936991e069a3230dc05d4976.r2.cloudflarestorage.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

I have another site that uses local storage and the banner background image works correctly.

Is this a bug in the code, or am I doing something wrong?

After digging around some more it looks like this CSS controls the background image:

If I manually replace the URL in the inspector it works.
I tried overriding that with:

.custom-search-banner-wrap .welcome-banner__wrap {
  background-image: "eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg";
}

But that’s not working. Still feels like a bug though.

yuriy · 10월 30, 2025, 2:43오후

@tknospdr, I am not quite following what issue are you experiencing?

I checked your site https://eu.technospider.com, and I see that the background image is rendered as expected:

tknospdr · 10월 30, 2025, 2:49오후

I think I finally got the CSS override working. The issue is that it shouldn’t need an override.

It appears the banner code is using the wrong asset if you’re hosting with Cloudflare S3.

yuriy · 10월 30, 2025, 3:17오후

Which exactly is your override?

On our side, we could make sure we apply only a URL pathname /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg in CSS:

background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)

I believe, this rule would work for you without requiring any overrides?

tknospdr · 10월 30, 2025, 3:26오후

My entire override is:

.welcome-banner {
  background-image: url(//eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg);
}
.--with-bg-img .welcome-banner__wrap {
  border-radius: 20px;
}
.welcome-banner__title {
  font-size: var(--font-up-4);
  max-width: 900px;
}
.welcome-banner__subheader {
  font-size: 17px;
  padding-bottom: 20px;
}

On our side, we could make sure we apply only a URL pathname /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg in CSS:
background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)
I believe, this rule would work for you without requiring any overrides?

In the UI, all I can do is upload an image, so I believe that a code change is needed to be able to remove my CSS override statement.
Would be happy to try out whatever fixes you care to implement.

Frenky · 1월 7, 2026, 1:50오후

안녕하세요,

최신 Discourse 업데이트 이후 Advanced Search Banner 테마 구성 요소가 더 이상 지원되지 않으며, 유지보수도 중단된 것으로 보입니다. 대신 공식 Welcome Banner 확장 기능이 제공되고 있습니다.

문제는 새로운 구성 요소에서 현재 배경 이미지를 하나만 선택할 수 있다는 점입니다. 이전의 Advanced Search Banner 구성 요소에서는 라이트 모드와 다크 모드에 각각 다른 배경 이미지를 설정할 수 있었는데, 이는 다양한 레이아웃과 테마에 이상적이었습니다.

커뮤니티에 질문드립니다:

Welcome Banner에서 이 기능을 재현할 수 있는 방법이 있을까요?
라이트 모드와 다크 모드에 다른 배경 이미지를 사용하도록 확장 기능이나 우회 방법을 이미 구현하신 분이 계신가요?
개발자들이 이를 추후에 구현할 계획이 있을까요?

안내, 팁, 아이디어를 주시면 감사하겠습니다!

미리 감사드립니다!

글		댓글	조회수
What Theme Component is Discourse using for this? Support	1	163	10월 5, 2024
Where do l create the banner topic? Support	5	166	8월 12, 2026
Custom banner or Some component (Help Needed) Support	2	167	10월 25, 2024
Setup custom Welcome banner on the homepage Support	1	1043	8월 31, 2023
Name of component discourse top forum General	1	154	2월 11, 2025