 |
Summary | Versatile Banner adds a customizable banner to your site. |
 |
Preview | Preview on Discourse Theme Creator |
 |
Repository Link | https://github.com/discourse/discourse-versatile-banner |
 |
New to Discourse Themes? | Beginner’s guide to using Discourse Themes |
Install this theme component
Features
This theme component is an evolution of previous banner efforts. The goal is to provide more ease and flexibility through the use of theme settings.
Below is a highlight of the features:
- 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 (see below for more)
- Persistent state option (see below for more)
Customizing your banner’s content
Banner content is broken up into the main heading and columns. You can have up to 4 columns on your banner, however, the recommended number is 3 or fewer due to width limitations. HTML templates are provided and can be customized to meet your individual needs. You can also control each column’s width and add whatever image or font awesome icon you want to the top of each column.
Using the persistent state option
The persistent state option will rely on up to two cookies. These cookies will contain a name for the banner and a true/false value that relates to the banner’s state. If you have any concerns with using cookies on your site, it’s best to avoid using this setting. Choosing a relative time option for the cookie_lifespan setting will make sure the banner remains closed/expanded/collapsed for that amount of time after the user presses the appropriate button. Without this setting, the banner resets with every full page load. If you make a change to the banner and want to ensure that all users see those changes, even those that had previously closed the banner, be sure to change the “cookie name.” It will essentially reset any persistent state, then allow user to close the banner once more
Settings
| Name | Description |
|---|---|
| show for members | Display the banner for users logged into the forum |
| show for anon | Display the banner for anonymous users |
| display on mobile | Display the banner on mobile devices |
| display on desktop | Display the banner on desktop computers |
| display on homepage | Display the banner on the homepage |
| url must contain | Enter paths that should display the banner. Add * to the end of the path as a wildcard |
| dismissible | Allow the banner to be closed by users |
| collapsible | Allow the banner to be expanded and collapsed by users |
| default collapsed state | Default collapsed state when collapsible setting is enabled |
| cookie lifespan | The lifespan of the cookie used to remember if the banner has been closed, expanded, or collapsed. If set to “none”, NO cookies will be used with this component, and any previously created cookies related to the banner will be deleted the next time a user performs a full page load. The values are measured as a single unit, so setting “year” will be one year, “week” will be one week, etc. |
| cookie name | When important changes are made to the banner, you must change the cookie name to ensure all your users see the changes. |
| full width banner | Display the banner at full browser width |
| swap default positioning | If there is another banner-related component active, use this to swap its position with the Versatile Banner |
| plugin outlet | below-site-header puts it above the sidebar, above-main-container puts it above the content to the side of the sidebar |
| banner background image | The source url for your background image. Tip: You can upload an image to your main theme and use the url from that, but make sure that you do not use “Uploads” section of this component. Any uploads added to this component will be deleted whenever it is updated. |
| banner background image dark | The source url for your background image when system dark mode is detected. |
| background color | Used in place of a background image |
| background color dark | Used in place of a background image when system dark mode is detected. |
| primary text color | The main text color of the banner |
| primary text color dark | The main text color of the banner when system dark mode is detected |
| secondary text color | The text color of the icon and text headings, and the button background color. |
| secondary text color dark | The text color of the icon and text headings, and the button background color when system dark mode is detected. |
| link text color | The text color of links within the banner |
| link text color dark | The text color of links within the banner when system dark mode is detected. |
| Translation | Default |
|---|---|
| close.title | Close the banner |
| close.label | Close |
| toggle.title | Expand/Collapse the banner |
| toggle.collapse_label | Collapse |
| toggle.expand_label | Expand |
Last edited by @tobiaseigen 2025-06-24T03:18:04Z
Check document
Perform check on document: