Versatile Banner

:discourse2: Summary Versatile Banner adds a customizable banner to your site.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-versatile-banner
:open_book: 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

:discourse2: Hosted by us? Theme components are available to use on our Standard, Business and Enterprise plans.

Last edited by @JammyDodger 2024-06-16T14:10:38Z

Check documentPerform check on document:
101 Likes