Search Banner

theme-component
,
1
: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 theme-creator.discourse.org
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-search-banner
: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.

17%20PM
17%20PM2406Ă—1140 325 KB


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

Available settings

  • Set the headline and subhead text
  • Show the banner on all top-level topic pages (default), just the homepage, or all pages
  • Show the banner for everyone, logged in, or logged out users
  • Set a background image (light mode and dark mode)

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
77 Likes
2

Incredible work! :sparkles: Suggestion: add an option to hide this theme component from logged-in users (only visible to visitors/non-users).

6 Likes
8

amazing theme component :star_struck: :heart:

it’d be great if it can be merged into other available banner themes, i.e. Versatile Banner, as an option.

5 Likes
9

How do we show search banner everywhere page? Every topic, every category? Thank!

10

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
14 Likes
12

hi, i have a image after header and I want to put this search after this not before, how to make this?

17

This theme component shows users in search (mobile view) but why doesn’t the normal search bar shows users in mobile search?

1 Like
32

this theme doesn’t work properly with Topic list sidebar navigation.

Screenshot_2021-01-04_20-38-47
Screenshot_2021-01-04_20-38-471192Ă—523 119 KB

the same way as in Homepage Feature Component - #70 by Pad_Pors.

4 Likes
35

How would discourse search autocomplete work with this?

1 Like
74

I like it and it comes with air theme… but there is a problem with the “welcome” header and “sub” text is white text on white background. Because Air Theme does not have css, I cannot change the colour.

1 Like
76

The component is really great. I want to change the search icon, but I can’t find it. Can anyone help me?

82

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:

image
image1185Ă—699 61.8 KB

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

723Ă—153 22.5 KB

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

6 Likes
84

Hello, is there a way to change the background image between light and dark mode?

2 Likes
85

Great addon! We appreciate it a lot.
One question. Is there a way to encode the url in the suggested results?