Hey @awesomerobot
Just noticed that the .results class background is not using the new color variables yet. Hence on dark color scheme the search results background is still #ffffff.
Can you add the new variables in the next update?
Meanwhile if anyone else is having same issue, here is my temporary fix:
/* temp fix bg search banner */
.custom-search-banner-wrap .results {
background: var(--secondary)!important;
border: 1px solid var(--primary-low);
}
Yes, thanks for mentioning it — the theme is now updated with the correct variables.
how could i make the text use my primary color instead of my secondary color? i was looking through the common.scss file but i couldn’t find anything relating to the text/text color. (i’m talking about the text that you can choose, not sure what it’s called)
update:
html .custom-search-banner-wrap h1 {
color: var(--primary) !important;
}
html .custom-search-banner-wrap p {
color: var(--primary) !important;
}
achieves this, instead of using the secondary color for the text it uses your primary color.
No, I don’t think a URL will work there. I can add it at some point in the future, but in the meantime if someone wants to make a PR that makes it possible I can review it.
I like it and it comes with air theme… but there is a problem with the “welcome” header and “sub” text is white text on white background. Because Air Theme does not have css, I cannot change the colour.
I don’t think the fix is working anymore. I’m currently testing this #theme-component on a sample instance of Discourse, but it’s not playing well with the “Who’s Online” #plugin… 
The component is really great. I want to change the search icon, but I can’t find it. Can anyone help me?
This has requested earler too, but… is it awful job to change Logged_in to TLs?
The main idea is that TL0/TL1 may need some extra caring, but higher ones knows how to use a forum, including searches. And for them it is kind of just unnecessary object eating preciuos space.
Well — this is absolutely not a big thing or a deal breaker, but more or less just nice to have.
I’ve added HTML support to the headline/subhead
Hi. I installed the official theme-component: Search Banner and it’s helpful. Only one thing annoys me. I uploaded a background image for the search banner, but it seems to adjust itself by cutting off the right part when the screen narrows. I don’t know how to describe but here are some pics:
Looking good.
Image covers the texts.
And I found the search banner for Wyze is good because the image adjusts itself from both sides and won’t cover the text anyway.
Can this component be improved so the image will adjust to fit different devices? Thanks!!
Hi @Sherran 
I’ve moved your post over the component topic itself to get the right eyes on your request. 
By default this is the way the component handles adjusting a single background image to fit different devices. The background image is set using background-size: cover in CSS (more info here: background-size - CSS: Cascading Style Sheets | MDN).
So by default the background image used will be resized to always cover the entire background of the container.
One enhancement could be made to add an alternative mobile image to this component, but even with that it’s likely that individual sites will have to add some CSS at certain screen widths if they have specific background image requirements (it wouldn’t help in this case, because this issue is happening at widths that are wider than mobile). In Wyze’s case, they have a customized version of the component installed to support their specific needs.
For the specifics of making the CSS changes, something like this might improve the behavior of the background image in your case.
.search-banner .custom-search-banner-wrap {
background-size: contain;
}
You may also need to set different behaviors at different widths, for example:
.search-banner .custom-search-banner-wrap {
background-size: contain;
@media screen and (max-width: 1000px) { // if the screen is less than 1000px wide
background: none; // hide the background
}
}
If you’re new to this, we have a guide that may help: How to make CSS changes on your site
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.
Hello, is there a way to change the background image between light and dark mode?
Great addon! We appreciate it a lot.
One question. Is there a way to encode the url in the suggested results?
Hi @awesomerobot,
is there a way to sync with the algolia plugin → Discourse Algolia Search
At the moment i have like 2 search engine ( Discourse and Algolia ) is there a way i can choose the main one ?
Hi Awesome,
Found an issue when Discourse chat plugin activated the Banner of your component blanks.
Running Test-passed
using Air theme. When Chat plugin disabled it displays no issues. After chat enabled as above.
I was wondering if you had a chance to look into the above issue? Is it something that can be fixed in the component or does this rewuire a fix on the Chat plugin side? Have crossed posted isdue there as well. Haven’t seen any feedback there.
EDiT: On further careful testing using preview in your component. The issue is not related to your component. But some kind of conflict with Air Theme background. My apologies for the incorrect assessment.
