thanks! but if I add /top/ there won’t that prevent it from showing elsewhere? Right now it’s showing everywhere else I think.
edit - ok, did a test… and it seems I need to add a few more of these to make sure the banner stays as people click around. here’s how it looks now:
That would be great addition. I am looking for a way to display the versatile banner to tl0 users only
I think I find an issue.
When the banner is showing, and a staff member select some post, the “selected-posts”'s box with the options disappear.
I can’t repro this issue here on meta because I don’t have permissions to select posts for moderate/admin them.
selected-posts (i’m debugging)Ah, I see what you are talking about! Let me take a look.
I’m using Versatile Banner and it works great, but when switching Themes it would be good if I could set different colours for the background and text for the alternative theme.
I’m also using Alternative Logos (Alternative logos for dark / light themes) and Discourse Dark Mode (Dark Mode Automatic Theme Switcher) components so the site switches to dark mode and light mode according to the setting of the OS especially on iOS.
It’d be great if the banner could also change colours to suit 
PS I imagine Header Theme Toggle (Header Theme Toggle) might give clues to do this
Add this to your theme’s css and customize the colors to suit
.banner-box h1, .banner-box h2, .banner-box h3 {
color: #32343B !important;
}
.banner-box {
background-color: #F5F5F5 !important;
color: #32343B !important;
}
.banner-box .row .single-box .icon {
color: #32343B !important;
}
.banner-box .row .single-box .btn.btn-icon-text {
background: #32343B !important;
color: white !important;
}
.banner-box .section-header .colored-line {
background: #32343B !important;
}
.banner-box a {
color: #37B8EB !important;
}
Is there any easy way to modify the banner to enable expand/collapse not just by clicking the arrow, but the whole main heading content area? Basically the whole <div class="section-header">...</div>
Really great TC! 
Just a heads up, it seems that when using this TC with the Discourse Tag Banners TC, if you navigate to a tag, then return back to the homepage (clicking on the site logo), the top 1/3rd or so of the versatile banner seems to get cut off. Not sure why.
Hello everyone,
This might be a noobie question but I haven’t been able to find the answer myself…
I’m running the versatile banner and I’d like to change the font to a non-standard font. Is there a way that I can do this? I tried fooling around a bit with the HTML but so far I haven’t been able to get it right.
The fonts I would like to put in are the ‘Marcellus’ and the ‘Libre Franklin Light’ fonts.
(for reference: Google Fonts and Google Fonts)
Any help is greatly appreciated!
Can you take a look at Include images and fonts in themes and components?
The two things you may need to adjust are the font format, and the CSS selector. For Google Fonts, I believe in most cases the format is truetype. The CSS selector you would use is .banner-box
Here’s a basic example:
@font-face {
font-family: Marcellus;
src: url($marcellus-regular) format('truetype');
font-weight: 400;
}
.banner-box {
font-family: Marcellus, serif;
}
Awesome, that works! Thank you so much!
Thanks, that worked perfectly. I created a Dark CSS Theme Component and added your CSS code to it (and tweaked it to the colours I wanted) then linked it to only show with the Dark Theme. Great! That way the theme can update without removing this CSS
Question! If I have the option to dismiss the banner turned on… how does the user get it back if they should change their mind?
Hmm, there’s nothing in the UI to restore a dismissed banner. They would need to clear the browser cookie that’s used to remember whether or not the user dismissed it.
If this is something you expect users to need on a regular basis, you might be able to work something out with CSS and the expand/collapse configuration. With that you could make it feel dismissed, while providing a small button that can be used to restore it. If that’s something you want to explore and need some help, I’m sure someone in the #marketplace could help you work out a solution in short order!
That’s an intriguing idea. I’m less worried about standing users than new ones; IT still stuns me the number of people who never dismiss banners in the first place. But I do like the idea of a restoration button…
If you are admin, could change the cookie name, and that will restore all banners.
If you are not admin, such a normal user, may delete the cookie’s site and restore the banner.
hello
Can anyone please advise if its possible to wrap first-column, second-column and third-column single-box in a tags so the boxes act like a cards and the whole box is clickable?
With this latest update, Limit display to specific pages has stopped working for me. How could I fix this? I don’t want it appearing on topic pages.
Edit: In fact, only the texts disappear, leaving only the background on the pages defined to not appear.
@brikohler I just checked and the url must contain theme setting appears to be working as expected. If you remove the default /t/ entry, the banner will does not display on topics.
There were couple minor updates to the component that addressed a scrolling issue and code formatting, but the functionality hasn’t changed at all at this point.
Try creating a new theme component and adding the following code. You will of course need to replace each href with the one you want to use.
<script type="text/discourse-plugin" version="0.8.42">
api.reopenWidget("banner-content-widget", {
html(attrs) {
let columns = this._super();
columns.children.forEach(e => e.tagName = "A");
columns.children[0].properties.href = "https://discourse.org";
columns.children[1].properties.href = "https://meta.discourse.org";
columns.children[2].properties.href = "https://try.discourse.org";
return columns;
}
});
</script>