Versatile Banner

theme
#225

Can you try adding the following to the url must contain theme setting?

Screen Shot 2020-11-23 at 3.02.47 PM
Screen Shot 2020-11-23 at 3.02.47 PM1462×418 20.8 KB

5 Likes
#226

Yes, that works! Thanks :+1:

2 Likes
#227

Great work @tshenry, works perfect.

For anyone else pursing a similiar setup, I turned it into a permanent banner/title card for the forum with links to each of the 3 major site components (and using the above script from @tshenry to create a new component theme for links).

Since forum categories are one of those as well, I also added a smooth scroll down to the categories (id tag is “main-outlet”).

<style>
html {
  scroll-behavior: smooth;
}
</style>

…

3 Likes
#228

Hi, I have Versatile Banner and Knowledge Explorer installed. How do I prevent Versatile Banner from showing up on the Knowledge Explorer /docs page?

Screenshot of Google Chrome (1-8-21, 2-40-02 PM)
Screenshot of Google Chrome (1-8-21, 2-40-02 PM)2666×658 162 KB

2 Likes
#229

So this is actually a bug. It really shouldn’t be showing there by default. Instead, it should only show if /docs or / is added to the url must contain theme setting.

At the moment, the show on homepage setting is forcing the banner to show on all /something paths when enabled. I believe I have a fix, but I want to be as careful as possible with it since some sites may have come to rely on the bad behavior.

I’ll update here as soon the fix is ready and be sure to explain how things have changed.

2 Likes
#230

:warning: Update

The behavior of the show on homepage and url must contain theme settings was not working as expected and has now been fixed (thanks @debryc for the report!).

Prior to this change, enabling the show on homepage theme setting would cause the banner to display on any single-level path (e.g. /admin, /review, /about, etc.). Now it will be limited to affecting the homepage (/) exclusively as intended.

The url must contain theme setting is now much more granular. Because of that, I’ve included new default values that I believe are a good starting point. You will want to review your site and this theme setting to ensure the banner is showing/not showing according to your preference.

If you have any questions or trouble adjusting to this change, let me know and I’ll be happy to help you sort things out!

PS - I still have every intention to do a substantial refactor and improvement run with this component, but time has been scarce lately, so I haven’t made a whole lot of progress :sweat_smile:

4 Likes
#231

Hey people! I want to make all the text left-aligned but the CSS theme is not working for me. Can anyone tell me how exactly can we do it?

1 Like
#232

Is this along the lines of what you are after?

Screen Shot 2021-01-19 at 10.38.52 AM
Screen Shot 2021-01-19 at 10.38.52 AM2248×1046 405 KB

If so, here’s some quick and dirty CSS that will hopefully get you started:

.banner-box {
  h1,
  h2,
  h3,
  .row .single-box {
    text-align: left;
    & .banner-list {
      display: block;
      ul {
        margin: 0 0 9px 25px;
      }
    }
  }

  .section-header {
    .x-title {
      padding: 25px 15px;
    }
    .description p {
      text-align: left;
    }
  }
}

You’ll want to create a new component called “Versatile Banner Customizations” and add the above CSS to the Common section. Make sure you add the new component to any active themes that use the Versatile Banner to pick up the customization.

2 Likes
#233

This worked for me. Thank you so much.