Bringing popular features to Discourse: Header search, welcome banner, and category icons / emoji

[lindsey (Lindsey Fogle)]

We have added several new features to Discourse based on popular theme components to make it easier to customize the design of your community. In this topic, we’ll share more about these new core features, how to use them, and provide information about they compare to the theme components that inspired them.

Header search

The header search feature moves search from the magnifying glass in the top right corner to a more prominent input field in the site header.

When more header space is needed (such as when scrolling a topic), the search will revert to the magnifying glass to save room.

To turn on header search…

1. In the admin area, go to your site settings.
2. Find the Search experience setting.
3. Update this setting to “Search field in site header”.
4. Click the green check to save.

Header search feature vs. Advanced Header Search component

Header search was inspired by the Header Search theme component, which we’ve renamed to Advanced Header Search to distinguish it from the core feature.

You should use the Advanced Header Search component when you need to support external searches (i.e. searches outside of your Discourse community). Otherwise, you can use the header search feature that’s now part of Discourse core.

Welcome banner

The welcome banner greets members and visitors and adds a prominent search bar to your topic lists.

The welcome banner and header search features are compatible with each other so that header search will be hidden while the welcome banner is visible.

To turn on welcome banner…

1. In the admin area, go to your site settings.
2. Find the Enable welcome banner setting.
3. Enable this setting.
4. Click the green check to save.

To customize the message displayed on the banner, go to the Site Texts area, and search for “welcome_banner”. You can modify text strings for registered member greeting, anonymous user greeting, and search field.

Welcome banner vs. Advanced Search Banner component

Welcome banner was inspired by the Search Banner component, which we’ve renamed to Advanced Search Banner to distinguish it from the core feature.

You should use the Advanced Search Banner component when you want to use custom background images for the banner, enter multiple lines of text in the banner, or change who can see the banner (i.e. logged in members, logged out users, or both). Otherwise, you can use the welcome banner feature that’s now part of Discourse core.

Category icons and emoji

You can now use icons and emoji to distinguish categories, instead of the colored square.

To use category icons / emoji…

1. When creating or editing a category, change the Style setting to Icon or Emoji.
2. Choose the icon or emoji you want to use. The color will determine the icon color (if using) and impact other areas where a color is associated with the category, such as on the /categories page.
3. Click Save Category.

Category icons and emoji vs. Category Icons component

Category icons and emoji were inspired by the Category Icons component, which we will soon be deprecating in favor of this core feature because it supports more customization (i.e. emojis) and offers a much simpler setup experience.

For those currently using Category Icons, we recommend moving your icon customizations from Category Icons to the core category settings for longterm support and ongoing feature improvements. In our testing, the component settings override the core feature settings, but these were not designed to be used together.

[AquaL1te]

I wanted to transition to the native category icon method. But I notice that the theme component has way more icons. Of all the icons I used, only a small subset is working now with the native category icons. I suppose the difference is that one uses FontAwesome and the other one emojis? I do use the option “icons” though, but when I search for them, they don’t show up (after disabling the theme component for category icons).

An example of what I use now:

[Arkshine]

You can add the missing icons to the SVG icon subset site setting.

[krystal (Krystal S)]

@lindsey

You should use the Advanced Header Search component when you need to support external searches (i.e. searches outside of your Discourse community).

How does this work? Does this mean you can search external sources while in Discourse? Or does this just mean searching Discourse from an external source?

[Heliosurge (Dan DeMontmorency)]

@lindsey

Category icons and emoji

You can now use icons and emoji to distinguish categories, instead of the colored square.

This is quite awesome add! Thank you! Combined with custom emoji adds impressive customization capabilities!

[AquaL1te]

@lindsey

Category icons and emoji

There is still a difference though, with the theme component the subcategories get this nice touch:

This is not visible with the native category icon option. The top icon is then gone.

[tomtjes (Thomas Reintjes)]

I use category icons to indicate whether a category is public, visible to logged-in members, or limited to certain groups. Would this be possible to replicate with the new setting? I like that the icons are gray, but wouldn’t want to set all the category colors to gray.

[Arkshine]

@AquaL1te

This is not visible with the native category icon option. The top icon is then gone.

I think this will be supported once this PR is merged:

FIX: add category badge style to category list

@tomtjes

I use category icons to indicate whether a category is public, visible to logged-in members, or limited to certain groups. Would this be possible to replicate with the new setting? I like that the icons are gray, but wouldn’t want to set all the category colors to gray.

It should be possible with CSS.
You could set the default color for all icons, and then, based on the .anon (for non-logged users) class and user’s group name (see CSS Classes for Current User's Groups), you can either hide the icon or change it to grey.

If you’re using only icons and the logged-in option is needed, it’s OK to keep using the TC, too.

[mcwumbly (Dave McClure)]

@tomtjes

I use category icons to indicate whether a category is public, visible to logged-in members, or limited to certain groups.

I like this. I wonder if we should consider this a signal of something missing more fundamentally, rather than pushing this burden onto admins to solve with customizations.

Also related: Allow users with access to a restricted category to see who else has access

[gooseegg]

Hi folks,

We recently upgraded our Discourse forum (tw.forumosa.com), and with the latest update, the new “Welcome back” header and integrated search bar were added to the homepage. While it looks fine in concept, we’ve noticed some usability issues — especially on mobile:

1. Search dropdown can be unreadable due to transparency

When tapping the search icon on the top nav bar (on Android, for example), the dropdown appears but has a transparent background, making it nearly impossible to read the search results over the content behind it. A solid background should solve this. I’ve posted screenshots of what I mean below.

2. Header is tall - how can we adjust the vertical spacing?

The new welcome message and search bar take up a big chunk of screen real estate on mobile. Since we already have the search icon in the nav bar, the added search bar feels redundant. We’d love to narrow the height of this header or hide the extra search bar/welcome message entirely on smaller screens.

This may affect desktop as well, but it’s especially problematic on mobile right now.

Has anyone come across this and found a clean way to override it via CSS or theme components?

Cheers!

[Arkshine]

Worth noting that the update banner stacks above as well:

It seems that the z-index on .welcome-banner (currently 1) should be at least >= 3. (the main link and metadata uses z-index: 2)

[davidkingham]

@Arkshine

I think this will be supported once this PR is merged:

I’m afraid it’s still broken

[David_Ghost]

You need to add the icons in SVG icon subset, if it’s not already done

[davidkingham]

Thanks, but I do:

[lindsey (Lindsey Fogle)]

Which page is this?

It looks like the icons are showing as expected on /categories, but not sure if that’s because you’re still using the theme component or if the issues you’re experiencing are on another page that we need to fix up.

[maiki]

I just had a great experience: I switched to Horizon theme for my personal site, and set icons for my categories… from my mobile device!

That’s wild, and I appreciate the efforts going into making the admin experience this smooth.