# Advanced Search Banner
**URL:** https://meta.discourse.org/t/advanced-search-banner/122939
**Category:** Theme component
**Tags:** official, deprecated, search-banner, advanced-search-banner
**Created:** [July 15, 2019, 3:49am UTC](https://meta.discourse.org/t/advanced-search-banner/122939 "2019-07-15T03:49:07Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [July 15, 2019, 3:49am UTC](https://meta.discourse.org/t/advanced-search-banner/122939/1 "2019-07-15T03:49:07Z")
> ⚠
>
> This theme component is deprecated and should no longer be used. Its features are now in Discourse Core — see our documentation for details on setting up a welcome banner:
>
> → [Creating a banner to display at the top of your site](https://meta.discourse.org/t/creating-a-banner-to-display-at-the-top-of-your-site/153718#p-762961-welcome-banner-1)
| | | |
| --- | --- | --- |
| :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. |
| 👓 | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/search-banner) |
| 🛠 | **Repository Link** | [https://github.com/discourse/discourse-search-banner](https://github.com/discourse/discourse-search-banner) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > 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**](https://meta.discourse.org/new-topic?category_id=6&tags=search-banner "Ask for support on configuring and using Search Banner") [🐛 **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=search-banner "A bug report means something is broken, preventing normal/typical use of the theme component") [👀 **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=search-banner "Discussion about the user interface of Search Banner, and how features are presented (including language and UI elements)") [💡 **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=search-banner "Discussion about how existing Search Banner features can be improved or enhanced, and how proposed new features could work")
### 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](https://meta.discourse.org/t/header-search-theme/67959)
> :discourse2: **Hosted by us?** Theme components are available to use on our Standard, Business, and Enterprise plans.
> Last edited by @lindsey 2025-12-18T18:26:57Z
>
> > **Check document**
> >
> > Perform check on document:
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [July 25, 2019, 2:16pm UTC](https://meta.discourse.org/t/advanced-search-banner/122939/10 "2019-07-25T14:16:55Z")
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`
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [October 18, 2022, 5:04pm UTC](https://meta.discourse.org/t/advanced-search-banner/122939/82 "2022-10-18T17:04:03Z")
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!
---
### Author:  [@AndyBr](https://meta.discourse.org/u/AndyBr)
#### Post date: [March 4, 2024, 4:02pm UTC](https://meta.discourse.org/t/advanced-search-banner/122939/120 "2024-03-04T16:02:50Z")
How do I change the color of the Welcome text in this add-on?
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 4, 2024, 4:38pm UTC](https://meta.discourse.org/t/advanced-search-banner/122939/121 "2024-03-04T16:38:48Z")
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. 👍
```css
.search-banner > .custom-search-banner {
/* title */
h1 {
color: #286989;
}
/* description */
p {
color: #286989
}
}
```
---
### Author:  [@AndyBr](https://meta.discourse.org/u/AndyBr)
#### Post date: [March 4, 2024, 6:00pm UTC](https://meta.discourse.org/t/advanced-search-banner/122939/122 "2024-03-04T18:00:16Z")
TY very much!
---
### Author:  [@RBoy](https://meta.discourse.org/u/RBoy)
#### Post date: [March 6, 2024, 5:12pm UTC](https://meta.discourse.org/t/advanced-search-banner/122939/123 "2024-03-06T17:12:51Z")
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: [Advanced Header Search - #56 by RBoy](https://meta.discourse.org/t/header-search/194093/56)
---
### Author:  [@isaac](https://meta.discourse.org/u/isaac)
#### Post date: [March 6, 2024, 7:15pm UTC](https://meta.discourse.org/t/advanced-search-banner/122939/124 "2024-03-06T19:15:56Z")
```css
.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.
---
### Author:  [@RBoy](https://meta.discourse.org/u/RBoy)
#### Post date: [March 6, 2024, 8:31pm UTC](https://meta.discourse.org/t/advanced-search-banner/122939/125 "2024-03-06T20:31:19Z")
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?
---
### Author:  [@isaac](https://meta.discourse.org/u/isaac)
#### Post date: [March 6, 2024, 8:32pm UTC](https://meta.discourse.org/t/advanced-search-banner/122939/126 "2024-03-06T20:32:14Z")
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
---
### Author:  [@RBoy](https://meta.discourse.org/u/RBoy)
#### Post date: [March 6, 2024, 8:50pm UTC](https://meta.discourse.org/t/advanced-search-banner/122939/127 "2024-03-06T20:50:09Z")
Got it. So as long as they aren’t together on the same page it should be fine.
---
### Author:  [@مباركمبارك](https://meta.discourse.org/u/%D9%85%D8%A8%D8%A7%D8%B1%D9%83%D9%85%D8%A8%D8%A7%D8%B1%D9%83)
#### Post date: [March 21, 2024, 1:59pm UTC](https://meta.discourse.org/t/advanced-search-banner/122939/129 "2024-03-21T13:59:09Z")
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?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 21, 2024, 2:35pm UTC](https://meta.discourse.org/t/advanced-search-banner/122939/130 "2024-03-21T14:35:34Z")
can you include a screenshot? this will make it much easier to understand the issue
---
### Author:  [@ecki](https://meta.discourse.org/u/ecki)
#### Post date: [March 25, 2024, 11:03am UTC](https://meta.discourse.org/t/advanced-search-banner/122939/132 "2024-03-25T11:03:32Z")
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.
---
### Author:  [@مباركمبارك](https://meta.discourse.org/u/%D9%85%D8%A8%D8%A7%D8%B1%D9%83%D9%85%D8%A8%D8%A7%D8%B1%D9%83)
#### Post date: [March 25, 2024, 2:11pm UTC](https://meta.discourse.org/t/advanced-search-banner/122939/133 "2024-03-25T14:11:52Z")
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?
---
### Author:  [@Surbhi\_Pal1](https://meta.discourse.org/u/Surbhi_Pal1)
#### Post date: [April 29, 2024, 7:44am UTC](https://meta.discourse.org/t/advanced-search-banner/122939/142 "2024-04-29T07:44:49Z")
Hi,
Is there a way to remove the spacing b/w the search banner and header?
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 29, 2024, 11:54am UTC](https://meta.discourse.org/t/advanced-search-banner/122939/143 "2024-04-29T11:54:55Z")
Hi, you can use this CSS in a new theme component:
```css
.custom-search-banner-wrap {
margin-top: 0;
}
```
---
### Author:  [@Surbhi\_Pal1](https://meta.discourse.org/u/Surbhi_Pal1)
#### Post date: [April 29, 2024, 12:16pm UTC](https://meta.discourse.org/t/advanced-search-banner/122939/144 "2024-04-29T12:16:42Z")
Worked perfectly fine, Thanks!
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [May 16, 2024, 9:14pm UTC](https://meta.discourse.org/t/advanced-search-banner/122939/146 "2024-05-16T21:14:07Z")
3 posts were split to a new topic: [Can I add line breaks to Search Banner subheader text?](https://meta.discourse.org/t/can-i-add-line-breaks-to-search-banner-subheader-text/308322)
---
### Author:  [@PT\_LB](https://meta.discourse.org/u/PT_LB)
#### Post date: [July 5, 2024, 1:56pm UTC](https://meta.discourse.org/t/advanced-search-banner/122939/154 "2024-07-05T13:56:02Z")
Seems Discourse has the same issue that I have in my community, the overlay takes some time to cover whatever is under the search underlay (Discover) :
It’s more pronounce in my community :
Wondering if anyone came across a fix for that, potentially a delay to display the overlay? Might lead to a bad experience.
[Next page](https://meta.discourse.org/t/advanced-search-banner/122939.md?page=2)