Create a banner to display at the top of your site

There are many ways to create a banner. Let’s start with the easiest.

Dismissible banner

Users can close the banner. The banner will return to visible if the site-related cookies are deleted from the browser.

  1. Create a + New Topic, the category does not matter and the topic can be either public or private.

    :flashlight: Tips: the maximum height of a banner is 250px (editable via CSS), for longer texts it will be possible to scroll the text inside the banner itself. A lot of text is not recommended; users will close the banner before reading it all. Try to be clear and concise. Add a link to your site’s Welcome topic for further information. No one likes walls of text, especially new users who just arrived!

  2. Open the admin options by clicking on the admin wrench key to the right of the topic or at the bottom of it

    and select Pin Topic…

    image

  3. In the new window you can choose between various options, the one we are interested in is the last one, that is :round_pushpin: Banner Topic
    image

  4. The banner will appear on the top of your site

    and also a small action at the bottom of the topic that will remind you that it has been transformed into a banner

  5. Normal users will see only a dismissable banner,

    Staff users will also see a link at the end of the banner that will quickly take them to the original topic in order to edit it:

  6. (optional) The banner can be easily customized according to your needs using CSS. For example:

    See Beginner’s guide to using Discourse Themes for details.

Permanent banner

The banner will always be visible (even for anonymous users if login_required is checked) and users will not be able to close it.

In your site settings search for global_notice


Usually this setting is used for urgent site communications but nothing prevents an admin from using it to create a permanent banner. Knowing the HTML language it will also be possible to customize the banner at will:

Even in this case the banner can be easily customized using CSS.

Advanced banners

As our system of themes and components has progressed, over the years we have been able to create a system so well integrated that we can create themes and components that can be customized directly from the Discourse interface without acting on the code.

The Welcome Link Banner

It is a banner that allows you to add some custom text and 1-4 links:


This component comes with a variety of settings!

  • show_on: choose to show your banner on the homepage, topic lists, or all pages
  • banner_links: add 1-4 links with font awesome icons and text (you might also need to add icons that aren’t included in Discourse by default to the svg_icons setting)
  • max_trust_level: only show the banner to users at specific trust levels
  • hide_for_staff
  • hide_on_mobile
  • hide_for_anon: hides the banner from logged-out users
  • banner_background_image: choose an image to display behind the banner
  • banner_background_repeat: configure background image repeat behavior
  • banner_background_size: adjust your background image size using CSS (more info )
  • banner_background_color: no background image? use a solid color!
  • banner_box_background_color
  • banner_text_color
  • banner_icon_color
  • banner_link_color

The Versatile Banner

It is one of the most used and well maintained components of Discourse where all settings, texts, images, colors and so on are customizable via the interface.
image


The main features are:

  • Limit display to logged-in users or anonymous users
  • Limit display to be exclusively mobile or desktop
  • Limit display to specific pages
  • Dismissible, expandable, and always visible options
  • Full browser width option
  • Color management
  • Heading and column customization using HTML
  • Persistent state option

That’s all. Enjoy your new banner!

31 Likes