Worked perfectly fine, Thanks!
2 Likes
3 posts were split to a new topic: Can I add line breaks to Search Banner subheader text?
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
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
I think it is. Here goes:
4 Likes
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?
2 Likes
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.
1 Like
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
Is there a possibility to reposition the search banner?
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
Not using Theme component settings, but that’s something you can easily achieve using your own custom CSS.
2 Likes
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
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
this looks great, however when using it in the RTL layout it seems that the padding doesn’t translate correctly.
LTR:
RTL:
it seems that the padding for the settings icon and the place holder are switched in RTL mode.
2 Likes
Thanks for letting us know! I’ve just made an update that should fix it.
5 Likes
On latests 3.3.1 tests-passed, only on mobile category icons on autocomplete search results are not displayed. I can reproduce the issue even in safe mode with all plugins disabled.
You can try here on our home page: forum.cannabisanbauen.net
3 Likes
Here’s a quick fix in waiting for an official fix:
.search-menu {
.search-link {
.badge-category {
display: inline-flex;
}
}
}
It seems related to this CSS:
The badge category doesn’t have the proper display.
However, there is already an inline-flex on .badge-category, so I think it’s safe to remove the CSS in the component. 
6 Likes
Hello,
How to add CSS in Air Theme or Search Banner component please ?
Thank you
Welcome to Meta 
You can add your customizations in your own component
4 Likes
Thank you very much !
3 Likes
There are some customizations posted in Air Theme topic. If you pm me with what your looking for I might be able to help maybe. As I posted a couple of fixes.
2 Likes