An update changed our versatile banner - I don't know where we can add CSS

The versatile banner is all messed up on our site after what appears to be a recent update. We can’t figure out how to style our schedule anymore. Any help would be much appreciated…Does anyone know where to put the CSS to make this look better?

I’m running Discourse test passed beta and Versatile Banner on my forum and it’s working as expected (see link in my user card). Perhaps another component or recent change somewhere else is conflicting? Have you made any other recent changes or component additions?

unless it was related to this recent commit? not sure if it’s in your forum. On your admin dashboard when does it say Discourse was last updated?

(DEV: Do not manipulate theme module paths at build-time by davidtaylorhq · Pull Request #23148 · discourse/discourse · GitHub)

1 Like

I’m going off the conversation here…looks like there may have been a discourse core update that changed some things? The CSS we added in the past to make the schedule look nice no longer works.

1 Like

it could be that commit i linked then. the table builder component update broke my forum last night because of that commit that isn’t applied to my forum yet. did you updated the component recently, it may need that commit to be merged to your site now to function.

1 Like

That’s above my pay grade. I’m not sure what that commit stuff means…I don’t think we manually update anything on our site either. We host it on discourse so I am guessing they push out updates?

1 Like

i’ll have a quick look at your forum… :slight_smile:

also, nevermind about updating the component, it is up to date, i checked.

uhmmm how do I sign up? I tried the sign up link and it gave a giant page of adverts.

unfortunately the way things seem to be configured, I cannot access to look at the code.

1 Like

To adjust the Versatile Banner, you can access its settings and input boxes from your /admin/customize/themes page, under the components tab:

Do you have a screenshot of what it used to be, or possibly a snippet of the code that’s in each of the column content settings?

3 Likes

It’s a paid forum…So you have to go through a paywall to get there…

Here’s what it used to look (disregard the arrow):

The code we are using looks like this:

<p>
  <span>Live Q&amp;A Schedule -</span>
  <span>
    <a
      href="https://forum.georgegammon.com/t/upcoming-live-q-a-5-23-2023-reply-with-your-george-gammon-questions/12481">
      <span> George Gammon: </span>Tuesday May 23 @8 PM EST</a>
    <a href="https://forum.georgegammon.com/t/upcoming-live-q-a-5-23-2023-reply-with-your-lyn-alden-questions/12446">
      <span> Lyn Alden: </span>Tuesday May 23 @4 PM EST</a>
    <a
      href="https://forum.georgegammon.com/t/upcoming-live-q-a-5-25-2023-reply-with-your-chris-macintosh-questions/12502">
      <span>Chris MacIntosh: </span>Thursday May 25 @7 PM EST</a>
    <a href="https://forum.georgegammon.com/t/upcoming-live-q-a-6-5-2023-reply-with-your-brent-johnson-questions/12444">
      <span> Brent Johnson: </span>Monday Jun 5 @7 PM EST</a>
    <a
      href="https://forum.georgegammon.com/t/upcoming-live-q-a-6-12-2023-reply-with-your-jason-hartman-questions/12491">
      <span> Jason Hartman: </span>Monday Jun 12 @4 PM EST</a>
<a href="https://forum.georgegammon.com/t/upcoming-live-happy-hour-6-19-2023-reply-with-your-team-rcp-questions/12383">
      <span> RCP Happy Hour: </span>Monday Jun 19 @3:30 PM EST</a>
    <a
     href="https://forum.georgegammon.com/t/upcoming-live-q-a-5-29-2023-reply-with-your-patrick-ceresna-questions/12402">
      <span> Patrick Ceresna: </span>Monday May 29 @ 1 PM EST</a>
    <a
      href="https://forum.georgegammon.com/t/rcp-podcast/6173">
      <span>RCP Live Q&A Podcast</span>(Audio Only)</a>
  </span>
</p>

It looks to me like there has been a recent change and some CSS code has been stripped out. I think those span tags should have properties. can you post the CSS code that is used to format those tags? it will likely be in common / css of one of your components or themes.

1 Like

Yeah, that makes a ton of sense. My dev guy said he couldn’t figure out where to put the CSS after the update…I guess that’s the issue…

1 Like

I can fix those tags if I have the original CSS code. if your dev guy wants to do it, he needs to fill those tags with he correct span properties that corresponds to the CSS formatting code.

The CSS styling that your dev applied previously should be in a separate component - if you have one titled eg. ‘Versatile Banner Custom’ or ‘Custom Banner’?

Hey JammyDodger, We just have the one Versatile banner…like so…

what is Custom Styles? I suspect that could be it. the code will be in Common/Css (there will be a button)

1 Like

This is what that tab looks like:

If found one style element in there…

hmm that may not be it then. nothing in the common tab? you have the right idea, we just need to find the component or theme where the code resides.

empty…nothing else in that plugin but what’s inside that Desktop section above.

that header-theme-selector might be part of it but I doubt it. not sure. i really need to see all of the proper code to be able to tell.

if you can’t find it, maybe I’ll do some ad-lib CSS and see if I can match your screenshot of it’s original look. not sure what that red header font is though.

edit: I am making you a new banner based on what you have provided. Give me a bit.

1 Like