Creating a banner to display at the top of your site

Documentation Site Management
,
1

:bookmark: This guide explains different methods to create and customize banners on your Discourse site, from simple dismissible banners to more advanced options.

:person_raising_hand: 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.

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 :pushpin: 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.

:information_source: 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.

:information_source: 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.

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 @Southpaw 2024-07-19T20:42:49Z

Check documentPerform check on document:
35 Likes