How to use CSS for versatile-banner

Support
1

I would like to change the colour of the Expand and Close items in the banner. I assume this can be done with CSS. But how does one go about doing that for the banner component?

1 Like
2

Here’s how you can do it:

  1. Open the Inspect Tool:
    Navigate to the webpage where the versatile banner is enabled. Right-click anywhere on the page and select “Inspect” (or press Ctrl + Shift + I on Windows, or Cmd + Option + I on Mac). This will open the browser’s developer tools.

  2. Locate the Banner:
    In the Elements tab of the developer tools, hover over various sections of the code to see the corresponding parts of the webpage highlighted. Once you find the banner, click on the outermost <div> that contains the banner. This ensures that you are selecting the entire banner and all its elements.

  3. Explore the Elements:
    With the banner selected, you can now see all the nested HTML elements inside the banner structure in the Elements tab. This shows you the hierarchy of the HTML used to create the banner.

  4. Inspect the Styles:
    On the right side of the developer tools, you’ll find the Styles tab. This displays the CSS styles applied to the selected element. You can view inherited styles, inline styles, and styles from external stylesheets.

  5. Experiment with Changes:
    Select an element within the banner and modify its styles directly in the Styles tab. For example, you can adjust colors, font sizes, padding, margins, or any other CSS property. These changes are temporary and visible immediately on the webpage, allowing you to experiment freely.

  6. Finalize the Design:
    Once you’re satisfied with the design changes, copy the modified CSS code. This can include changes made to individual elements or the entire banner.

  7. Apply the Changes:
    Go to your https://yoursite.com/admin/customize/components create a component and then Edit HTML/CSS section and paste the modified CSS code. Make sure to target the appropriate banner class or ID to ensure the styles apply correctly and then apply that component to your theme.

  8. Save and Review:
    Save the updated CSS, refresh your website, and confirm that the banner reflects the changes as intended.

You can also check out: How to customize CSS in Discourse

3

@MihirR great generic instructions, thank you very much.

A bit of reading seems to indicate that Firefox has a better Style Editor than Chrome in the web developer tools.

But to come to the specific case I am having great difficulty, because the Expand and Close buttons change colour on hover and I am defeated trying to find how to set the base colour. The item seems to be class span.d-button-label.

4

Hello :wave:

Here is an example for how to change the color of those buttons.

.banner-box {
  .button-container {
    .btn {
      .d-icon,
      .d-button-label {
        color: var(--tertiary); // change this to the desired color
      }
      // hover and focus color
      .discourse-no-touch & {
        &:hover,
        &:focus {
          .d-icon,
          .d-button-label {
            color: var(--tertiary-hover); // change this to the desired color
          }
        }
      }
    }
  }
}
4 Likes
5

@Dan is that SCSS or LESS? I am out of touch with current CSS. Does Discourse use that without me having to compile?

1 Like
6

@Andro that’s SCSS :))

7

So Discourse understands SCCS natively?

1 Like
8

Yes, it does understand SCSS natively.

2 Likes