Advanced Search Banner

:warning: Note

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

:discourse2: Summary Advanced 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 on Discourse Theme Creator
: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

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

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


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

83 Likes
[PAID] New search bar
Bringing popular features to Discourse: Header search, welcome banner, and category icons / emoji
Elementary Layout Component
Searching for users on mobile
New Theme: Tag-Pages Navigation
How to add links on home page menu to other site?
Adding Search option
Header search in custom header
Can't find how to localize a theme component
Mint Theme
Creating and installing plugins?
Bug with "search_banner.search_button_text" shown in search banner theme component
Search banner requires login
Pavilion Header Search Theme Component
Help Needed for Installing Meta Branded Theme
Banner Featured Links
Search section like on Reddit?
How do I edit "Welcome to our community" and tagline on the Homepage?
Anything wrong with this component?
User card out of alignment
Search Banner image cuts off on smaller screens
Pavilion Header Search Theme Component
Where to find search bar in our settings?
Where to find search bar in our settings?
Fully Theme
Welcome Banner components
What plug-in or customization for this header?
Custom Platform
Homepage header, how to add?
How can I make the home page similar to this one?
Theme or Custom CSS on Monday’s Discourse Instance?
Community not displaying correctly - new problem - help!
Christmas Decoration Component :christmas_tree:
We're upgrading our icons to Font Awesome 6!
Search for and/or filter topics in a category using text search
Forum search bar not showing up
Pavilion Header Search Theme Component
3.5.0.beta9: Improving color management, core welcome banner, and staff action log filters
Translations of theme component sample texts
Making my discourse site look a certain way
How can I change the HTML template of advanced search?
How to change the header text on the title page
Advanced Header Search
How to make a custom search bar?
Bug in Search banner theme component
Simple modifications
How can I achieve these header and footer customisations?
Meta Branded theme and all categories header
Search in this topic filter issue with Search banner TC
Bug with "search_banner.search_button_text" shown in search banner theme component
New Theme: Tag-Pages Navigation
Customizing your site with existing theme components