Advanced Search Banner

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?

@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

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

RTL:
image
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. :thinking:

6 Likes

I’ve added this and set my text, but it only appears for logged in users, not logged out users? I have the settings set to Both:

Logged In:

Logged out:

Settings:

1 Like

What happens if you edit the English_US translation too?
I think when you are logged in, the language you chose in your preferences (or the site’s default locale) is used. When you are logged out, the text is shown in the language preference of your browser. So all users using a language you didn’t customize will see the default text. So maybe you want to customize even more languages.

3 Likes

Oh perfect, thank you that worked!

1 Like

FYI all, we are imminently merging a simplified version of this into core FEATURE: Add welcome banner to core by martin-brennan · Pull Request #31516 · discourse/discourse · GitHub .

This component is still supported, but it has been renamed to Advanced Search Banner from this PR onward DEV: Update theme name to Advanced Search Banner by martin-brennan · Pull Request #84 · discourse/discourse-search-banner · GitHub . If this component is installed, the core welcome banner will not be displayed.

4 Likes