Search Banner

How would discourse search autocomplete work with this?

1 Like

Hello,
How can i add this background search same page Whois Domain Tool:


Maybe change to other style in code pen:
example:

1 Like

You’ll first need to add some custom css to your site. The target should be: custom-search-banner. I would first start with that, and mess with the background css property and experiment with that.

:+1:

3 Likes

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);
}
5 Likes

Yes, thanks for mentioning it — the theme is now updated with the correct variables.

1 Like

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.

1 Like

Would you please tell me, is it possible to add into “search_banner.subhead” field hyperlink?

1 Like

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.

1 Like

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.

1 Like

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:worried:

1 Like

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.

1 Like

I’ve added HTML support to the headline/subhead

5 Likes

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

4 Likes

Hi @Sherran :slight_smile: I’ve moved your post over the component topic itself to get the right eyes on your request. :+1:

3 Likes

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

5 Likes

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!

5 Likes

Would it be possible to use this with Discourse Algolia Search ?

1 Like

Hello, is there a way to change the background image between light and dark mode?

1 Like

Great addon! We appreciate it a lot.
One question. Is there a way to encode the url in the suggested results?