How to create a banner

There are many ways to create a banner. Let’s see how starting from the easiest!

Create a dismissible banner

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

  1. Create a + New Topic, the category is indifferent in this specific case and can be both public or private.

    :flashlight: Tips: the maximum height of a banner will be 250px (editable via CSS), for longer texts it will be possible to scroll the text inside the banner itself. Writing very long texts is not recommended, otherwise users will close the banner before having finished reading the content. Try to write a clear and concise text and add a link to your site’s Welcome topic for further information. No one likes walls of text, especially new users who need to understand how the site works.

  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.

Create a permanent banner

The banner will always be visible 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.

Create an advanced banner

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.

@tshenry has built 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, the Versatile Banner whose 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

image


All you have to do now is choose which banner best suits your needs!

20 Likes