Search Banner

:discourse2: Summary Search Banner puts a search bar along with optional headline and subhead text in a banner above the main topic list navigation.
:eyeglasses: Preview Preview it on
:hammer_and_wrench: Repository Link
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component


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.

:sparkling_heart: This very heavily borrows from @angusHeader Search Theme Component


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

Theme translations

You can customize the text of these elements:

  • Heading (search_banner.headline)
  • Subheading (search_banner.subhead)
  • Button text (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

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


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

I’ve just made a minor update that adds an optional style to this component, it gets you a large search bar without title text:

This can be enabled by a new “special style” setting. All this does is enable a little additional CSS.

I may add some more options here in the future as well!


How could I have these buttons?


6 posts were split to a new topic: Dark overlay covers the entire site page

I can’t use this component, it shows
may I know why?


The components works great with the latest Discourse version.

Should the component not be part of a recent installation, has it been updated?

Could you share the exact version of Discourse you are using?


Yes, you likely need to update Discourse (from admin/upgrade) — it might also help to share any console errors (right click the page, select inspect, then console)


How do I change the color of the Welcome text in this add-on?

1 Like

There is no setting for that. However, you can add just it with some CSS:

Add the following to your theme or a new theme component, and change as you wish. :+1:

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

TY very much!


Is there a way to hide the search icon (using CSS or otherwise)? I’m having an issue where the search icon is being duplicated when used in conjunction with this component: Header Search - #56 by RBoy

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

should only display one search icon. I will say though, using the search banner and header search in tangent has some bad UX side effects.

I would reccomend just using one or the other.


Thanks! Super helpful

Could you elaborate, what UX side effects?

1 Like

The video I linked above shows a few of the issues :slight_smile:

  • overlapping search dropdowns
  • odd open and closed states of search dropdowns
  • search icon is a link to advanced search in one search input and not in the other
  • etc

Got it. So as long as they aren’t together on the same page it should be fine.


Wondering if someone else is seeing this issue:

I received a complaint that the search button title was missing and was finally able to reproduce it - this only affects Firefox-based Browser. In Chrome it looks fine:

Is this because the Eng local is missing here?

Setting this value through the UI does not solve the issue, though :thinking:

Can someone help me? I installed this theme on my Discourse but the image is cutting off a piece on the right side, for the image to fit completely I have to set the site’s font to “Smaller” I have two different installations of Discourse and in one of them the image worked normally, in the other the image why is it cut off?


can you include a screenshot? this will make it much easier to understand the issue