Advanced Search Banner

[awesomerobot (Kris)]

This is fixed now, after updating your sites js.welcome_banner.search will work

[RBoy]

It’s been fixed in the Welcome banner now. That’s the go to place now, looks like this theme component isn’t supposed to be used anymore.

[tknospdr (David Muszynski)]

My Advanced Search Banner (beautiful):

Built in Welcome Banner (ugly):

Not sure why a convenient component such as this with all the settings in one place was deprecated in favor of this banner that you have to go to different places to make changes to all the settings for.

And then figure out how to (I assume) alter CSS in order to get the nice rounded corners and proper text sizes back. Which I suck at…

So does anyone know what needs to be created in order to make the bottom pic look like the top pic?

[carbonrich (Richard Hawkins)]

Yes, you’d need to tweak the CSS on the border-radius of the container and the heading and text sizes.

How are you adding the extra text with the built-in Welcome Banner?

[tknospdr (David Muszynski)]

@carbonrich

Yes, you’d need to tweak the CSS on the border-radius of the container and the heading and text sizes.

Yes, I found it finally…

// This fixes the built in welcome banner
.--with-bg-img .welcome-banner__wrap {
  border-radius: 20px;
}
.welcome-banner__title {
  font-size: var(--font-up-4);
  max-width: 900px;
}
.welcome-banner__subheader {
  font-size: 17px;
}

How are you adding the extra text with the built-in Welcome Banner?

You mean the subhead?
I followed along with step 2 on this page:

Creating a banner to display at the top of your site

This guide explains different methods to create and customize banners on your Discourse site, from simple dismissible banners to more advanced options. Required user level: Moderator (Dismissible banner), Administrator Banners are an effective way to communicate important information to your site visitors. This guide will walk you through various methods to create and customize banners on your Discourse site. Welcome banner A welcome banner greets new and r…

[yuriy (Yuriy Kurant)]

@tknospdr

Not sure why a convenient component such as this with all the settings in one place was deprecated

One of the main reasons for the migration was switching to a theme-based interface, which allows for a more granular customizations.

Basically, just a single setting which controls if to show or hide welcome banner was moved per theme setting. All the rest settings are organized in a single section Admin > Appearance > Interface & layout.

@tknospdr

So does anyone know what needs to be created in order to make the bottom pic look like the top pic?

It looks like the image has the height larger than the size of welcome banner, so it is vertically centered. If tweaking CSS is a challenge, another option is to upload image with a cropped height fitting into welcome banner.

@carbonrich

How are you adding the extra text with the built-in Welcome Banner?

If you are referring to the text “Please sign up for…“ below the header, it can be edited in Admin > Appearance > Site texts, search for js.welcome_banner.subheader:

[awesomerobot (Kris)]

@tknospdr

Not sure why a convenient component such as this with all the settings in one place was deprecated in favor of this banner that you have to go to different places to make changes to all the settings for.

We hear you! this is sort of page-bouncing is something we want to improve throughout our admin experience.

To improve this situation we have just merged a new admin page that will be available in Discourse updates shortly — it adds a new page that centralizes existing Welcome Banner settings. You can visit it directly from /admin/config/welcome-banner or with the Welcome Banner link under the appearance section of the admin navigation.