Advanced Search Banner

[Discourse]

Note

We are planning to deprecate support for this theme component soon and advise you to use the welcome banner feature instead.

	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, Bug, UX, and 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 @Moin 2025-11-10T16:26:58Z

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;
}

検索アイコンは1つだけ表示されるはずです。ただし、検索バナーとヘッダー検索を同時に使用すると、UXに悪影響があることは申し添えておきます。

どちらか一方のみを使用することをお勧めします。

[RBoy]

ありがとうございます！大変参考になりました。

@isaac

ただ、検索バナーとヘッダー検索を同時に使用すると、UXに悪影響が出ると言わざるを得ません。

具体的にどのようなUXの悪影響があるのか、詳しく教えていただけますか？

[isaac (Isaac Janzen)]

上記の動画で、いくつかの問題点を示しています

• 重複する検索ドロップダウン
• 検索ドロップダウンの奇妙な開閉状態
• 検索アイコンが、一方の検索入力では高度な検索へのリンクになっているが、もう一方ではそうではない
• など

[RBoy]

承知しました。同じページにない限り、問題ないということですね。

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

誰か手伝ってくれませんか？ Discourseにこのテーマをインストールしましたが、画像が右側の一部で切り取られています。画像が完全に収まるようにするには、サイトのフォントを「より小さい」に設定する必要があります。Discourseのインストールは2つありますが、そのうちの1つでは画像は正常に機能しましたが、もう1つでは画像が切り取られているのはなぜですか？

[awesomerobot (Kris)]

スクリーンショットを含めることはできますか？これにより、問題を理解するのがはるかに簡単になります。

[ecki (Bernd)]

同じ問題が発生しており、異なるブラウザ/モードで画像の異なる部分が表示されます。画像を非常に幅広くすることで解決しましたが、これにより右側が一部の条件でしか表示されなくなります。しかし、対称的な画像ではそれほど簡単ではありません。おそらく、さらにCSS（thome-component-overwrite を検索せずに）を追加すると役立つでしょう。

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

一部解決できました。他のテーマのテーマコンポーネントを無効にし、1つだけ残しました。信じられないかもしれませんが、画像はフォントサイズが「normal」で「normal」だったのは、携帯電話のせいで画像の片側しか表示されなかったからです。携帯電話でも完全に表示できるように何かできることはありますか？

[Surbhi_Pal1 (Surbhi)]

こんにちは。

検索バナーとヘッダーの間のスペースを削除する方法はありますか？

[Arkshine]

こんにちは、新しいテーマコンポーネントでこのCSSを使用できます。

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

[Surbhi_Pal1 (Surbhi)]

完璧に機能しました、ありがとう！

[PT_LB (Paul)]

Discourse にも私のコミュニティと同じ問題があるようです。検索アンダーレイ (Discover) を覆うオーバーレイが表示されるまでに時間がかかります。

私のコミュニティでは、さらに顕著です。

この問題に対する修正策をご存知の方はいらっしゃいますか？オーバーレイの表示を遅延させることで解決できるかもしれません。ユーザーエクスペリエンスが悪化する可能性があります。