Advanced Search Banner

[Discourse]

This theme component is deprecated and should no longer be used. Its features are now in Discourse Core — see our documentation for details on setting up a welcome banner:

→ Creating a banner to display at the top of your site

	Summary	Advanced Search Banner puts a search bar along with optional headline and subhead text in a banner above the main topic list navigation.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-search-banner
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

As this is an official theme component maintained by the Discourse team, Support, Contribute > Bug, Contribute > UX, and Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

Support Bug UX Feature

Features

By default, this banner appears on all top-level topic pages (latest/new/unread/top/categories… anything in the top menu site setting) but it can also be set to only display on a community’s homepage.

Settings

Name	Description
show on	This determines which pages the banner appears
plugin outlet	Where on the page the banner will appear
background image light	Background image for the banner on light color palettes
background image dark	Background image for the banner on dark color palettes
tile background image	Repeat the background image
show for	Who can see the Search Banner (logged in, logged out, or both)
special style	Optional variations that change the appearance of the search banner

Translation	Default
search_banner.headline	Welcome to our community
search_banner.subhead	We’re happy to have you here. If you need help, please search before you post.
search_banner.search_button_text

To omit one from display, leave the field blank.

Custom styling

The HTML element gets a class named .display-search-banner wherever this banner appears, and the banner itself is wrapped with the .custom-search-banner class, so with some CSS you should be able to customize the appearance of this banner however you see fit.

Future enhancements

• Add an option to enable the banner in specific categories

Credits

This very heavily borrows from @angus’ Pavilion Header Search Theme Component

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

Last edited by @lindsey 2025-12-18T18:26:57Z

Check document

Perform check on document:

[awesomerobot (Kris)]

I’ve updated the theme component to add some new settings:

show on — this determines where the banner appears and has the options

• top_menu (latest/categories/top/new/unread)
• homepage
• all (all pages except the default search page and admin pages)

show for — this determines who sees the banner

• everyone
• logged_in
• logged_out

[awesomerobot (Kris)]

이 컴포넌트에 선택 스타일을 추가하는 소규모 업데이트를刚刚 적용했습니다. 이 기능을 사용하면 제목 텍스트 없이 큰 검색 바를 사용할 수 있습니다:

새로운 “특별 스타일” 설정을 통해 활성화할 수 있습니다. 이 설정은 단순히 추가적인 CSS를 활성화하는 역할만 합니다.

앞으로 여기에 더 많은 옵션을 추가할 수도 있습니다!

[AndyBr (Andy)]

이 추가 기능에서 환영 텍스트의 색상을 변경하는 방법은 무엇인가요?

[Arkshine]

해당 항목에 대한 설정은 없습니다. 대신 다음 CSS를 추가하여 해당 부분만 수정할 수 있습니다:

테마 또는 새로운 테마 컴포넌트에 다음 내용을 추가하고, 원하는 대로 수정하세요.

.search-banner > .custom-search-banner  {
    /* title */
    h1 {
        color: #286989;
    }
    
    /* description */
    p {
        color: #286989
    }
}

[AndyBr (Andy)]

정말 감사해요!

[RBoy]

검색 아이콘을 숨길 수 있는 방법이 있을까요? (CSS 또는 다른 방법) 이 컴포넌트와 함께 사용할 때 검색 아이콘이 중복으로 표시되는 문제가 있습니다: Advanced Header Search - #56 by RBoy

[isaac (Isaac Janzen)]

.search-input .search-icon:first-child {
  display: none;
}

검색 아이콘은 하나만 표시되어야 합니다. 다만, 검색 배너와 헤더 검색을 동시에 사용하는 것은 몇 가지 좋지 않은 UX 문제를 일으킬 수 있습니다.

둘 중 하나만 사용하는 것을 권장합니다.

[RBoy]

감사합니다! 정말 유용했어요

@isaac

다만, 검색 배너와 헤더 검색을 함께 사용하는 것은 몇 가지 좋지 않은 UX 부작용이 있습니다.

UX 부작용이 구체적으로 무엇인지 설명해 주시겠어요?

[isaac (Isaac Janzen)]

위에서 링크한 비디오에서 몇 가지 문제를 보여 드렸습니다

• 검색 드롭다운이 겹치는 문제
• 검색 드롭다운의 열림/닫힘 상태가 비정상적인 문제
• 검색 아이콘이 하나의 검색 입력창에서는 고급 검색으로 연결되지만 다른 입력창에서는 그렇지 않은 문제
• 기타

[RBoy]

알겠습니다. 그러면 같은 페이지에 함께 있지 않는 한 괜찮을 것 같아요.

[مباركمبارك (مبارك)]

도와주실 분 계신가요? Discourse에 이 테마를 설치했는데, 이미지의 오른쪽 부분이 잘려 나갑니다. 이미지가 완전히 보이려면 사이트의 글자 크기를 "작게"로 설정해야 합니다. Discourse를 두 개 설치해 두고 있는데, 그중 하나에서는 이미지가 정상적으로 표시되고, 다른 하나에서는 왜 잘려 나가는지 궁금합니다.

[awesomerobot (Kris)]

스크린샷을 포함해 주실 수 있나요? 그러면 문제를 훨씬 더 쉽게 이해할 수 있을 것 같습니다.

[ecki (Bernd)]

저도 브라우저/모드별로 해당 이미지의 다른 부분이 표시되는 동일한 문제를 겪고 있습니다. 저는 이미지를 매우 넓게 만들어서 오른쪽 부분이 특정 조건에서만 보이도록 해결했습니다. 하지만 대칭 이미지에는 그렇게 쉽게 적용하기가 어렵습니다. 추가적인 CSS(주제 컴포넌트 오버라이드를 검색하지 않고)가 도움이 될 것 같습니다.

[مباركمبارك (مبارك)]

일부 문제를 해결했습니다. 다른 테마에서 테마 구성 요소를 비활성화하고 하나만 남겨 두었습니다. 믿기 어렵게도, 폰트 크기가 "normal"일 때 이미지가 “normal” 상태로 표시되었습니다. 하지만 휴대폰에서는 이미지가 한쪽 면만 표시됩니다. 휴대폰에서도 이미지가 완전히 보이도록 할 수 있는 방법이 있을까요?

[Surbhi_Pal1 (Surbhi)]

안녕하세요,

검색 배너와 헤더 사이의 간격을 제거하는 방법이 있을까요?

[Arkshine]

안녕하세요, 이 CSS를 새로운 테마 컴포넌트에 사용할 수 있습니다:

.custom-search-banner-wrap {
    margin-top: 0;
}

[Surbhi_Pal1 (Surbhi)]

완벽하게 잘 작동했어요, 감사합니다!

[PT_LB (Paul)]

Discourse에도 제 커뮤니티에서 겪고 있는 동일한 문제가 있는 것 같습니다. 검색 오버레이(Discover)가 아래에 있는 요소를 가리는데 시간이 좀 걸리거든요:

제 커뮤니티에서는 이 문제가 더 뚜렷하게 나타납니다:

혹시 이 문제를 해결하는 방법이 있는지 궁금합니다. 오버레이 표시를 지연시키는 방법 같은 것이 있을까요? 이렇게 하면 사용자 경험이 나빠질 수 있을 것 같습니다.