Adding Fill to Accordion Heading

Beaver Builder
1

Hi There! First let me say that I LOVE beaver builder! It’s helped me to make my site look 1000% better than I could ever manage on my own.

I am wondering if there was a way (maybe through module css) that I could add a fill color to the heading of an accordion, instead of it just being a border w/ white fill.

Thank you so much!

best,
Erin

2

Hey Erin,

Thanks for getting in touch and just glad that you’re liking the plugin! You can do that by adding this custom CSS(you can change the color).

.fl-accordion .fl-accordion-button {
  background: rgba(255, 0, 0, 0.04);
}

I have to tell you, it doesn’t look too good when the accordion opens up though.

Hope this helps!

Ben

3

Wow - thanks for the quick response, I’ll give it a try…

Do I add this into the module CSS selectors? Or to my theme CSS?

additionally, what would be the appropriate addition to also change text color? Sorry for all the questions, I’m a CSS newbie!

4

Sorry - one more question… Is it possible to do this at the module level? So different accordions on different rows/columns can vary in color?

5

Hey Erin,

Sorry but what do you mean when you say CSS selector? And yes, you can add that to your theme CSS, either to the theme style.css file directly or maybe there’s a place on the theme you can place custom CSS.

You can just add the color property to the CSS above. So it should look something like this.

.fl-accordion .fl-accordion-button {
  background: rgba(255, 0, 0, 0.04);
  color: blue;
}

Ben

6

Hey Erin,

Yes that is possible. If you go to the Advanced Tab on your module settings, there is a place for a Class. You can place a class name, e.g., red-bg, then add that as a class selector on the above CSS. So it will look something like this.

.red-bg .fl-accordion .fl-accordion-button {
  background: rgba(255, 0, 0, 0.04);
  color: blue;
}

Ben

7

Yeah!! Works beautifully! Thank you so much!

8

Hey Erin,

Glad it does! Have fun with The Beaver! :slight_smile:

Ben

9