I can’t seem to find a way to disable the text overlay and search bar on the banner for a new site I’m working on.
The banner art does not allow for placement of any objects on it.
How do I remove those items?
tknospdr inquired about removing the text and search bar overlay from the Discourse Welcome Banner, noting that the banner art itself does not support object placement. awesomerobot explained that there are no native settings to remove these elements individually, suggesting instead that the user disable the Welcome Banner entirely and implement a custom banner using the below-site-header plugin outlet. NateDhaliwal also provided a link to documentation on creating custom banners.
tknospdr clarified that they specifically wanted to keep the Welcome Banner in its proper placement but needed the ability to disable the overlays. Consequently, awesomerobot provided a CSS snippet to hide the content within the banner:
.welcome-banner .welcome-banner__wrap > * {
visibility: hidden;
}
tknospdr confirmed that this solution worked effectively.
I can’t seem to find a way to disable the text overlay and search bar on the banner for a new site I’m working on.
The banner art does not allow for placement of any objects on it.
How do I remove those items?
There are no settings to remove the search bar from the Welcome Banner, so you’d likely be better off disabling it entirely and implementing a custom banner in the below-site-header plugin outlet. There’s some documentation on how to use plugin outlets here: Using Plugin Outlet Connectors from a Theme or Plugin
Also take a look at
for alternatives.
Oh man, I thought we were on to something. But none of those options give my just my banner graphic without anything overlaid on it at the top of my homepage.
I wouldn’t think this would be that hard to do.
The Welcome Banner is the proper placement, it just needs to have checkboxes so you can disable the search bar and text overlays and it would be perfect.
You can add a little CSS to your theme to hide all the content within the welcome banner
.welcome-banner .welcome-banner__wrap > * {
visibility: hidden;
}
Thanks, that worked a treat.
I tried asking AI about CSS to do that but alas, it’s not that smart yet.