Search Banner

theme-component
32

this theme doesn’t work properly with Topic list sidebar navigation.

Screenshot_2021-01-04_20-38-47
Screenshot_2021-01-04_20-38-471192×523 119 KB

the same way as in Homepage Feature Component - #70 by Pad_Pors.

4 Likes
34

How to add a link in the subhead banner:

search_banner.subhead

Before Posting please search ..., New User's read [FAQ](https://instance.discourse.org/t/faq/10235).

Is that posible???..

Regards.,

1 Like
35

How would discourse search autocomplete work with this?

1 Like
43

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

image
image2536×1084 376 KB

Maybe change to other style in code pen:
example:

1 Like
44

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
50

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
51

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

1 Like
52

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
69

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

image
image1644×492 42.8 KB

1 Like
70

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
74

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
75

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
76

The component is really great. I want to change the search icon, but I can’t find it. Can anyone help me?

77

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
78

I’ve added HTML support to the headline/subhead

5 Likes
79

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
image2674×492 125 KB

Image covers the texts.

image
image1612×382 78.2 KB

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
80

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
81

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

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

4 Likes