Versatile Banner

[pfaffman (Jay Pfaffman)]

You can’t. You would need to make them an admin.

[danielabc (Daniela)]

Do you know of any other component where moderators can change banner photo?

[pfaffman (Jay Pfaffman)]

No. Moderators cannot change themes.

It would be possible to create a theme that would, say, make the banner a photo in a topic with a certain tag or category (or the newest topic with that tag or category). You could then limit access to that tag or category to members of a certain group. I wrote a plugin once that took its data from the most recent reply to a topic.

So, without looking at the code, I think you could fork the theme and do something like that.

[awesomerobot (Kris)]

Today we’ve merged a refactor of this component that moves it from our custom widget system to a modern Ember component.

REFACTOR: update to use glimmer components instead of widgets

This is necessary as we plan on removing our widget system within the next year. All the functionality of the banner should remain the same, but let us know if you encounter any new issues!

One thing to note that has changed is that since this is no longer comprised of widgets, so you won’t be able to do something like this to override its functionality:

@tshenry

You might be able to do something like:

<script type="text/discourse-plugin" version="0.10.0">
  // Add the link to the heading
  api.reopenWidget("banner-box-widget", {
    html(attrs) {

This kind of customization has always been a little fragile (if the theme changes, it could break the override, and in turn the entire component) so this is a pattern we’re moving away from when developing extensions for Discourse.

[markersocial]

@awesomerobot

All the functionality of the banner should remain the same, but let us know if you encounter any new issues!

Thanks for the update! Just a heads up - on stable, there seems to be a new issue when when having the columns empty/hidden. Before, setting ‘first/second/third/fourth column content’ fields to empty would hide those columns if I recall correctly. But after the upgrade, the columns will take up empty space if left blank, it’s more significantly noticeable on mobile.

[awesomerobot (Kris)]

Good point! I hide the containers if there’s no content in a new update here:

UX: hide column containers if empty

[flash]

HI I have a problem with the banner on firefox mobile. Im using 3 columns and the first two show all the content and third is cut off. Samsung S23 Ultra I can see it on brave fine. On firefox both logged in and logged out its missing.

I checked iphone 14 pro and safari is fine.

[Kieran_Berryman]

Hello,

I don’t think I’ve seen my issue elsewhere in this thread, but apologies if a solution has already been provided. I’m wanting to implement this banner on my community, and after extensive customization, I’ve realized that it seems like this component is extending the right side of the main container over past normal. I’m going to provide some screenshots below of what I mean (everything in the banner is currently in default settings).

This is with the banner enabled:

The side over by new topic is extended past my profile picture.

---

However, with the theme component disabled, everything looks normal.

As you can see, the right side is in line with my profile picture.

---

I am using other theme components, and so it is possible that those could be interfering. I’ll provide a list of components below:

• Dark-Light Toggle
• DiscoTOC
• Discourse Clickable Topic
• Discourse Gifs
• Discourse Header Search
• Hamburger Theme Selector
• Custom Header Links
• Header Submenus
• Versatile Banner

Any idea whats going on?

Thank You

[barto_95]

When I change the text en the cookie name the banner not show on discourse app…

maybe a bug ?

[Kieran_Berryman]

Looks like this theme component has the functionality to only display on certain pages, and I want to do something similar. How was this functionality achieved?

[awesomerobot (Kris)]

The component checks the setting against the currentURL here:

discourse/discourse-versatile-banner/blob/main/javascripts/discourse/components/versatile-banner.js#L66-L85

[stuwest]

Does the banner only show up on certain browsers? We’re running a fundraiser and I would like everyone to be aware of it, but several people have commented that they haven’t seen anything at all. I’ve tried unchecking the dismissible and collapsible settings but to no effect.

Right now I don’t see the banner if I access the forum through (my admittedly old copy of) Safari on Mac or (my completely up to date) DiscourseHub app on iPhone. I do see it in Safari on my iPhone and Firefox on my Mac.

Any suggestions? I obviously have limited control over which browsers my users are on, but I would like them all to see important announcements.