Search Banner

theme-component
,
144

Worked perfectly fine, Thanks!

2 Likes
146

3 posts were split to a new topic: Can I add line breaks to Search Banner subheader text?

147

This is a super minor gripe, but the name of this Theme Component comes through as discourse-search-banner.

This looks quite untidy next to the other official TCs, which would have it as Discourse Search Banner or better yet just Search Banner

2 Likes
148

Yeah, I think I’ve spotted a couple more like that on my travels. It would be nice to clean those up.

Is it as easy as chucking in a PR for the about.json, or are there any other considerations?

2 Likes
150

I think it is. Here goes:

4 Likes
153

Hi,

When I resize my window, specifically when I make it smaller or zoomed in, the background does not auto adjust and remains left aligned. Is there a way to fix it?

image
image1469×333 23.9 KB

2 Likes
154

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) :
2024-07-05 14.42.23

It’s more pronounce in my community :
2024-07-05 14.49.53

Wondering if anyone came across a fix for that, potentially a delay to display the overlay? Might lead to a bad experience.

1 Like
155

the issue is with :

conditional-loading-section:not(.is-loading) {
    transition: opacity 5s ease-in-out;
}

You can’t use the custom CSS to set this to none this is getting overwritten by the theme default conditional-loading-section.scss

1 Like
156

Is there a possibility to reposition the search banner?

@awesomerobot

For example to change the alignment from center to the right or just adjust the position by moving it slightly to the right?

1 Like
157

Not using Theme component settings, but that’s something you can easily achieve using your own custom CSS.

2 Likes
158

We are using it to position the background image instead of text

but unable to readjust the image with the search banner

would highly appreciate providing the CSS code

2 Likes
159

Using inspect element can help. Or even looking at this component’s CSS source or the Air Theme as the first part of the CSS under common first few lines target the search banner with mods targetting it.

Untested as an not XP the issue you mention.

.display-search-banner {
  #main-outlet {
    padding-top: 2em;
    align: center !important;
  }

Put this code in a custom theme-component CSS common.

I can appreciate the desire for ppl to provide how to code. As I am still learning myself. However we need to also work on educating ourselves with the basics.

You can possibly test the “align: center !important;” using your browser’s inspect element.

2 Likes
160

this looks great, however when using it in the RTL layout it seems that the padding doesn’t translate correctly.
LTR:
image

RTL:
image
it seems that the padding for the settings icon and the place holder are switched in RTL mode.

2 Likes
161

Thanks for letting us know! I’ve just made an update that should fix it.

3 Likes