Search banner theme component

This is a component that puts a search bar along with optional headline and subhead text in a banner above the main topic list navigation.

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.

:building_construction: Github repo: https://github.com/awesomerobot/discourse-search-banner.git

:telescope: Preview it on theme creator

:question: How do I install a theme component?

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

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

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
36 Likes

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

3 Likes

Increible work. Thanks for explain this info

This is awesome. is there any way we can put a picture background for the search banner ?

It’s in the theme component settings.

2 Likes

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.

1 Like

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

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

Thanks a lot for this theme!!!

2 Likes

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

First of all great thing, looks super clean and easy to manage!

Is there any way to add basic html to the description text? I would love to add some icons and links.

Hello,

i wanna setup font-weight of search_banner.subhead become bold follow Css below but not effect

.wrap {
.custom-search-banner-wrap{
    p{
        font-weight: bold;
    }
}}

How can i bold subhead?
Thank you!

i solve, thank you!

.custom-search-banner-wrap h1, .custom-search-banner-wrap p {
text-align: center;
font-weight: bold;}