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

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.

search banner example
search banner example2406×1140 325 KB


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

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

Theme translations

You can customize the text of these elements:

  • Heading (search_banner.headline)
  • Subheading (search_banner.subhead)
  • Button text (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

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

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

How could I have these buttons?

Danh-mục-Discourse-Meta
Danh-mục-Discourse-Meta829×205 16.6 KB

2 Likes
108
3 Likes
109

6 posts were split to a new topic: Dark overlay covers the entire site page

116

I can’t use this component, it shows
图片
may I know why?

2 Likes
117

The components works great with the latest Discourse version.

Should the component not be part of a recent installation, has it been updated?

Could you share the exact version of Discourse you are using?

2 Likes
118

Yes, you likely need to update Discourse (from admin/upgrade) — it might also help to share any console errors (right click the page, select inspect, then console)

2 Likes
120

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

1 Like
121

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. :+1:

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

TY very much!

2 Likes
123

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

1 Like
124 
.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.

4 Likes
125

Thanks! Super helpful

Could you elaborate, what UX side effects?

1 Like
126

The video I linked above shows a few of the issues :slight_smile:

  • 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
2 Likes
127

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

2 Likes
128

Wondering if someone else is seeing this issue:

search_banner_ff
search_banner_ff1055×267 6.18 KB

I received a complaint that the search button title was missing and was finally able to reproduce it - this only affects Firefox-based Browser. In Chrome it looks fine:

search_banner_chrome
search_banner_chrome1103×286 3.62 KB

Is this because the Eng local is missing here?

Setting this value through the UI does not solve the issue, though :thinking:

129

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?

2 Likes
130

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

2 Likes