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>
It is already without /t, leaving it visible only in home and /c
This is how it is displayed on the home:
And this is how it is displayed on other pages (it shouldn’t):
The texts disappear, but the background image continues.
I will test your solution. Thank you!
Hmm, it’s definitely trying not to display the banner. I strongly suspect what you are seeing is coming from a customization you’ve made in another component. Have you manually adjusted the height by chance? That’s the only way I can get close to what you are seeing. You should be able to use your browser inspector to confirm and see where the styling is coming from. If that ends up being the case, see if you can switch to using the conditionally rendered elements (those under div.banner-box) to adjust the height.
Just to be clear, that was in response to @Papararchy01, but if you are able to make use of it as well, great!
PS - Your banner looks very nice
that is awesome Taylor thank you!
Is there a way to target the html so it works with javascript turned off?
You’re welcome!
No. As with most aspects of Discourse, the Versatile Banner as a whole and the above snippet will not work with javascript turned off.
On mobile, the dismiss/collapse buttons hide underneath the navigation bar (android, Chrome) so that only a smidge of the bottom of each button is visible. Mostly default installation so I haven’t tweaked any css.
(Ignore the crappy styling - testing a bg image)
Thanks for reporting that @Heather_Dudley! I should have a fix in place now. Let me know if there are any lingering issues after updating.
Looks great, thanks for the quick fix!
hello, I am wondering if there is any way to add alternative descriptions to the icons in each column to improve accessibility? Any support or advice would be awesome - thanks
I’ll definitely see if I can improve the overall accessibility of the banner in future updates, but you should be able to override things as needed in the mean time using the same idea as the last example I shared.
I’m not sure what you are using for icons (i.e. font awesome icons or custom images). If you are using images, for example, you should be able to do something like this:
<script type="text/discourse-plugin" version="0.8.42">
api.reopenWidget("banner-column-icon", {
html(attrs) {
const altText = {
0:"First Column Icon",
1:"Second Column Icon",
2:"Third Column Icon",
3:"Fourth Column Icon"
};
let icon = this._super(attrs);
if(icon.tagName === "IMG") {
icon.properties.alt = altText[attrs.column];
}
return icon;
}
});
</script>
Hopefully that gives you a starting point.