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?

Yes, it does understand SCSS natively.

How to use CSS for versatile-banner

Product Support

Andro (Andrew Bernard) December 26, 2024, 10:27am 7

So Discourse understands SCCS natively?

Topic		Replies	Views
How to change the buttons' colors on hover? Product Support versatile-banner	2	472	June 30, 2023
Versatile Banner Theme component official , versatile-banner	106	49083	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	705	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