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?

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 & …

Here’s how you can do it: 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. Locate the Ba…

@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 …

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

So Discourse understands SCCS natively?

Yes, it does understand SCSS natively.

How to use CSS for versatile-banner

Product Support

MihirR (Mihir) December 26, 2024, 10:24am 6

@Andro that’s SCSS :))

Topic		Replies	Views
How to change the buttons' colors on hover? Product Support versatile-banner	2	470	June 30, 2023
Versatile Banner Theme component official , versatile-banner	106	49078	July 22, 2026
An update changed our versatile banner - I don't know where we can add CSS Product Support	30	1062	August 22, 2023
Discourse Persistent banner Theme component	9	704	October 20, 2024
Asking for advice on "How to create a Banner on the main page"/ Product Support	3	780	January 20, 2023

How to use CSS for versatile-banner

Related topics