Search Banner

[Discourse]

	Summary	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 @JammyDodger 2024-06-15T11:23:26Z

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)]

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!

[AndyBr (Andy)]

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

[Arkshine]

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.

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

[AndyBr (Andy)]

TY very much!

[RBoy]

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

[isaac (Isaac Janzen)]

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

[RBoy]

Thanks! Super helpful

@isaac

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

Could you elaborate, what UX side effects?

[isaac (Isaac Janzen)]

The video I linked above shows a few of the issues

• 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

[RBoy]

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

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

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?

[awesomerobot (Kris)]

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

[ecki (Bernd)]

i have the same problem that different browsers/modes show different parts of that image. I solved it by making it extra wide, so the right side only shows in some conditions. But thats not so easy for symmetric images. I guess some more CSS (without searching for a thome-component-overwrite) would help with that.

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

I managed to solve part of it, I disabled the theme component in the other themes and left it only at 1, incredible as it seems, the image was “normal” with the font size at “normal” only because of the cell phone that only one side of the image appears, will it be Is there anything I can do to make it appear completely on my cell phone too?

[Ivan_Ivan]

hi!
I think something happened with this component, so in admin it won’t let me add background image(

[awesomerobot (Kris)]

if you recently updated the component, you may just need to refresh the page and try again?

[Ivan_Ivan]

yep, it worked
thanks!

[Surbhi_Pal1 (Surbhi)]

Hi,

Is there a way to remove the spacing b/w the search banner and header?

[Arkshine]

Hi, you can use this CSS in a new theme component:

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