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.
Dismissible banner
A dismissible banner is a temporary notice that users can close. Here’s how to create one:
- 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.
- Open the admin options by clicking the wrench icon to the right or at the bottom of the topic.
- Select “Pin Topic…”
- 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:
- In your site settings, search for
global_notice
. - 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.
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 document
Perform check on document: