Search banner theme component

awesomerobot · July 15, 2019, 3:49am

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.

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

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


	Preview	Preview it on theme-creator.discourse.org
	Repository	github.com/discourse/discourse-search-banner
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

nexo · July 15, 2019, 7:49am

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

Gerson_Hdez · July 16, 2019, 6:13pm

Increible work. Thanks for explain this info

Jay91 · July 19, 2019, 9:40am

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

nexo · July 19, 2019, 5:16pm

It’s in the theme component settings.

Pad_Pors · July 20, 2019, 5:08pm

amazing theme component

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

huynhthai824 · July 21, 2019, 9:14am

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

awesomerobot · July 25, 2019, 2:16pm

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

sykp241095 · September 11, 2019, 8:47am

Thanks a lot for this theme!!!

marcospreviato · October 17, 2019, 11:08am

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

jrgong · October 26, 2019, 8:24am

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.

huynhthai824 · November 13, 2019, 8:20am

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;}

talkingabout.org · December 4, 2019, 4:21am

I’ve installed it and it’s really great

jrgong · February 17, 2020, 10:03am

Is there any way to display it only to tl0 + tl1 users?

thegurjyot · February 17, 2020, 10:49am

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

Howaids · March 19, 2020, 10:39pm

Brilliant theme @awesomerobot! Thanks a million.

anandf · May 25, 2020, 7:55pm

This breaks the layout of my website and also adds an uneven top padding. Could you please fix that?

navigation-container
header

I am using the Mozilla Discourse Theme
https://github.com/mozilla/discourse-mozilla-theme

GokulNC · June 4, 2020, 4:04pm

Hey @awesomerobot
There seems to be an issue with this theme-component with the who’s online plugin.

That is, the user card is being displayed in an irregular fashion when your theme-component is enabled.

After disabling it, it’s aligned the right way. Can you please check this?

(I don’t think this is a theme-specific issue. I tried with all themes including the default one and the issue persists.)

GokulNC · June 10, 2020, 2:29pm

There seems to be an issue with the Who’s Online plugin and the official Search banner theme component .

That is, the user card is being displayed in an irregular fashion when this plugin is enabled with that theme-component.

After disabling the theme-component, it’s aligned the right way.
Can you please check if there’s something that you could do on this?
(Something like a fix to always display the user-card below the clicked location, instead of automatically choosing an alignment?)

I don’t think this is a theme-specific issue. I tried with all themes including the default one and the issue persists.

awesomerobot · June 10, 2020, 3:39pm

This means it is a problem with the theme component, not the plugin. I’ve made a change to the component that should fix it (also moved your post to the component topic).

https://github.com/awesomerobot/discourse-search-banner/commit/309cf0ee299625a835c99338b7dae7093f058032