Creating a banner to display at the top of your site

[Discourse]

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 returning members with a friendly message and a prominent search bar, making it easy for visitors to quickly find content that they’re looking for.

To enable the welcome banner:

1. In the admin area, click the Appearance > Themes & components link in the sidebar.
2. Find your active theme and click Edit.
3. Find the Enable welcome banner setting and ensure it is checked.

This will enable the welcome banner for this theme. If you offer multiple user-selectable themes, you will need to repeat this process for each theme.

Customizing the welcome banner

You can customize the welcome banner to change its appearance in your community. In the admin area, when you go to All site settings you can search “welcome banner” to find the following customization options:

• Welcome banner location: This determines where the welcome banner shows on the page. By default, it shows “Above topic content” but you can also select “Below site header”. The difference is a little subtle, and shown in the screenshots below:

• Welcome banner page visibility: This determines which pages display the welcome banner. By default it shows on “Top menu pages” (meaning the pages selected in the Top menu setting), but you can change to:
  • “Homepage”: The welcome banner only shows on the site homepage (i.e. the first page listed in the Top menu setting).
  • “Discovery”: The welcome banner shows on all of the Top menu pages, even if they are not shown in the actual top menu of your site (i.e. not selected in the setting).
  • “All pages”: The welcome banner shows on all pages of your site. This is generally not recommended since it can cause visual clutter on topic pages that distracts members from reading and participating.

You can also customize the welcome banner’s text to change the greeting and add more explanatory text to the welcome banner. To customize the banner text:

1. In the admin area, click the Appearance > Site texts link in the sidebar.
2. Search for the text string that you want to adjust:

• js.welcome_banner.header.logged_in_members — The primary greeting shown to logged in members on the welcome banner.
• js.welcome_banner.header.anonymous_members — The primary greeting shown to anonymous (i.e. not logged in) members on the welcome banner.
• js.welcome_banner.subheader.logged_in_members — An optional secondary line of text shown to logged in members on the welcome banner, below the header.
• js.welcome_banner.subheader.anonymous_members — An optional secondary line of text shown to anonymous (i.e. not logged in) members on the welcome banner, below the header.
• js.welcome_banner.search — The placeholder text shown in the welcome banner’s search field.

3. Click the Edit button.
4. Update the text as desired.
5. Click Save Changes.

Dismissible banner

A dismissible banner is a temporary notice that users can close. Here’s how to create one:

1. Create or navigate to a topic in any category (public or private). The original post (OP) at the top of the topic will be the source of your banner.
2. Open the admin options by clicking the wrench icon to the right or at the bottom of the topic.
3. Select “Pin Topic…”
4. In the new window, choose Make Banner Topic

The banner will now appear at the top of your site. Users will see a dismissible banner. Staff will also see a link to edit the source topic.

Tips for effective dismissible banners:

• Keep the text clear and concise
• The maximum height is 250px (editable via CSS)
• For longer text, users can scroll within the banner
• Consider adding a link to a relevant, public topic for more information

Permanent banner

To create a banner that’s always visible and can’t be dismissed by users:

1. In your site settings, search for global_notice.
2. Enter your banner text or HTML in this field.

Tips for permanent banners:

• This type of banner is typically used for urgent site communications but can be used for any permanent message
• This banner is visible to everyone, including anonymous users on login_required sites
• The banner can be removed by resetting the global notice site setting

Advanced banners

You can build more advanced banners by using a theme component. Please note that these theme components may conflict with the core welcome banner feature.

Welcome Link Banner

This component allows you to add custom text and 1-4 links to your banner. It offers various customization options, including:

• Choosing where to display the banner (homepage, topic lists, or all pages)
• Adding links with Font Awesome icons
• Limiting visibility based on user trust levels
• Customizing background images or colors
• Adjusting text and icon colors

Versatile Banner

One of the most popular and well-maintained components, the Versatile Banner offers extensive customization options through the interface, including:

• Banner display limited to
  • logged-in or anonymous users
  • mobile or desktop device
  • homepage, topic list, or all pages
• Dismissible, expandable, or persistent options
• Full browser-width setting
• Color management
• Heading and column customization using HTML

Customizing banners with CSS

You can customize all banner types using CSS. For more information on using CSS to customize your Discourse site, see the Beginner’s guide to using Discourse Themes.

Last edited by @lindsey 2025-08-11T15:35:15Z

Check document

Perform check on document: